Grid / Sorting
material theme

Sorting

The KendoReact Data Grid enables you to sort single and multiple data-bound columns.

The Grid component is part of KendoReact, a professionally built commercial UI library. To try out this component you need to sign up for a 30-day trial, which gives you access to the full KendoReact library.

Start Free Trial

Getting Started

To enable sorting:

  1. Set the sortable option of the Grid.
  2. Set the field option of the Grid column.
  3. Utilize the sort option to apply the sorting styles and buttons to the affected columns.
  4. When sortable is configured and the user tries to sort a column, the onSortChange event is emitted. Handle the onSortChange event where you have the option to sort the data programmatically, to make a request to the server for server sorting, or to use the process method of the DataQuery library which automatically processes the data.

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

import React from 'react';
import ReactDOM from 'react-dom';
import { Grid, GridColumn as Column } from '@progress/kendo-react-grid';

import { orderBy } from '@progress/kendo-data-query';

import products from './products.json';

class App extends React.Component {
    state = {
        sort: [
            { field: 'ProductName', dir: 'asc' }
        ]
    }
    render() {
        return (
            <Grid
                style={{ height: '300px' }}
                data={orderBy(products, this.state.sort)}
                sortable
                sort={this.state.sort}
                onSortChange={(e) => {
                    this.setState({
                        sort: e.sort
                    });
                }}
            >
                <Column field="ProductID" />
                <Column field="ProductName" title="Product Name" />
                <Column field="UnitPrice" title="Unit Price" />
            </Grid>
        );
    }
}

ReactDOM.render(
    <App />,
    document.querySelector('my-app')
);

Customize 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.
import React from 'react';
import ReactDOM from 'react-dom';
import { Grid, GridColumn as Column } from '@progress/kendo-react-grid';

import { orderBy } from '@progress/kendo-data-query';

import products from './products.json';

class App extends React.Component {
    state = {
        data: [ ...products ],
        sort: [],
        allowUnsort: true,
        multiple: false
    };

    sortChange = (event) => {
        this.setState({
            data: this.getProducts(event.sort),
            sort: event.sort
        });
    }

    getProducts = (sort) => {
        return orderBy(products, sort);
    }

    render() {
        return (
            <div>
                <div className="example-config">
                    <input
                        type="checkbox"
                        className="k-checkbox"
                        id="unsort"
                        checked={this.state.allowUnsort}
                        onChange={event => {
                            this.setState({
                                allowUnsort: event.target.checked
                            })
                        }}
                    />
                    <label htmlFor="unsort" className="k-checkbox-label" style={{ lineHeight: '1.2', marginBottom: '1em' }}>
                        Enable unsorting
                    </label>
                    <br />
                    <input
                        type="checkbox"
                        className="k-checkbox"
                        id="multiSort"
                        checked={this.state.multiple}
                        onChange={event => {
                            this.setState({
                                multiple: event.target.checked
                            })
                        }}
                    />
                    <label htmlFor="multiSort" className="k-checkbox-label" style={{ lineHeight: '1.2' }}>
                        Enable multiple columns sorting
                    </label>
                </div>
                <Grid
                    style={{ height: '300px' }}
                    data={this.state.data}
                    sortable={{
                        allowUnsort: this.state.allowUnsort,
                        mode: this.state.multiple ? 'multiple' : 'single'
                    }}
                    sort={this.state.sort}
                    onSortChange={this.sortChange}
                >
                    <Column field="ProductID" />
                    <Column field="ProductName" title="Product Name" />
                    <Column field="UnitPrice" title="Unit Price" />
                </Grid>
            </div>
        );
    }
}

ReactDOM.render(
    <App />,
    document.querySelector('my-app')
);

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

Is this article helpful?

Not finding the help you need?

Contact Support