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.
Start Free 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.
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 to fine-tune sorting behavior.
- 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.
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 Sorting
The sorting feature of the Grid enables you to unsort the columns and sort the records by multiple columns.
- To enable the unsorting of columns, utilize the
sortable.allowUnsortoption which determines if the columns can be unsorted. - To enable the sorting of multiple columns, set the
sortable.modeoption which accepts asingleormultiplevalue.
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 >= this.state.sort.length) {
sort.unshift(sort.pop());
}
this.setState({
products: this.GetProducts(sort),
sort: sort
});
}