Local Data Operations

The KendoReact Grid enables you to page, filter, sort and group the data locally.

Setup

To setup local data operations:

  1. Set a value inside the state that will hold the current paging, filtering, sorting and grouping parameters. Not all are required, only the ones used in the Grid instance.

    const dataState = {
        sort: [{ field: "code", dir: "asc" }],
        take: 10,
        skip: 0
    };
    
    state = {
        dataState: dataState
    };
  2. Pass the current data state to the Grid.

    <Grid
        {...this.state.dataState}
  3. Use the onDataStateChange to handle all data operations from a single place. The event data provides the combine state of the Grid including paging, sorting, filtering and grouping parameters. With server operations, these parameters can be sent to the server to process the data there.

    onDataStateChange={(e)=>{
        this.setState({dataState: e.data})
    }}
  4. Use the process method of the DataQuery library which will automatically process the data based on the current data state.

    <Grid
        data={process(products, this.state.dataState)}

Demo

The following example shows the Grid with paging, sorting and filtering enabled:

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

import products from "./products.json";
const dataState = {
    sort: [{ field: "code", dir: "asc" }],
    take: 10,
    skip: 0
};

class App extends React.Component {
    state = {
        dataState: dataState
    };
    render() {
        return (
            <Grid
                pageable
                sortable
                filterable
                style={{ height: "400px" }}
                data={process(products, this.state.dataState)}
                {...this.state.dataState}
                onDataStateChange={(e) => {
                    this.setState({ dataState: e.data })
                }}
            >
                <Column field="ProductID" title="ID" width="80px" filterable={false} />
                <Column field="ProductName" title="Name" width="250px" />
                <Column field="UnitPrice" title="Price" filter='numeric' width="150px" />
                <Column field="UnitsInStock" title="In stock" filter='numeric' width="150px" />
                <Column
                    field="Discontinued"
                    filter='boolean'
                    cell={props => (
                        <td>
                            <input
                                disabled
                                type="checkbox"
                                checked={props.dataItem[props.field]}
                            />
                        </td>
                    )}
                />
            </Grid>
        );
    }
}

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