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
Cmd for MacOS) cancels sorting by this column.
The following plugins implement sorting features:
Note that the plugin order is important.
TableHeaderRow plugins to set up a Grid with simple static sorting.
showSortingControls property to true to enable changing the sorting criteria in the header row.
In the uncontrolled mode, specify the initial sorting conditions in the
In the controlled mode, pass the sorting options to the
sorting property and handle the
onSortingChange event to control the sorting state externally.
You can prevent sorting by a specific column using the SortingState plugin’s
The Grid’s grouping features allow you to sort groups and data rows. For this, set the
showSortingControls property to true to enable the sorting UI for the Group Panel’s column headers.
The IntegratedSorting plugin’s
columnExtensions property allows you to implement a custom sorting algorithm for a specific column.
You can override the TableHeaderRow plugin’s
sortLabelComponent property to render sort labels using a custom component.
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
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
Note that you do not need to use the
IntegratedSorting plugin for remote sorting.