# Local Data Operations

The KendoReact Grid enables you to page, filter, sort and group the data locally, or utilize its built-in data-processing mechanism:

* [Manual Data Operations](https://www.telerik.com/kendo-react-ui/components/grid/data-operations/local-operations#manual-data-operations)
* [Auto-Processing the Data](https://www.telerik.com/kendo-react-ui/components/grid/data-operations/local-operations#auto-processing-the-data)

## Manual Data Operations

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.

   ```jsx
   const initialDataState: State = {
       sort: [{ field: "code", dir: "asc" }],
       take: 10,
       skip: 0,
       group: [{
           field: "CategoryID"
       }]
   };
   ...
   const [dataState, setDataState] = React.useState<State>(initialDataState);
   ```

2. Pass the current data state to the Grid.

   ```jsx
   <Grid
       {...dataState}
   ```

3. Use the [`onDataStateChange`](https://www.telerik.com/kendo-react-ui/components/grid/api/gridprops#ondatastatechange) event to handle all data operations from a single place. The event data provides the combined 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.

   ```jsx
   onDataStateChange={(e: GridDataStateChangeEvent) => {
       setDataState(e.dataState);
       setDataResult(process(products, e.dataState));
   }}
   ```

4. Use the `process` method of the [`DataQuery`](https://www.telerik.com/kendo-react-ui/components/dataquery) library which will automatically process the data based on the current data state.

   ```jsx
   const [dataResult, setDataResult] = React.useState<DataResult>(process(products, dataState));
   ...
   <Grid
       data={dataResult}
   ```

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

[Demo Source](https://demos.telerik.com/kendo-react-ui/grid/data-operations-overview/func/source.txt)

When the data state from the `onDataStateChange` event or the initial state is set to the Grid, no further values for `skip`, `take`, `filter`, `sort` or `group` should be added, because they will already be included in the State. When the `data` property of the Grid is populated through the `process` helper method, the `total` property should not be set manually, because it will be part of the returned object.

## Auto-Processing the Data

The KendoReact Grid provides a mechanism to enable built-in data-processing which takes care of the `filter`, `sort`, `page` and `group` operations internally. To enable this feature, set the [`autoProcessData`](https://www.telerik.com/kendo-react-ui/components/grid/api/gridprops#autoprocessdata) property to `true`.

```jsx
<Grid data={products} autoProcessData={true} />
```

The following example demonstrates how to enable `autoProcessData` for the Grid to automatically handle sorting, filtering, grouping, and paging without manual state management.

[Demo Source](https://demos.telerik.com/kendo-react-ui/grid/data-operations-auto/source.txt)

## Suggested Links

* [Data Query Overview](https://www.telerik.com/kendo-react-ui/components/dataquery)
* [API Reference of the Grid](https://www.telerik.com/kendo-react-ui/components/grid/api/gridprops)
* [API Index of the Grid](https://www.telerik.com/kendo-react-ui/components/grid/api)