Web Components グリッド フィルターの概要

Web Components Data Table / Data Grid には、フィルター処理される列のデータ型に基づいてソート条件を実行する機能を提供する列フィルター API が含まれています。

Web Components グリッド フィルターの例

コード スニペット

FilterExpression と FilterFactory をインポートして、フィルターのコレクションを作成できるようにします。

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

フィルターのコレクションに追加するための FilterExpression を作成します。

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

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

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);
    }