How to perform sorting based on string length in Flutter DataTable (SfDataGrid)?

2 mins read

By default, the Syncfusion® Flutter DataTable widget sorts the data based on cell values. If you want to perform sorting based on string length, you can override the compare method and compare two objects based on text length in the DataGridSource.

The following steps explain how to sort a column based on string length 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 sorting based on string length in the 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
  int compare(DataGridRow? a, DataGridRow? b, SortColumnDetails sortColumn) {
    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();
 
    int? aLength = value1?.length;
    int? bLength = value2?.length;
 
    if (aLength == null || bLength == null) {
      return 0;
    }
 
    if (aLength.compareTo(bLength) > 0) {
      return sortColumn.sortDirection == DataGridSortDirection.ascending
          ? 1
          : -1;
    } else if (aLength.compareTo(bLength) == -1) {
      return sortColumn.sortDirection == DataGridSortDirection.ascending
          ? -1
          : 1;
    } else {
      return 0;
    }
  }
 
  @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());
  }
}

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),
    ];
  }
}

sorting based on string length in syncfusion flutter datatable.

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.

View the GitHub sample here.

Did you find this information helpful?

Yes

Comments (0)

How to perform sorting based on string length in Flutter DataTable (SfDataGrid)?

Access denied