React Grid - Sorting

The Grid component supports sorting data by one or several column values. Use the corresponding plugins and UI (column headers and Group Panel) to manage the sorting state and sort data programmatically.

Click several columns while holding Shift to sort data by these columns. Clicking a column while holding Ctrl (Cmd for MacOS) cancels sorting by this column.

The following plugins implement sorting features:

Note that the plugin order is important.

Basic Setup

Use the SortingState, IntegratedSorting and TableHeaderRow plugins to set up a Grid with simple static sorting.

Set the TableHeaderRow plugin’s showSortingControls property to true to enable changing the sorting criteria in the header row.

Uncontrolled Mode

In the uncontrolled mode, specify the initial sorting conditions in the SortingState plugin’s defaultSorting property.

Controlled Mode

In the controlled mode, pass the sorting options to the SortingState plugin’s sorting property and handle the onSortingChange event to control the sorting state externally.

Disable Sorting by a Column

You can prevent sorting by a specific column using the SortingState plugin’s columnExtensions property.

Using Sorting with Grouping

The Grid’s grouping features allow you to sort groups and data rows. For this, set the GroupingPanel plugin’s showSortingControls property to true to enable the sorting UI for the Group Panel’s column headers.

Custom Sorting Algorithm

The IntegratedSorting plugin’s columnExtensions property allows you to implement a custom sorting algorithm for a specific column.

Custom Sort Label

You can override the TableHeaderRow plugin’s sortLabelComponent property to render sort labels using a custom component.

Remote Sorting

You can sort remotely by handling sorting state changes, generating a request, and sending it to the server.

Sorting options are updated when an end-user interacts with a column header in the header row or Group Panel. Use the SortingState plugin’s onSortingChange event to handle sorting option changes and use these options to request data from the server. Once the sorted data is received from the server, pass it to the Grid component’s rows property.

Note that you do not need to use the IntegratedSorting plugin for remote sorting.