Column Filtering

The Ignite UI for Web Components 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.

Demo

Code Snippets

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

import { FilterExpression } from 'igniteui-webcomponents-core/ES5/FilterExpression';
import { FilterFactory } from 'igniteui-webcomponents-core/ES5/FilterFactory';
import { FilterExpression } from "igniteui-react-core/ES5/FilterExpression";
import { FilterFactory } from "igniteui-react-core/ES5/FilterFactory";

Create a FilterExpression to add to the collection of filters.

private grid: IgcLiveGridComponent;
private filterText : string = "";
private filterMode : string = "Contains";
private filterColumn : string = "Name";
private filterFactory : FilterFactory;
// ...

 this.grid = document.getElementById("grid") as IgcLiveGridComponent;

document.getElementById("filterColumnDropDown").addEventListener("change", this.onFilterColumnDropDownValueChanged);
document.getElementById("filterModeDropDown").addEventListener("change", this.onFilterModeDropDownValueChanged);
document.getElementById("filterTextBox").addEventListener("change", this.onFilterTextBoxTextChanged);

 public onFilterColumnDropDownValueChanged() {
        let dropDown = document.getElementById("filterColumnDropDown") as any;
        this.filterColumn = dropDown.value;
        this.applyFilter();
    }

    public onFilterModeDropDownValueChanged() {
        let dropDown = document.getElementById("filterModeDropDown") as any;
        this.filterMode = dropDown.value;
        this.applyFilter();
    }

    public onFilterTextBoxTextChanged() {
        let textBox = document.getElementById("filterTextBox") as any;
        this.filterText = textBox.value;
        this.applyFilter();
    }

    public applyFilter(){
        this.grid.filterExpressions.clear();
        if (this.filterText === "" || this.filterText === null) {
            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.add(filter);
    }