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.
DxTableHeaderRow plugins to set up a Grid with simple static sorting.
showSortingControls property to true to enable changing the sorting criteria in the header row.
Specify the sorting conditions in the
sorting property and subscribe to the
update:sorting event. Use the
.sync modifier for two-way binding.
You can prevent sorting by a specific column using the DxSortingState plugin’s
The Grid’s grouping features allow you to sort groups as well as data rows. For this, set the
showSortingControls property to true, which enables the sorting UI for the Group Panel’s column headers.
The DxIntegratedSorting plugin’s
columnExtensions property allows you to implement a custom sorting algorithm for a specific column.
You can perform remote sorting by handling sorting state changes, generating a request, and sending it to the server.
Sorting options are updated once an end-user interacts with a column header in the header row or Group Panel. Handle sorting option changes using the
update:sorting event and request data from the server using the applied sorting options. Once the sorted data is received from the server, pass it to the
Note that you do not need to use the
DxIntegratedSorting plugin for remote sorting.