@progress/kendo-grid-react-wrapper/docs/data-operations/sorting.md

Kendo UI Grid wrapper for React

---
title: Sorting
page_title: React Grid Wrapper Data Operations - Sorting - Kendo UI
description: "Get started with the Grid wrapper for React by Kendo UI and learn how to enable selection to be able to select single or multiple rows."
slug: sorting_grid
position: 3
---

# Sorting

By default, the data sorting of the Kendo UI Grid wrapper for React is disabled.

Sorting represents a function that you can push to the server for increased performance by using the `dataSource` itself and by setting the `serverSorting` option on the `dataSource` to `true`. If you delegate the sorting to the server, you will receive the default `orderBy` parameter. The `orderBy` field contains the field name of the column in the dataset by which the data is sorted.

The Grid supports the following sorting formats:

* Single-column sorting—To enable the sorting of a single column, set the `sortable` option of the Grid to `true`.
* Multi-column sorting—To enable the sorting of multiple columns, set the `mode` option to `multiple`.

```sh
<Grid sortable={true} // Other configuration.
/>
```

For more information on sorting, refer to the documentation of the [Kendo UI Grid for jQuery](https://docs.telerik.com/kendo-ui/controls/data-management/grid/walkthrough#configuration-Sorting).

{% meta height:460 %}
```jsx-preview
class GridContainer extends React.Component {
    constructor(props) {
        super(props);

        this.dataSource = new kendo.data.DataSource({
            transport: {
                read:  {
                    url:"https://demos.telerik.com/kendo-ui/service/Products",
                    dataType: "jsonp"
                }
            },
            batch: true,
            pageSize: 20,
            schema: {
                model: {
                    id: "ProductID",
                    fields: {
                        ProductID: { editable: false, nullable: true },
                        ProductName: { validation: { required: true } },
                        UnitPrice: { type: "number", validation: { required: true, min: 1} },
                        Discontinued: { type: "boolean" },
                        UnitsInStock: { type: "number", validation: { min: 0, required: true } }
                    }
                }
            }
        });
    }

    render() {
        return (
            <Grid dataSource={this.dataSource}
                sortable={true} height={400}>
                <GridColumn field="ProductName" title="Product Name" />
                <GridColumn field="UnitPrice" title="Unit Price" format="{0:c}" width="120px" />
                <GridColumn field="UnitsInStock" title="Units in Stock" width="140px" />
                <GridColumn field="Discontinued" width="140px" />
            </Grid>
        );
    }
}

ReactDOM.render(
    <GridContainer />,
    document.querySelector('my-app')
);
```
{% endmeta %}

## Suggested Links

* [Kendo UI Grid for jQuery](https://docs.telerik.com/kendo-ui/controls/data-management/grid/overview)
* [API Reference of the Grid Widget](https://docs.telerik.com/kendo-ui/api/javascript/ui/grid)