Articles in this section
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());
  }
}

 

loading the button widget in the flutter datagrid

 

You can download the example from GitHub.

Did you find this information helpful?
Yes
No
Help us improve this page
Please provide feedback or comments
Comments
Please  to leave a comment
Access denied
Access denied