Filtering

Copy Codeimport React from 'react';
import ReactDOM from 'react-dom';
import { ListView } from '@progress/kendo-react-listview';
import { Card, CardTitle, CardImage, CardHeader, CardSubtitle, CardBody } from '@progress/kendo-react-layout';
import {
    Filter,
    Operators,
    TextFilter,
    NumericFilter,
    BooleanFilter,
} from '@progress/kendo-react-data-tools';
import { filterBy } from '@progress/kendo-data-query';

import products from './products.json';

const MyItemRender = props => {
    return (
        <Card style={{ height: 110, margin: 20, border: 'none' }} orientation='horizontal'>
            <CardImage src={`https://demos.telerik.com/kendo-ui/content/web/foods/${props.dataItem.ProductID}.jpg`} style={{ height: 110 }} />
            <div style={{width: '40%'}}>
                <CardTitle style={{ fontSize: 16 }}>
                    {props.dataItem.ProductName}
                </CardTitle>
                <CardSubtitle style={{ fontSize: 14 }}>
                    {props.dataItem.Category.CategoryName}
                </CardSubtitle>
            </div>
            <CardBody>
                <div>Price: {new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(props.dataItem.UnitPrice)}</div>
                <div>Available units: {props.dataItem.UnitsInStock}</div>
            </CardBody>
        </Card>
    );
}

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 },
                {
                    logic: 'or', filters: [
                        { field: 'ProductName', operator: 'contains', value: 'organic' },
                        { field: 'ProductName', operator: 'contains', value: 'cranberry' },
                    ]
                }
            ]
        }
    };

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

    render() {
        return (
            <div>
                <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 }
                    ]}
                />
                <ListView
                    data={filterBy(products, this.state.filter)}
                    item={MyItemRender}
                    style={{ width: "100%" }}
                />
            </div>
        );
    }
}
ReactDOM.render(
    <React.Fragment>
        <App />
        <style>
            {`.k-card:last-of-type  {
                border: none !important;
            }
            .k-pager-wrap {
                border-top: none;
            }`}
        </style>
    </React.Fragment>, document.querySelector('my-app')
);