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.

ninja-iconThe Sorting is part of KendoReact, a professional grade UI library with 110+ components for building modern and feature-rich applications. To try it out sign up for a free 30-day trial.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

The following example demonstrates the minimum required configuration for single column sorting the Grid records.

Change Theme
Theme
Loading ...

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.allowUnsort option which determines if the columns can be unsorted.
  • To enable the sorting of multiple columns, set the sortable.mode option which accepts a single or multiple value.
Change Theme
Theme
Loading ...

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:

Change Theme
Theme
Loading ...

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.

jsx
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
    });
}

KendoReact Data Grid Sorting APIs