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

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

React グリッド フィルターの例

コード スニペット

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

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

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

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