How to show the dropdown column in Flutter DataTable (SfDataGrid)?
The Syncfusion Flutter DataGrid supports loading any widget in the cells. In this article, you can learn how to load the DropdownButton widget for a specific column and update the cell value by selecting the value from the drop-down.
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('Syncfusion Flutter DataGrid')),
body: SfDataGrid(
source: _employeeDataSource,
columnWidthMode: ColumnWidthMode.auto,
columns: <GridColumn>[
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'))),
],
),
);
}
STEP 2: Create a data source class by extending DataGridSource for mapping data to the SfDataGrid. In the buildRow method, you can load the DropdownButton widget based on the condition. In the onChanged event of the DropdownButton, update the cell value by calling the DataGridSource.notifyListeners method.
class EmployeeDataSource extends DataGridSource {
EmployeeDataSource(this.employees) {
dataGridRows = employees
.map<DataGridRow>((Employee e) => DataGridRow(cells: <DataGridCell>[
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<Employee> employees = [];
List<DataGridRow> dataGridRows = [];
TextStyle textStyle = const TextStyle(
fontFamily: 'Roboto',
fontWeight: FontWeight.w400,
fontSize: 14,
color: Colors.black87);
@override
List<DataGridRow> get rows => dataGridRows;
List<String> dropDownMenuItems = [
'Manager',
'Project Lead',
'Developer',
'Support',
'QA Testing',
'UI Designer',
'Sales Representative',
'Sales Associate',
'Administrator',
];
@override
DataGridRowAdapter? buildRow(DataGridRow row) {
return DataGridRowAdapter(
cells: row.getCells().map<Widget>((dataGridCell) {
return Container(
alignment: Alignment.center,
padding: const EdgeInsets.symmetric(horizontal: 8.0),
child: dataGridCell.columnName == 'designation'
? DropdownButton<String>(
value: dataGridCell.value,
autofocus: true,
focusColor: Colors.transparent,
underline: const SizedBox.shrink(),
icon: const Icon(Icons.arrow_drop_down_sharp),
isExpanded: true,
style: textStyle,
onChanged: (String? value) {
final dynamic oldValue = row
.getCells()
.firstWhereOrNull((DataGridCell dataCell) =>
dataCell.columnName == dataGridCell.columnName)
?.value ??
'';
if (oldValue == value || value == null) {
return;
}
final int dataRowIndex = dataGridRows.indexOf(row);
dataGridRows[dataRowIndex].getCells()[2] =
DataGridCell<String>(
columnName: 'designation', value: value);
employees[dataRowIndex].designation = value.toString();
notifyListeners();
},
items: dropDownMenuItems
.map<DropdownMenuItem<String>>((String value) {
return DropdownMenuItem<String>(
value: value,
child: Text(value),
);
}).toList())
: Text(
dataGridCell.value.toString(),
overflow: TextOverflow.ellipsis,
));
}).toList());
}
}
Note
If you want to load the DropdownButton only on the editing, you can load it from the buildEditWidget method. Please refer to this UG documentation, to learn more about the editing feature in DataGrid.
You can download the example from GitHub.
I hope you enjoyed learning about how to show the dropdown column 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.
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!
