How to Sort Data in Syncfusion Flutter Data Tables Based on Multiple Columns
Tags: flutter, dart, mobile, android
Published: 2021-02-05 12:59:04

---
title: How to Sort Data in Syncfusion Flutter Data Tables Based on Multiple Columns
published: true
date: 2021-02-02 11:00:26 UTC
tags: flutter, dart, mobile, android
canonical_url: https://www.syncfusion.com/blogs/post/how-to-sort-data-in-syncfusion-flutter-data-tables-based-on-multiple-columns.aspx
cover_image: https://www.syncfusion.com/blogs/wp-content/uploads/2021/01/How-to-Sort-Data-in-Syncfusion-Flutter-DataGrid-Based-on-Multiple-Columns-672x372.png
---

The Syncfusion Flutter [DataGrid (data table)](https://www.syncfusion.com/flutter-widgets/flutter-datagrid) is used to display and manipulate data in a tabular view. Its rich feature set includes different types of columns, selections, column sizing, and autofit row height. The data table is optimized to handle high-frequency, real-time updates.

The data tables also provides various options to sort one or more columns. In this article, we are going to discuss the following sorting types in our data tables:

- [Single-column sorting](#single-column-sorting)
- [Multiple-column sorting](#multiple-column-sorting)
- [Tri-state sorting](#tri-state-sorting)
- [Programmatic sorting](#programmatic-sorting)
- [Custom sorting](#custom-sorting)
- [Appearance customization](#appearance-customization)

Let’s get started!

## Single-column sorting

You can enable the sorting feature for these Flutter data tables by setting the [allowSorting](https://pub.dev/documentation/syncfusion_flutter_datagrid/latest/datagrid/SfDataGrid/allowSorting.html) property to true. To perform sorting based on a single column, just tap on the column header to sort the data in ascending or descending order.

Refer to the following code example.

```dart
@override
Widget build(BuildContext context) {
  return Scaffold(
   body: SfDataGrid(
    source: _employeeDataSource,
    allowSorting: true,
    columns: [
      GridNumericColumn(mappingName: 'id', headerText: 'ID'),
      GridTextColumn(mappingName: 'name', headerText: 'Name'),
      GridTextColumn(mappingName: 'city', headerText: 'City'),
      GridNumericColumn(mappingName: 'freight', headerText: 'Freight')
    ],
  ));
}
```

In the following screenshot, the direction of the arrow in the Name column denotes that the data is sorted in ascending order.

![Single-column sorting](https://www.syncfusion.com/blogs/wp-content/uploads/2021/01/Single-column-sorting.png)<figcaption>Single-column sorting</figcaption>

You can also customize the trigger for sorting to a double-tap on the header by setting the [sortingGestureType](https://pub.dev/documentation/syncfusion_flutter_datagrid/latest/datagrid/SfDataGrid/sortingGestureType.html) property to **doubleTap**.

## Multiple-column sorting

Sort data in more than one column by setting the [allowMultiColumnSorting](https://pub.dev/documentation/syncfusion_flutter_datagrid/latest/datagrid/SfDataGrid/allowMultiColumnSorting.html) property to true. To perform sorting on multiple columns, just tap the desired column headers in sequence.

In the web platform, sort data in multiple columns by holding on the Ctrl key when clicking on the column headers.

Refer to the following code example.

```dart
@override
Widget build(BuildContext context) {
  return Scaffold(
   body: SfDataGrid(
    source: _employeeDataSource,
    allowSorting: true,
    allowMultiColumnSorting: true,
    columns: [
      GridNumericColumn(mappingName: 'id', headerText: 'ID'),
      GridTextColumn(mappingName: 'name', headerText: 'Name'),
      GridTextColumn(mappingName: 'city', headerText: 'City'),
      GridNumericColumn(mappingName: 'freight', headerText: 'Freight')
    ],
  ));
}
```

In the following screenshot, first the City column data is sorted in ascending order and then, based on that, the Name column data is sorted in descending order.

![Multiple column sorting](https://www.syncfusion.com/blogs/wp-content/uploads/2021/01/Multiple-column-sorting.png)<figcaption>Multiple column sorting</figcaption>

To show the sorted order sequence numbers while performing sorting for multiple columns, set the [showSortNumbers](https://pub.dev/documentation/syncfusion_flutter_datagrid/latest/datagrid/SfDataGrid/showSortNumbers.html) property to true.

Refer to the following code example.

```dart
@override
Widget build(BuildContext context) {
  return Scaffold(
   body: SfDataGrid(
    source: _employeeDataSource,
    allowSorting: true,
    allowMultiColumnSorting: true,
    showSortNumbers: true,
    columns: [
      GridNumericColumn(mappingName: 'id', headerText: 'Order ID'),
      GridTextColumn(mappingName: 'name', headerText: 'Name'),
      GridTextColumn(mappingName: 'city', headerText: 'City'),
    ],
  ));
}
```

In the following screenshot, the numbers shown in the columns denote the sequential order in which the columns have been sorted.

![Columns showing the sorted orders in sequence numbers](https://www.syncfusion.com/blogs/wp-content/uploads/2021/01/Columns-showing-the-sorted-orders-in-sequence-numbers.png)<figcaption>Columns showing the sorted orders in sequence numbers</figcaption>

## Tri-state sorting

You can unsort the data to its original order by tapping the column header after sorting to **descending order**. This feature will bring your data to the original order in which you gave it to the Flutter data table. This can be done by enabling the [SfDataGrid.allowTriStateSorting](https://pub.dev/documentation/syncfusion_flutter_datagrid/latest/datagrid/SfDataGrid/allowTriStateSorting.html) property.

Refer to the following code example.

```dart
@override
Widget build(BuildContext context) {
  return Scaffold(
   body: SfDataGrid(
    source: _employeeDataSource,
    allowSorting: true,
    allowMultiColumnSorting: true,
    allowTriStateSorting: true,
    columns: [
      GridNumericColumn(mappingName: 'id', headerText: 'ID'),
      GridTextColumn(mappingName: 'name', headerText: 'Name'),
      GridTextColumn(mappingName: 'city', headerText: 'City'),
      GridNumericColumn(mappingName: 'freight', headerText: 'Freight')
    ],
  ));
}
```

Refer to the following .gif image.

![Tri-state sorting](https://www.syncfusion.com/blogs/wp-content/uploads/2021/01/Tri-state-sorting.gif)<figcaption>Tri-state sorting</figcaption>

## Programmatic sorting

In some specific cases, you may need to apply the sorting programmatically during load or run time. To apply the sorting feature programmatically, define the [SortColumnDetails](https://pub.dev/documentation/syncfusion_flutter_datagrid/latest/datagrid/SortColumnDetails-class.html) objects and add them in the [SfDataGrid.source.sortedColumns](https://pub.dev/documentation/syncfusion_flutter_datagrid/latest/datagrid/DataGridSource/sortedColumns.html) collection. Then, call the [SfDataGrid.source.sort()](https://pub.dev/documentation/syncfusion_flutter_datagrid/latest/datagrid/DataGridSource/sort.html) method to perform sorting.

Refer to the following code example.

```dart
@override
Widget build(BuildContext context) {
  return Scaffold(
    body: Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        SfDataGrid(
          source: _employeeDataSource,
          columns: [
            GridNumericColumn(mappingName: 'id', headerText: 'ID'),
            GridTextColumn(mappingName: 'name', headerText: 'Name'),
            GridTextColumn(mappingName: 'city', headerText: 'City'),
            GridNumericColumn(mappingName: 'freight', headerText: 'Freight')
          ],
        ),
        Padding(
          padding: const EdgeInsets.all(8.0),
          child: FlatButton(
              onPressed: () {
                _employeeDataSource.sortedColumns.add(SortColumnDetails(
                    name: 'name',
                    sortDirection: DataGridSortDirection.ascending));
                _employeeDataSource.sort();
              },
              child: Text('Apply sort')),
        )
      ],
    ),
  );
}
```

## Custom sorting

To sort the data with custom logic, override the [compare](https://pub.dev/documentation/syncfusion_flutter_datagrid/latest/datagrid/DataGridSource/compare.html) method in the [DataGridSource](https://pub.dev/documentation/syncfusion_flutter_datagrid/latest/datagrid/DataGridSource-class.html) class and then return the sort order.

The following example shows how to perform case-insensitive sorting.

```dart
class EmployeeDataSource extends DataGridSource<Employee> {
  @override
  List<Employee> get dataSource => _employeeData;

  @override
  Object getValue(Employee employee, String columnName) {
    switch (columnName) {
      case 'id':
        return employee.id;
        break;
      case 'name':
        return employee.name;
        break;
      case 'city':
        return employee.city;
        break;
      case 'freight':
        return employee.freight;
        break;
      default:
        return ' ';
        break;
    }
  }

  @override
  int compare(Employee a, Employee b, SortColumnDetails sortColumn) {
    if (sortColumn.name == 'name') {
      if (sortColumn.sortDirection == DataGridSortDirection.ascending) {
        if (a.name == null || b.name == null)
          return a.name == null ? -1 : 1;
        else 
          return a.name.toLowerCase().compareTo(b.name.toLowerCase());
      } else {
        if (a.name == null || b.name == null)
          return a.name == null ? 1 : -1;
        else
          return b.name.toLowerCase().compareTo(a.name.toLowerCase());
      }
    }
    return super.compare(a, b, sortColumn);
  }
}
```

Refer to the following screenshot.

![Custom case-insensitive sorting](https://www.syncfusion.com/blogs/wp-content/uploads/2021/01/Custom-case-insensitive-sorting.png)<figcaption>Custom case-insensitive sorting</figcaption>

## Appearance customization

The sort icon color can be customized for all columns using the [SfDataGridThemeData.headerStyle.sortIconColor](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfDataGridThemeData/headerStyle.html) property and for a specific column with the [GridColumn.headerStyle.sortIconColor](https://pub.dev/documentation/syncfusion_flutter_datagrid/latest/datagrid/GridColumn/headerStyle.html) property.

Refer to the following code example in which the sort icon color is set to redAccent.

```dart
import 'package:syncfusion_flutter_datagrid/datagrid.dart';
import 'package:syncfusion_flutter_core/theme.dart';

@override
Widget build(BuildContext context) {
  return Scaffold(
   body: SfDataGridTheme(
    data: SfDataGridThemeData(
        headerStyle: DataGridHeaderCellStyle(
            sortIconColor: Colors.redAccent,
            background)),
    child: SfDataGrid(
      source: _employeeDataSource,
      allowSorting: true,
      columns: [
        GridNumericColumn(mappingName: 'id', headerText: 'ID'),
        GridTextColumn(mappingName: 'name', headerText: 'Name'),
        GridTextColumn(mappingName: 'city', headerText: 'City'),
        GridNumericColumn(mappingName: 'freight', headerText: 'Freight')
      ],
    ),
  ));
}
```

Refer to the following screenshot.

![Sort icon color customization](https://www.syncfusion.com/blogs/wp-content/uploads/2021/01/Sort-icon-color-customization.png)<figcaption>Sort icon color customization</figcaption>

## GitHub reference

Access the samples for Flutter DataGrid sorting features from this [GitHub link](https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/datagrid/sorting/datagrid_sorting.dart).

## Conclusion

In this blog, we learned about the various sorting features available in the Flutter [data tables](https://www.syncfusion.com/flutter-widgets/flutter-datagrid). You can refer to this UG [documentation](https://help.syncfusion.com/flutter/datagrid/overview) for a complete guide to all the available features in the Syncfusion Flutter DataGrid widget.

If you aren’t a customer yet, you can try our 30-day [free trial](https://www.syncfusion.com/downloads) to check out these features.

If you wish to send us feedback or would like to submit any questions, please feel free to post them in the comments section of this blog post. You can also contact us through our [support forum](https://www.syncfusion.com/forums), [feedback portal](https://www.syncfusion.com/feedback), or [Direct-Trac support system](https://www.syncfusion.com/support/directtrac/incidents). We are always happy to assist you!