KendoReact Data Grid Single-column Sorting
The KendoReact Data Grid provides powerful sorting capabilities that allow users to organize and analyze data effectively. Sorting can be applied to a single column or multiple columns simultaneously, depending on the application’s requirements.
Use React Sorting for FreeYou can use the free components from the React Sorting package in production—no sign-up or license required. Sorting is part of KendoReact, an enterprise-grade UI library with 120+ free and premium components. To test-drive premium components, start a 30-day trial.Basics of Sorting in the KendoReact Data Grid
Sorting in the Grid is enabled through the sortable property. When sorting is enabled, users can click on column headers to sort data in ascending or descending order. Additional customization options allow for multi-column sorting and custom sorting logic in either one of the following modes:
-
Built-in State Management: The Grid manages its own sorting state internally.
-
Controlled Mode: The sorting state is externally managed by handling events and updating the state accordingly.
Features of Sorting
- Single-column Sorting—Users can sort data by one column at a time, with an option to unsort.
- Multiple-column Sorting—Allows sorting by multiple columns, defining sorting priorities.
- Custom Sorting Logic—Developers can implement custom compare functions
- Reversing Sorting Order—Allows you to prioritize the last sorted column.
- Client-side and Server-side Sorting—allows you to handle the sorting on the client for fast updates or processed on the server for larger datasets.
You can also enable the unsorting of columns by utilizing the sortable.allowUnsort option.
Using the Built-in State Management for Sorting
To enable sorting in the KendoReact Grid and utilize its built-in state management, follow these steps:
- Enable the
autoProcessDataprop to allow the Grid to handle the updated state automatically. - Set the
sortableprop of the Grid to enable sorting. - Set the
defaultSortprop to define the initial sorting.
The following example demonstrates how to use sorting handled by the built-in state management of the KendoReact Grid.
Using the Sorting in Controlled Mode
To enable sorting in the KendoReact Grid and use it in controlled mode, follow these steps:
- Set the
sortableoption of the Grid and set itsmodeprop tosingle. - Set the
fieldoption of the Grid column. - Utilize the
sortoption to apply the sorting styles and buttons to the affected columns. - Handle the
onSortChangeor theonDataStateChangeevent of the Grid. TheonDataStateChangeevent is recommended when the Grid will have other data operations as it provides the completedataStatein a single event. - Sort the data on the client by using our built-in methods
orderByorprocess. The data can also be sorted on the server by making a request using the event parameters.
The
orderBymethod is recommended when using theonSortChangeevent and theprocessmethod is recommended when using theonDataStateChangeevent.
The following example demonstrates the minimum required configuration for single column sorting the Grid records.
Single-column Sorting
Single-column sorting allows users to sort records by clicking on a column header. Clicking repeatedly cycles through ascending, descending, and unsorted states if enabled.
Learn more about enabling and customizing single-column sorting: Single-column Sorting Guide
Multiple-column Sorting
Multiple-column sorting lets users define a sorting hierarchy by sorting several columns at once. The order of sorting can be adjusted to prioritize certain columns.
Explore multiple-column sorting options: Multiple-column Sorting Guide
Customizing the Sort Compare Function
The SortDescriptor allows setting custom compare function for providing custom sorting logic. In the context of the Grid, the onSortChange or onDataStateChange events can be handled for finding the SortDescriptor for specific field and adding the custom sort compare function.
The following example demonstrates how to add custom compare function to version field within the onDataStateChange event of the Grid:
Reversing Sorting Order
The Grid allows you to reverse the sorting order of its columns. To apply higher priority to the last sorted column, place it at the beginning of the sorting array before setting the new state. When a column is removed from the sorting state, you do not have to reverse the items.
sortChange(event: GridSortChangeEvent) {
const sort = event.sort;
if (sort.length >= state.sort.length) {
sort.unshift(sort.pop());
}
setState({
products: GetProducts(sort),
sort: sort
});
}