Filtering

The KendoReact Data Grid enables you to display only those Grid records which meet specified criteria.

Getting Started

To enable filtering:

  1. Set the filterable and filter options of the Grid. The filtering conditions are declared as FilterDescriptors.
  2. Handle the onFilterChange or the onDataStateChange event of the Grid, and filter the data manually or by using Data Query filterBy or process methods if the data is locally available.

Each consecutive filter is added to the previous ones and reduces the subset of data.

Filter Rows

By default, when filtering is enabled, the Grid renders a filter row in its header. Based on the type of data the columns contain, the filter row displays filtering components in each column header where the user can filter string, numeric, boolean, or date inputs.

import React from 'react';
import ReactDOM from 'react-dom';
import { Grid, GridColumn as Column } from '@progress/kendo-react-grid';
import { filterBy } from '@progress/kendo-data-query';
import { sampleProducts } from './sample-products.jsx';

class App extends React.Component {
    state = {
        filter: {
            logic: "and",
            filters: [
                { field: "ProductName", operator: "contains", value: "Chef" }
            ]
        }
    };
    render() {
        return (
            <Grid
                style={{ height: '420px' }}
                data={filterBy(sampleProducts, this.state.filter)}
                filterable
                filter={this.state.filter}
                onFilterChange={(e) => {
                    this.setState({
                        filter: e.filter
                    });
                }}
            >
                <Column field="ProductID" title="ID" filterable={false} width="60px" />
                <Column field="ProductName" title="Product Name" />
                <Column field="FirstOrderedOn" width="240px" filter="date" format="{0:d}" />
                <Column field="UnitPrice" width="180px" filter="numeric" format="{0:c}" />
                <Column field="Discontinued" width="190px" filter="boolean" />
            </Grid>
        );
    }
}

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

Column Menu Filter

The columnMenu allows using the GridColumnMenuFilter to filter the Grid. This provides menu like filtering functionality inside a popup container for the column.

This example showcase how to filter a column using the GridColumnMenuFilter.

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

import { ColumnMenu } from './columnMenu.jsx';

import products from './products.json';

class App extends React.Component {
    state = this.createDataState({
        take: 8,
        skip: 0
    });

    createDataState = (dataState) => {
        return {
            result: process(products.slice(0), dataState),
            dataState: dataState
        };
    }

    dataStateChange = (event) => {
        this.setState(this.createDataState(event.data));
    }

    render() {
        return (
            <Grid
                data={this.state.result}
                {...this.state.dataState}
                onDataStateChange={this.dataStateChange}
                sortable={true}
                pageable={true}
                pageSize={8}
            >
                <Column field="ProductID" title="Product Id" filter={'numeric'} columnMenu={ColumnMenu}/>
                <Column field="ProductName" columnMenu={ColumnMenu}/>
                <Column field="UnitPrice" filter={'numeric'} columnMenu={ColumnMenu} />
                <Column field="Discontinued" filter={'boolean'} columnMenu={ColumnMenu} />
            </Grid>
        );
    }
}

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

Custom Filter Cells

The filterCell property of the GridColumn enables the full customization of the filter cells.

The following example demonstrates how to implement a KendoReact DropDownList component for filtering the products by category and price range.

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

import RangeFilterCell from './rangeFilterCell.jsx';
import dropdownFilterCell from './dropdownFilterCell.jsx';
import { sampleProducts } from './sample-products.jsx';

const categories = Array.from(new Set(sampleProducts.map(p => p.Category.CategoryName)));
const CategoryFilterCell = dropdownFilterCell(categories, 'Select category');

class App extends React.Component {
    state = {
        data: [ ...sampleProducts ],
        filter: undefined
    }

    filterChange = (event) => {
        this.setState({
            data: filterBy(sampleProducts, event.filter),
            filter: event.filter
        });
    }

    render() {
        return (
            <Grid
                style={{ height: '400px' }}
                data={this.state.data}

                filterable={true}
                filter={this.state.filter}
                onFilterChange={this.filterChange}
            >
                <Column field="ProductID" title="ID" filterable={false} width="60px" />
                <Column field="ProductName" title="Product Name" />
                <Column field="Category.CategoryName" title="Category Name" filterCell={CategoryFilterCell} />
                <Column field="UnitPrice" title="Unit Price" format="{0:c}" filterCell={RangeFilterCell} />
            </Grid>
        );
    }
}

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

Custom Filter Operators

The Grid allows you to customize the operators for the numeric, text, and date filter types by using the filterOperators property which accepts GridFilterOperators. The Grid uses the first operator from each type as its default operator. The Boolean filter types always use the equal operator.

import React from 'react';
import ReactDOM from 'react-dom';
import { Grid, GridColumn as Column } from '@progress/kendo-react-grid';
import { filterBy } from '@progress/kendo-data-query';
import { sampleProducts } from './sample-products.jsx';

class App extends React.Component {
    state = {
        filter: {
            logic: "and",
            filters: [
                { field: "ProductName", operator: "contains", value: "Chef" }
            ]
        }
    };
    render() {
        return (
            <Grid
                style={{ height: '420px' }}
                data={filterBy(sampleProducts, this.state.filter)}
                filterable
                filter={this.state.filter}
                filterOperators={{
                    'text': [
                        { text: 'grid.filterContainsOperator', operator: 'contains' }
                    ],
                    'numeric': [
                        { text: 'grid.filterEqOperator', operator: 'eq' }
                    ],
                    'date': [
                        { text: 'grid.filterEqOperator', operator: 'eq' }
                    ],
                    'boolean': [
                        { text: 'grid.filterEqOperator', operator: 'eq' }
                    ]
                }}
                onFilterChange={(e) => {
                    this.setState({
                        filter: e.filter
                    });
                }}
            >
                <Column field="ProductID" title="ID" filterable={false} width="60px" />
                <Column field="ProductName" title="Product Name" />
                <Column field="FirstOrderedOn" width="220px" filter="date" format="{0:d}" />
                <Column field="UnitPrice" width="180px" filter="numeric" format="{0:c}" />
                <Column field="Discontinued" width="190px" filter="boolean" />
            </Grid>
        );
    }
}

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