React Grid Filtering Overview

    The Ignite UI for React Data Table / Data Grid includes a column filtering that gives you the ability to perform expressive sort conditions based on the data type of the column being filtered.

    React Grid Filtering Example

    Code Snippets

    Import the FilterExpression and FilterFactory so a collection of filters can be created.

    import { FilterExpression } from 'igniteui-react-core';
    import { FilterFactory } from 'igniteui-react-core';
    

    Create a FilterExpression to add to the collection of filters.

    public grid: IgrDataGrid;
    public filterText: string = "New York";
    public filterMode: string = "Contains";
    public filterColumn: string = "City";
    public filterFactory: FilterFactory;
    // ...
    public onGridRef(grid: IgrDataGrid) {
        this.grid = grid;
        this.applyFilter();
    }
    
    public onFilterTextChanged = (e: any) => {
        this.filterText = e.target.value;
        this.setState({filterText: e.target.value});
        this.applyFilter();
    }
    
    public onFilterModeChanged = (e: any) => {
        this.filterMode = e.target.value;
        this.setState({filterMode: e.target.value});
        this.applyFilter();
    }
    
    public onFilterColumnChanged = (e: any) => {
        this.filterColumn = e.target.value;
        this.setState({filterColumn: e.target.value});
        this.applyFilter();
    }
    
    public applyFilter()
    {
        if (this.filterText === "") {
            return;
        }
    
        this.filterFactory = new FilterFactory();
    
        const expression = this.filterText.toUpperCase();
        const column = this.filterFactory.property(this.filterColumn).toUpper();
    
        let filter: FilterExpression;
        if (this.filterMode === "Contains")
        {
            filter = column.contains(expression)
        }
        else if (this.filterMode === "StartsWith")
        {
            filter = column.startsWith(expression);
        }
        else // if (this.filterMode === "EndsWith")
        {
            filter = column.endsWith(expression);
        }
    
        this.grid.filterExpressions.clear();
        this.grid.filterExpressions.add(filter);
    }