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