How to load Flutter DataTable (SfDataGrid) inside ListView with the infinite height?
If you wrap the SfDataGrid inside the ListView widget, the DataGrid gets the height of infinity. By default, if the height of the SfDataGrid is infinity, and then DataGrid sets its height to 300.
The Syncfusion Flutter DataTable provides the support to set the height based on the number of rows available in the DataGrid by using the shrinkWrapRows property.
The following steps explain how to load the DataGrid inside the ListView with the infinite height,
STEP 1: Initialize the SfDataGrid widget with all the required properties and set SfDataGrid.shrinkWrapRows property to true. Wrap the DataGrid inside the ListView widget.
List<Employee> _employees = <Employee>[];
late EmployeeDataGridSource _employeeDataSource;
@override
void initState() {
super.initState();
_employees = getEmployeeData();
_employeeDataSource = EmployeeDataGridSource(employeeData: _employees);
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: const Text('Syncfusion Flutter DataGrid')),
body: ListView(children: <Widget>[
Card(child: dataGrid()),
Card(child: dataGrid())
]));
}
SfDataGrid dataGrid() {
return SfDataGrid(
shrinkWrapRows: true,
source: _employeeDataSource,
columnWidthMode: ColumnWidthMode.fill,
columns: <GridColumn>[
GridColumn(
columnName: 'id',
label: Container(
padding: const EdgeInsets.all(8.0),
alignment: Alignment.centerRight,
child: const Text('ID'))),
GridColumn(
columnName: 'name',
label: Container(
padding: const EdgeInsets.all(8.0),
alignment: Alignment.centerLeft,
child: const Text('Name'))),
GridColumn(
columnName: 'designation',
label: Container(
padding: const EdgeInsets.all(8.0),
alignment: Alignment.centerLeft,
child: const Text('Designation',
overflow: TextOverflow.ellipsis))),
GridColumn(
columnName: 'salary',
label: Container(
padding: const EdgeInsets.all(8.0),
alignment: Alignment.centerRight,
child: const Text('Salary'))),
]);
}
STEP 2: Create a data source class by extending DataGridSource for mapping data to the SfDataGrid.
class EmployeeDataGridSource extends DataGridSource {
EmployeeDataGridSource({required List<Employee> employeeData}) {
_dataGridRows = employeeData
.map<DataGridRow>((e) => DataGridRow(cells: [
DataGridCell<int>(columnName: 'id', value: e.id),
DataGridCell<String>(columnName: 'name', value: e.name),
DataGridCell<String>(
columnName: 'designation', value: e.designation),
DataGridCell<int>(columnName: 'salary', value: e.salary),
]))
.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: (dataGridCell.columnName == 'id' ||
dataGridCell.columnName == 'salary')
? Alignment.centerRight
: Alignment.centerLeft,
padding: const EdgeInsets.symmetric(horizontal: 8.0),
child: Text(
dataGridCell.value.toString(),
overflow: TextOverflow.ellipsis,
));
}).toList());
}
}
Also, if you want to set the width based on the number of columns available in DataGrid, you can achieve it by setting the shrinkWrapColumns property to true.
You can download this example on GitHub.
