How to get sorted column details in Flutter DataTable (SfDataGrid)?

In this article, we will show how to get sorted column details in Flutter DataTable.

Initialize the SfDataGrid widget with the necessary properties. SfDataGrid provides the following callbacks for sorting: The onColumnSortChanging callback is triggered when a column is being sorted, while the onColumnSortChanged callback is triggered after a column has been sorted. Using onColumnSortChanged, you can retrieve the sorted column details through the newSortedColumn parameter, which includes the column name and sort direction.

@override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Syncfusion Flutter DataGrid')),
      body: SfDataGrid(
        source: employeeDataSource,
        columnWidthMode: ColumnWidthMode.fill,
        allowSorting: true,
        onColumnSortChanged: (newSortedColumn, oldSortedColumn) {
          if (newSortedColumn != null) {
            showDialog(
              context: context,
              builder: (BuildContext context) {
                return AlertDialog(
                  title: Text("Sorted Column"),
                  content: Text(
                    "Column: ${newSortedColumn.name}\n"
                    "Sort Direction: ${newSortedColumn.sortDirection}",
                  ),
                  actions: [
                    TextButton(
                      onPressed: () {
                        Navigator.of(context).pop();
                      },
                      child: Text("OK"),
                    ),
                  ],
                );
              },
            );
          }
        },
        columns: <GridColumn>[
          GridColumn(
            columnName: 'id',
            label: Container(
              padding: EdgeInsets.all(16.0),
              alignment: Alignment.center,
              child: Text('ID'),
            ),
          ),
          GridColumn(
            columnName: 'name',
            label: Container(
              padding: EdgeInsets.all(8.0),
              alignment: Alignment.center,
              child: Text('Name'),
            ),
          ),
          GridColumn(
            columnName: 'designation',
            label: Container(
              padding: EdgeInsets.all(8.0),
              alignment: Alignment.center,
              child: Text('Designation', overflow: TextOverflow.ellipsis),
            ),
          ),
          GridColumn(
            columnName: 'salary',
            label: Container(
              padding: EdgeInsets.all(8.0),
              alignment: Alignment.center,
              child: Text('Salary'),
            ),
          ),
        ],
      ),
    );
  }

You can download this example on GitHub.