Issue with ColumnWidthMode.lastColumnFill
in Flutter Syncfusion DataGrid for Single Row
I’m experiencing an issue with the SfDataGrid
from the Syncfusion Flutter package, specifically when using the ColumnWidthMode.lastColumnFill
setting. The problem occurs when there is only a single row in the grid.
With multiple rows, the grid behaves as expected: the columns adjust their widths based on the text in the cells, and the last column properly fills the remaining space. However, when there is only a single row, the lastColumnFill
mode does not seem to work correctly. The column widths are not adjusted according to the text content in the cells, leading to improper alignment and spacing issues.
Here’s a summary of the behavior:
- With Multiple Rows: The grid columns adjust their width based on the
content of the cells, and the last column fills the remaining width
as intended. - With Single Row: The column widths do not adjust according to the
text content, and the last column does not fill the remaining space
correctly.
I would appreciate any advice on how to address this issue or if there are any known workarounds. Has anyone encountered a similar problem, or does anyone have suggestions for ensuring that ColumnWidthMode.lastColumnFill works correctly even with a single row?
import 'package:flutter/material.dart';
import 'package:syncfusion_flutter_datagrid/datagrid.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'SfDataGrid Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: DataGridScreen(),
);
}
}
class DataGridScreen extends StatelessWidget {
final List<Employee> _employees = [
Employee(
id: 1,
name: 'Employee Employee Employee Employee Employee Employee',
designation: 'Developer Developer Developer Developer Developer',
),
];
final List<Employee> _employees2 = List.generate(
10,
(index) => Employee(
id: index + 1,
name:
'Employee Employee Employee Employee Employee Employee ${index + 1}',
designation: index % 2 == 0
? 'Developer Developer Developer Developer Developer'
: 'Designer Designer Designer Designer Designer',
),
);
DataGridScreen({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('SfDataGrid with lastColumnFill'),
),
body: Column(
children: [
SfDataGrid(
source: EmployeeDataSource(employees: _employees),
columnWidthMode: ColumnWidthMode.lastColumnFill,
columns: <GridColumn>[
GridColumn(
columnName: 'id',
label: Container(
padding: const EdgeInsets.all(8),
alignment: Alignment.center,
child: const Text(
'ID',
overflow: TextOverflow.ellipsis,
),
),
),
GridColumn(
columnName: 'name',
label: Container(
padding: const EdgeInsets.all(8),
alignment: Alignment.center,
child: const Text(
'Name',
overflow: TextOverflow.ellipsis,
),
),
),
GridColumn(
columnName: 'designation',
label: Container(
padding: const EdgeInsets.all(8),
alignment: Alignment.center,
child: const Text(
'Designation',
overflow: TextOverflow.ellipsis,
),
),
),
],
),
const SizedBox(height: 5),
SfDataGrid(
source: EmployeeDataSource(employees: _employees2),
columnWidthMode: ColumnWidthMode.lastColumnFill,
columns: <GridColumn>[
GridColumn(
columnName: 'id',
label: Container(
padding: const EdgeInsets.all(8),
alignment: Alignment.center,
child: const Text(
'ID',
overflow: TextOverflow.ellipsis,
),
),
),
GridColumn(
columnName: 'name',
label: Container(
padding: const EdgeInsets.all(8),
alignment: Alignment.center,
child: const Text(
'Name',
overflow: TextOverflow.ellipsis,
),
),
),
GridColumn(
columnName: 'designation',
label: Container(
padding: const EdgeInsets.all(8),
alignment: Alignment.center,
child: const Text(
'Designation',
overflow: TextOverflow.ellipsis,
),
),
),
],
),
],
),
);
}
}
class Employee {
Employee({required this.id, required this.name, required this.designation});
final int id;
final String name;
final String designation;
}
class EmployeeDataSource extends DataGridSource {
EmployeeDataSource({required List<Employee> employees}) {
dataGridRows = employees.map<DataGridRow>((employee) {
return DataGridRow(cells: [
DataGridCell<int>(columnName: 'id', value: employee.id),
DataGridCell<String>(columnName: 'name', value: employee.name),
DataGridCell<String>(
columnName: 'designation', value: employee.designation),
]);
}).toList();
}
List<DataGridRow> dataGridRows = [];
@override
List<DataGridRow> get rows => dataGridRows;
@override
DataGridRowAdapter buildRow(DataGridRow row) {
return DataGridRowAdapter(
cells: row.getCells().map<Widget>((dataGridCell) {
return Container(
alignment: Alignment.center,
padding: const EdgeInsets.all(8.0),
child: Text(dataGridCell.value.toString()),
);
}).toList(),
);
}
}