Local Data Operations

You can sort, filter, or page the local data to which the KendoReact Data Grid is bound by using the Kendo UI Data Query component.

The following example demonstrates how to create a higher-order component (HOC) which uses the process() Data Query method to manage the local data operations. The HOC has its own state and adds the filter, sort, total, and skip props to the Grid to handle its onDataStateChange event. The HOC function is then applied for binding two Grids to different sets of data without the need for you to write any logic for the filtering, sorting, and paging operations.

import React from 'react';
import ReactDOM from 'react-dom';

import { withState } from './with-state.jsx';
import { GridColumn, Grid } from '@progress/kendo-react-grid';

import products from './products.json';

const StatefulGrid = withState(Grid);

class App extends React.PureComponent {
    sampleData = [
        { field1: "Chai" },
        { field1: "Chang" },
        { field1: "Aniseed Syrup" },
        { field1: "Longlife Tofu" }
    ];

    render() {
        return (
            <div>
                <StatefulGrid data={products} style={{ height: '260px' }}>
                    <GridColumn field="ProductID" title="Product Id" filter="numeric" />
                    <GridColumn field="ProductName" title="Product Name" />
                    <GridColumn field="UnitsInStock" title="Units In Stock" filter="numeric" />
                </StatefulGrid>
                <br />
                <StatefulGrid data={this.sampleData} pageable={false}>
                    <GridColumn field="field1" title="Product Name" />
                </StatefulGrid>
            </div>
        );
    }
}

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

In this article

 /