Category / Section
How to add button column in Flutter DataTable (SfDataGrid)?
2 mins read
The Syncfusion Flutter DataGrid provides the support to load any widget in the cells. In this article, you can learn about how to load the button widget for specific column and perform any action on that button click.
STEP 1: Initialize the SfDataGrid widget with all the required properties.
List<Employee> _employees = <Employee>[]; late EmployeeDataSource _employeeDataSource; @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.all(8.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'), ), ), GridColumn( columnName: 'button', label: Container( padding: const EdgeInsets.all(8.0), alignment: Alignment.center, child: const Text('Details '), ), ), ]), ); }
STEP 2: Create a data source class by extending DataGridSource for mapping data to the SfDataGrid. In the buildRow method, you can load the button widget based on the condition. Here, the respective row detail will be shown in the AlertDialog with a button click.
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), const DataGridCell<Widget>(columnName: 'button', value: null), ]); }).toList(); } List<DataGridRow> dataGridRow = <DataGridRow>[]; @override List<DataGridRow> get rows => dataGridRow.isEmpty ? [] : dataGridRow; @override DataGridRowAdapter? buildRow(DataGridRow row) { return DataGridRowAdapter( cells: row.getCells().map<Widget>((dataGridCell) { return Container( alignment: Alignment.center, child: dataGridCell.columnName == 'button' ? LayoutBuilder( builder: (BuildContext context, BoxConstraints constraints) { return ElevatedButton( onPressed: () { showDialog( context: context, builder: (context) => AlertDialog( content: SizedBox( height: 100, child: Column( mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [ Text( 'Employee ID: ${row.getCells()[0].value.toString()}'), Text( 'Employee Name: ${row.getCells()[1].value.toString()}'), Text( 'Employee Designation: ${row.getCells()[2].value.toString()}'), ], )))); }, child: const Text('Details')); }) : Text(dataGridCell.value.toString())); }).toList()); } }
You can download the example from GitHub.