React Table 列フィルター API

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

サンプル

API を使用したフィルター

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

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

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

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

public grid: IgrLiveGrid;
public filterText: string = "New York";
public filterMode: string = "Contains";
public filterColumn: string = "City";
public filterFactory: FilterFactory;
...
public onGridRef(grid: IgrLiveGrid) {
    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);
}