IgrGrid – プログラムによってフィルターを実行する

IgrGrid では allowFiltering プロパティを true に設定することにより、フィルター機能が有効になります。

<IgrGrid ..... allowFiltering={true} >
.....
</IgrGrid>

赤枠で示されるフィルター行を使用し、ユーザー入力によりグリッドをフィルタリングできます。

IgrGrid の filter() メソッドを使用することにより、ユーザー入力によらずにプログラムによってフィルターを実行することも可能です。

IgrGridBaseDirective filterメソッド
https://www.infragistics.com/products/ignite-ui-react/docs/typescript/latest/classes/igniteui-react-grids.IgrGridBaseDirective.html#filter

filter() メソッドは四つの引数をとり、対象のフィールド名、フィルター値、フィルター条件、大文字小文字の区別を指定します。

以下は、「name」列に対し、大文字小文字の区別有りで文字列 “abc” を含む( contains )フィルターを実行するサンプルコードです。

const gridRef = useRef<IgrGrid>(null);

gridRef.current?.filter('name', 'abc', IgrStringFilteringOperand.instance().condition('contains'), true);

ここでは「name」列が文字列タイプのデータであるため、IgrStringFilteringOperand を使用していますが、数値タイプの場合は IgrNumberFilteringOperand、日付タイプの場合は IgrDateFilteringOperand を使用し、それぞれデータタイプに合ったフィルター条件を指定することが可能です。

//数値タイプのフィルタリング
gridRef.current?.filter('salary', 600000, IgrNumberFilteringOperand.instance().condition('greaterThan'));
//日付タイプのフィルタリング
gridRef.current?.filter('hireDate', new Date('2020-01-01'), IgrDateFilteringOperand.instance().condition('after'));