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

Kendo UI Grid wrapper for React

---
title: Paging
page_title: React Grid Wrapper Data Operations - Paging - Kendo UI
description: "Get started with the Grid wrapper for React by Kendo UI and learn how to enable paging to be able to split content into pages."
slug: paging_grid
position: 2
---

# Paging

By default, paging is disabled and the `pageable` option is set to `false`.

To enable paging for the Kendo UI Grid wrapper for React:

1. Set `pageable` to `true`.
1. Indicate the number of records for the Grid to display on each page.
1. Indicate the total number of records in the dataset.
1. Specify the `pageSize` on the `dataSource` and the field in the dataset that will contain the total count of records.

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

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

{% meta height:660 %}
```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}
                pageable={true} height={600}>
                <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="120px" />
                <GridColumn field="Discontinued" width="120px" />
            </Grid>
        );
    }
}

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


To avoid including too much data in the HTML, which might slow down page performance, do the paging operations on the server by setting the `serverPaging` option on the `dataSource` to `true`. If you use server paging, you need to handle the requests to the server and respond appropriately.

When `serverPaging` is enabled, the `dataSource` sends the following default parameters to the server:

* `top`&mdash;Defines the number of records to send back in the response.
* `skip`&mdash;Defines the number of records to skip from the start of the dataset.

For example, if you want to show the third page out of a 60-record dataset and you split the data into 10 records per page, the Grid will send `skip: 20, top: 10`.

In general, the Grid is platform-agnostic. This means that it works with HTTP requests to send and receive JSON payload. For example, to bind the component to a specific data subset (only to a particular page), instruct the `dataSource` to use [serverPaging](https://docs.telerik.com/kendo-ui/api/javascript/data/datasource#configuration-serverPaging). In this way, it will directly use the received data. The same rule applies to the filtering, grouping, aggregation, and sorting operations.

## Suggested Links

* [Paging of the Grid for jQuery](https://docs.telerik.com/kendo-ui/controls/data-management/grid/walkthrough#configuration-Paging)
* [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)