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