How to show additional cell details in the DataGridRow without showing that in Flutter DataTable (SfDataGrid)?
In this article, you can learn about how to generate the additional cell details in the DataGridRow without showing that in Flutter DataGrid.
STEP 1: Create a data source class by extending DataGridSource and use it to map data to the SfDataGrid. In the `buildDataGridRow` method, map the entire underlying collection data to a DataGridRow.
Here all the columns are generated from the underlying collection to DataGridRow. But, the four columns are alone displayed in a grid.
In the buildRow method, return a DataGridRowAdapter with the required cell details to be displayed in the DataGrid.
class EmployeeDataSource extends DataGridSource {
EmployeeDataSource(List<Employee> employees) {
buildDataGridRow(employees);
}
void buildDataGridRow(List<Employee> employeeData) {
dataGridRow = employeeData.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),
DataGridCell<int>(columnName: 'Salary', value: employee.salary),
DataGridCell<String>(columnName: 'Address', value: employee.address),
DataGridCell<String>(columnName: 'City', value: employee.city),
DataGridCell<String>(columnName: 'Country', value: employee.country)
]);
}).toList();
}
List<DataGridRow> dataGridRow = <DataGridRow>[];
@override
List<DataGridRow> get rows => dataGridRow.isEmpty ? [] : dataGridRow;
@override
DataGridRowAdapter? buildRow(DataGridRow row) {
return DataGridRowAdapter(
cells: [
Container(
alignment: Alignment.center,
child: Text(
row
.getCells()
.firstWhere((element) => element.columnName == 'ID')
.value
.toString(),
)),
Container(
alignment: Alignment.center,
child: Text(
row
.getCells()
.firstWhere((element) => element.columnName == 'Name')
.value
.toString(),
)),
Container(
alignment: Alignment.center,
child: Text(
row
.getCells()
.firstWhere((element) => element.columnName == 'Designation')
.value
.toString(),
)),
Container(
alignment: Alignment.center,
child: Text(
row
.getCells()
.firstWhere((element) => element.columnName == 'Salary')
.value
.toString(),
))
].toList());
}
}
STEP 2: Initialize the SfDataGrid widget with all the required properties. In this example, the additional cells not in the grid are displayed when tapping on the corresponding rows.
@override
void initState() {
super.initState();
employees = getEmployeeData();
_employeeDataSource = EmployeeDataSource(employees);
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: const Text('Flutter SfDataGrid')),
body: SfDataGrid(
source: _employeeDataSource,
columns: [
GridColumn(
columnName: 'ID',
label: Container(
padding: const EdgeInsets.symmetric(horizontal: 8.0),
alignment: Alignment.center,
child: const Text('ID'),
),
),
GridColumn(
columnName: 'Name',
label: Container(
padding: const EdgeInsets.symmetric(horizontal: 8.0),
alignment: Alignment.center,
child: const Text('Name'),
),
),
GridColumn(
columnName: 'Designation',
label: Container(
padding: const EdgeInsets.symmetric(horizontal: 8.0),
alignment: Alignment.center,
child: const Text('Designation'),
),
),
GridColumn(
columnName: 'Salary',
label: Container(
padding: const EdgeInsets.symmetric(horizontal: 8.0),
alignment: Alignment.center,
child: const Text('Salary '),
),
),
],
onCellTap: (details) {
if (details.rowColumnIndex.rowIndex != 0) {
int selectedRowIndex = details.rowColumnIndex.rowIndex - 1;
var row =
_employeeDataSource.effectiveRows.elementAt(selectedRowIndex);
showDialog(
context: context,
builder: (context) => AlertDialog(
shape: const RoundedRectangleBorder(
borderRadius: BorderRadius.all(Radius.circular(32.0))),
content: SizedBox(
height: 200,
width: 200,
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text(
'Address: ${row.getCells().firstWhere((element) => element.columnName == 'Address').value.toString()}'),
Text(
'City: ${row.getCells().firstWhere((element) => element.columnName == 'City').value.toString()}'),
Text(
'Country: ${row.getCells().firstWhere((element) => element.columnName == 'Country').value.toString()}'),
SizedBox(
width: 300,
child: ElevatedButton(
onPressed: () {
Navigator.pop(context);
},
child: const Text("OK")),
)
]),
)));
}
},
columnWidthMode: ColumnWidthMode.fill,
),
);
}
Conclusion
I hope you enjoyed learning about how to show additional cell details in the DataGridRow without showing that in Flutter DataTable (SfDataGrid).
You can refer to our Flutter DataGrid’s feature tour page to know about its other groundbreaking feature representations. You can also explore our Flutter DataGrid documentation to understand how to present and manipulate data. You can also explore our Flutter DataGrid example to understand how to create and manipulate data
For current customers, you can check out our WinForms components from the License and Downloads page. If you are new to Syncfusion®, you can try our 30-day free trial to check out our Flutter DataGrid and other Flutter components.
If you have any queries or require clarifications, please let us know in comments below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
