How to create empty rows in Flutter DataTable (SfDataGrid)?
The Syncfusion® Flutter DataGrid requires the collection of DataGridRow. Users typically convert the underlying business object collection to a collection of DataGridRow at the sample level. Users must set the collection to the DataGridSource.rows property.
You can add the additional data directly to the DataGridSource.rows property. So, additional empty rows without having those rows in underlying business object data collection can also be added.
The following steps explain how to create additional empty rows in Syncfusion® Flutter DataTable:
STEP 1: Initialize the SfDataGrid widget with all the required properties.
List<Employee> _employees = <Employee>[];
late EmployeeDataGridSource _employeeDataSource;
@override
void initState() {
super.initState();
_employees = getEmployeeData();
_employeeDataSource =
EmployeeDataGridSource(employeeData: _employees, emptyRowsCount: 5);
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: const Text('Syncfusion Flutter DataGrid')),
body: SfDataGrid(
source: _employeeDataSource,
columnWidthMode: ColumnWidthMode.fill,
columns: <GridColumn>[
GridColumn(
columnName: 'id',
label: Container(
padding: const EdgeInsets.all(16.0),
alignment: Alignment.center,
child: const Text('ID'))),
GridColumn(
columnName: 'name',
label: Container(
padding: const EdgeInsets.all(8.0),
alignment: Alignment.center,
child: const Text('Name'))),
GridColumn(
columnName: 'designation',
label: Container(
padding: const EdgeInsets.all(8.0),
alignment: Alignment.center,
child: const Text('Designation',
overflow: TextOverflow.ellipsis))),
GridColumn(
columnName: 'salary',
label: Container(
padding: const EdgeInsets.all(8.0),
alignment: Alignment.center,
child: const Text('Salary'))),
]));
}
STEP 2: Create a data source class by extending DataGridSource for mapping data to the SfDataGrid. Create empty rows by setting the null values to the cells and adding them to the DataGridRow collection. These empty rows are added after converting the business object collection to DataGridRow collection.
class EmployeeDataGridSource extends DataGridSource {
EmployeeDataGridSource(
{required List<Employee> employeeData, required int emptyRowsCount}) {
_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();
for (int i = 0; i < emptyRowsCount; i++) {
_dataGridRows.add(const DataGridRow(cells: [
DataGridCell(columnName: 'id', value: null),
DataGridCell(columnName: 'name', value: null),
DataGridCell(columnName: 'designation', value: null),
DataGridCell(columnName: 'salary', value: null),
]));
}
}
List<DataGridRow> _dataGridRows = [];
@override
List<DataGridRow> get rows => _dataGridRows;
@override
DataGridRowAdapter buildRow(DataGridRow row) {
return DataGridRowAdapter(
cells: row.getCells().map<Widget>((e) {
return Container(
alignment: Alignment.center,
padding: const EdgeInsets.all(8.0),
child: Text(e.value?.toString() ?? ''),
);
}).toList());
}
}
