KendoReact Data Grid Sorting Overview
The KendoReact Data Grid enables you to sort single and multiple data-bound columns.
Start Free Trial
Getting Started with the KendoReact Data Grid Sorting
To enable sorting:
- Set the
sortableoption of the Grid. - 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 sorting the Grid records.
Customizing 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 column which was last sorted, place the last column at the beginning of the sorting array before you set the new state. When a column is removed from the sorting state, you do not have to reverse the items.
sortChange(event) {
const sort = event.sort;
if (sort.length >= this.state.sort.length) {
sort.unshift(sort.pop());
}
this.setState({
products: this.GetProducts(sort),
sort: sort
});
}