Data Tools / Filter
material theme

Filter Overview

The KendoReact Filter provides options for building and editing a CompositeFilterDescriptor object.

The KendoReact Filter is part of the KendoReact library of React UI components. It is distributed through NPM under the kendo-react-data-tools package.

Basic Usage

You can configure the Filter by using the following properties:

  • fields—Sets the fields settings which describes field names, labels, filter editor components and filter operators.
  • value—Sets the value of the filter.
  • onChange—The onChange event which will be triggered when the Filter value is changed.
import React from 'react';
import ReactDOM from 'react-dom';
import {
    Filter,
    Operators,
    TextFilter,
    NumericFilter,
    DateFilter,
    BooleanFilter,
} from '@progress/kendo-react-data-tools';

import { filterBy } from '@progress/kendo-data-query';
import { Grid, GridColumn } from '@progress/kendo-react-grid';
import { products } from './products.js';

class App extends React.Component {
    state = {
        filter: { logic: 'and', filters: [
            { field: 'UnitPrice', operator: 'gt', value: 20 },
            { field: 'UnitPrice', operator: 'lt', value: 50 },
            { field: 'Discontinued', operator: 'eq', value: false },
            { field: 'FirstOrderedOn', operator: 'lt', value: new Date(2000, 1, 1) },
            { logic: 'or', filters: [
                { field: 'ProductName', operator: 'contains', value: 'organic' },
                { field: 'ProductName', operator: 'contains', value: 'cranberry' },
            ] }
        ] }
    };

    onFilterChange = (event) => {
        this.setState({ filter: event.filter });
    }

    render() {
        return (
            <React.Fragment>
                <Filter
                    value={this.state.filter}
                    onChange={this.onFilterChange}
                    fields={[
                        { name: "ProductName", label: 'Name', filter: TextFilter, operators: Operators.text },
                        { name: "UnitPrice", label: 'Price', filter: NumericFilter, operators: Operators.numeric },
                        { name: "Discontinued", label: 'Discontinued', filter: BooleanFilter, operators: Operators.boolean },
                        { name: "FirstOrderedOn", label: "First Ordered", filter: DateFilter, operators: Operators.date }
                    ]}
                />
                <Grid
                    style={{ maxHeight: '400px' }}
                    data={filterBy(products, this.state.filter)}
                >
                    <GridColumn field="ProductName" title="Name" width="300px" />
                    <GridColumn field="UnitPrice" title="Price" />
                    <GridColumn field="FirstOrderedOn" title="First Ordered" format="{0:d}" />
                    <GridColumn field="Discontinued" title="Discontinued" />
                </Grid>
            </React.Fragment>
        );
    }
}

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

Functionality and Features

The Filter provides globalization support.

 /