How to set the key property for each row in a Flutter DataTable (SfDataGrid)?

In this article, we'll discuss how to set the key property for each row in a Flutter DataGrid within the SfDataGrid widget for automation purposes.

STEP 1:

Initialize the SfDataGrid widget with all the required properties.

@override
 void initState() {
   super.initState();
   employees = getEmployeeData();
   employeeDataSource = EmployeeDataSource(employeeData: employees);
 }

 @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:

The buildRow method in the DataGridSource class creates a DataGridRowAdapter for every row in the DataGrid. The DataGridRowAdapter is used to customize how each row looks and behaves. To assign a unique identifier to each DataGridRowAdapter, a Key is used. This key allows easy referencing and interaction with specific rows in the SfDataGrid, enabling automation and other operations that require identifying individual rows.

class EmployeeDataSource extends DataGridSource {
  EmployeeDataSource({required List<Employee> employeeData}) {
    _employeeData = 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> _employeeData = [];

  @override
  List<DataGridRow> get rows => _employeeData;

  @override
  DataGridRowAdapter buildRow(DataGridRow row) {
    final index = _employeeData.indexOf(row);
    final ValueKey<String> valueKey = ValueKey<String>('employee_$index');
    return DataGridRowAdapter(
        key: valueKey,
        cells: row.getCells().map<Widget>((e) {
          return Container(
            alignment: Alignment.center,
            padding: const EdgeInsets.all(8.0),
            child: Text(e.value.toString()),
          );
        }).toList());
  }
}