How to perform case insensitive sorting in Flutter SfDataGrid?
By default, the Syncfusion® Flutter DataTable widget sorts the data based on cell values. If you want to perform case-insensitive sorting, you can override compare method and compare two objects in case-insensitive in DataGridSource.
The following steps explain how to sort a column based on case insensitive in Syncfusion® Flutter DataTable:
STEP 1: First, create a data source class by overriding DataGridSource. Override the compare method and all other required methods. Provide the custom logic to perform case insensitive sorting in compare method.
class EmployeeDataSource extends DataGridSource {
EmployeeDataSource({required List<Employee> employees}) {
_employeeData = employees
.map<DataGridRow>((e) => DataGridRow(cells: [
DataGridCell<int>(columnName: 'id', value: e.id),
DataGridCell<String>(columnName: 'name', value: e.name),
DataGridCell<String>(columnName: 'city', value: e.city),
DataGridCell<int>(columnName: 'freight', value: e.freight),
]))
.toList();
}
List<DataGridRow> _employeeData = [];
@override
List<DataGridRow> get rows => _employeeData;
@override
DataGridRowAdapter? buildRow(DataGridRow row) {
return DataGridRowAdapter(
cells: row.getCells().map<Widget>((e) {
return Container(
alignment: ['id', 'freight'].contains(e.columnName)
? Alignment.centerRight
: Alignment.centerLeft,
padding: const EdgeInsets.symmetric(horizontal: 16.0),
child: Text(e.value.toString()),
);
}).toList());
}
@override
int compare(DataGridRow? a, DataGridRow? b, SortColumnDetails sortColumn) {
if (sortColumn.name == 'name') {
final String? value1 = a
?.getCells()
.firstWhereOrNull((element) => element.columnName == sortColumn.name)
?.value
.toString();
final String? value2 = b
?.getCells()
.firstWhereOrNull((element) => element.columnName == sortColumn.name)
?.value
.toString();
if (value1 == null || value2 == null) {
return 0;
}
if (sortColumn.sortDirection == DataGridSortDirection.ascending) {
return value1.toLowerCase().compareTo(value2.toLowerCase());
} else {
return value2.toLowerCase().compareTo(value1.toLowerCase());
}
}
return super.compare(a, b, sortColumn);
}
}
STEP 2: Initialize the SfDataGrid widget with all the required properties and set allowSorting property to true. If you want to provide multi column sorting as well, you can set allowMultiColumnSorting property to true.
class MyHomePage extends StatefulWidget {
MyHomePage({Key? key}) : super(key: key);
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
late EmployeeDataSource _employeeDataSource;
@override
void initState() {
super.initState();
_employeeDataSource = EmployeeDataSource(employees: populateData());
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Syncfusion Flutter DataGrid'),
),
body: SfDataGrid(
source: _employeeDataSource,
allowSorting: true,
columns: <GridColumn>[
GridColumn(
columnName: 'id',
label: Container(
padding: const EdgeInsets.symmetric(horizontal: 16.0),
alignment: Alignment.centerRight,
child: Text(
'ID',
))),
GridColumn(
columnName: 'name',
label: Container(
padding: const EdgeInsets.symmetric(horizontal: 16.0),
alignment: Alignment.centerLeft,
child: Text(
'Name',
))),
GridColumn(
columnName: 'city',
width: 110,
label: Container(
padding: const EdgeInsets.symmetric(horizontal: 16.0),
alignment: Alignment.centerLeft,
child: Text(
'City',
overflow: TextOverflow.ellipsis,
))),
GridColumn(
columnName: 'Freight',
label: Container(
padding: const EdgeInsets.symmetric(horizontal: 16.0),
alignment: Alignment.centerRight,
child: Text('Freight'))),
],
),
);
}
List<Employee> populateData() {
return <Employee>[
Employee(10001, 'James', 'Bruxelles', 20000),
Employee(10002, 'Kathryn', 'Rosario', 30000),
Employee(10003, 'Lara', 'Recife', 15000),
Employee(10004, 'Michael', 'Graz', 15000),
Employee(10005, 'Martin', 'Montreal', 15000),
Employee(10006, 'Newberry', 'Tsawassen', 15000),
Employee(10007, 'Balnc', 'Campinas', 15000),
Employee(10008, 'Perry', 'Resende', 15000),
Employee(10009, 'Gable', 'Resende', 15000),
Employee(10010, 'Grimes', 'Recife', 15000),
Employee(10011, 'Newberry', 'Tsawassen', 15000),
Employee(10012, 'Balnc', 'Campinas', 15000),
Employee(10013, 'Perry', 'Resende', 15000),
Employee(10014, 'Gable', 'Resende', 15000),
Employee(10015, 'Grimes', 'Recife', 15000),
];
}
}
You can refer this KB to know about the basic column sorting. You can also click this link to know more about the sorting feature.
Conclusion
I hope you enjoyed learning about how to perform case insensitive sorting in Flutter DataTable.
You can refer to our Flutter Datagrid feature tour page to know about its other groundbreaking feature representations. You can also explore our Flutter DataGrid documentation to understand how to create and manipulate data.
For current customers, you can check out our File Formats from the License and Downloads page. If you are new to Syncfusion®, you can try our 30-day free trial to check out our all platforms.
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!
