React Grid フィルタリング

React Grid の Ignite UI for React フィルタリングは、特定の基準または条件に基づいてデータを選択的に表示または非表示にする機能です。IgrGrid コンポーネントが豊富なフィルタリング API とすべてのフィルタリング機能を提供するバインドされたデータコンテナがあります。ここで利用可能なフィルタリングタイプは次の 3 つです。

React Grid フィルタリングの例

以下のサンプルは、IgrGrid の Excel スタイルフィルタリング ユーザーエクスペリエンスを示しています。

設定

フィルタリングが有効かどうか、およびどのフィルタリングモードを使用するかを指定するために、IgrGrid は次のブールプロパティを公開します - allowFiltering、allowAdvancedFiltering、filterMode と filterable。

以下のオプションは、プロパティ allowFiltering で指定できます。

false - 対応するグリッドのフィルタリングが無効になります。これがデフォルト値です。
true - 対応するグリッドのフィルタリングが有効になります。

以下のオプションは、プロパティ allowAdvancedFiltering で指定できます。

false - 対応するグリッドの高度なフィルタリングが無効になります。これがデフォルト値です。
true - 対応するグリッドの高度なフィルタリングが有効になります。

以下のオプションは、プロパティ filterMode で指定できます。

QuickFilter - 簡易なフィルタリング UI。これがデフォルト値です。
ExcelStyleFilter - Excel のようなフィルタリング UI。

以下のオプションは、プロパティ filterable で指定できます。

true - 対応する列のフィルタリングが有効になります。これがデフォルト値です。
false - 対応する列のフィルタリングが無効になります。

<IgrGrid data={this.nwindData} autoGenerate="false" ref={this.gridRef} allowFiltering="true">
    <IgrColumn field="ProductName" dataType="String"></IgrColumn>
    <IgrColumn field="UnitPrice" data-type="Number" filterable="false"></IgrColumn>
</IgrGrid>

高度なフィルタリングを有効にするには、allowAdvancedFiltering 入力プロパティを true に設定します。

<IgrGrid data={nwindData} autoGenerate="false" ref={gridRef} allowAdvancedFiltering="true">
</IgrGrid>

[!Note] IgrGrid で QuickFilter または ExcelStyleFilter と高度なフィルタリングユーザーインターフェイスの両方を有効にできます。両フィルタリングユーザーインターフェイスは、互いに依存せずに機能します。IgrGrid の最終的なフィルター結果は、2 つのフィルター結果の共通部分です。

インタラクション

特定の列のフィルター行を開くには、ヘッダー下のフィルターチップをクリックします。状態を追加するために入力の左側のドロップダウンを使用してフィルターオペランドを選択し、値を入力します。number と date 列には、Equals がデフォルトで選択されます。string には 'Contains'、boolean には 'All' が選択されます。'Enter' を押して条件を確定して他の条件を追加できます。条件チップの間にドロップダウンがあり、それらの間の論理演算子を決定します。'AND' がデフォルトで選択されます。条件の削除はチップの X ボタンをクリックします。編集はチップを選択、入力はチップのデータで生成されます。フィルター行が開いているときにフィルター可能な列のヘッダーをクリックして選択し、フィルター条件を追加できます。

列に適用したフィルターがある場合、フィルター行が閉じられるとチップの閉じるボタンをクリックした条件の削除やいずれかのチップを選択してフィルター行を開くことができます。すべての条件を表示するための十分なスペースがない場合、条件数を示すバッジ付きのフィルターアイコンが表示されます。フィルター行を開くためにクリックできます。

使用方法

デフォルトの定義済みフィルタリングおよび標準のフィルタリング条件があり、カスタム実装で置き換えることも可能です。また、カスタムフィルタリング条件を追加することもできます。IgrGrid には、簡易なフィルター UI と詳細なフィルターオプションがあります。列で設定された dataType に基づいて、適切なフィルタリング処理のセットがフィルター UI ドロップダウンに読み込まれます。また、IgnoreCase と最初の Condition プロパティを設定できます。

フィルタリング機能は、allowFiltering 入力を true に設定すると IgrGrid コンポーネントで有効になります。デフォルトの filterMode は QuickFilter でランタイムでは変更できません。特定の列でこの機能を無効にするには、filterable 入力を false に設定します。

<IgrGrid autoGenerate="false" allowFiltering="true">
    <IgrColumn field="ProductName" dataType="String"></IgrColumn>
    <IgrColumn field="Price" dataType="Number"></IgrColumn>
    <IgrColumn field="Discontinued" dataType="Boolean" filterable="false"></IgrColumn>
</IgrGrid>

[!Note] string 型の値が date データ型の列で使用される場合、IgrGrid は値を date オブジェクトに解析しないためフィルター条件は使用できません。string オブジェクトを使用する場合、値を date オブジェクトに解析するためのロジックをアプリケーションレベルで実装する必要があります。

フィルターロジック

IgrGrid コントロールの filteringLogic プロパティは IgrGrid で複数の列のフィルターが解決する方法を制御します。IgrGrid API または IgrGrid の入力プロパティによって変更できます。

import { FilteringLogic } from "igniteui-react-grids";

<IgrGrid filteringLogic={FilteringLogic.Or}></IgrGrid>

AND のデフォルト値は現在適用されているすべてのフィルター式と一致する行のみを返します。上記の例は、「ProductName」セル値が「myproduct」を含み、「Price」セル値が 55 より大きい場合に行が返されます。

OR に設定される場合、「ProductName」セル値が「myproduct」を含むか、「Price」セル値が 55 より大きい場合に行が返されます。

スタイル設定

定義済みのテーマに加えて、利用可能な CSS プロパティのいくつかを設定することで、グリッドをさらにカスタマイズできます。一部の色を変更したい場合は、最初にグリッドのクラスを設定する必要があります。

<IgrGrid className="grid"></IgrGrid>

次に、そのクラスに関連する CSS プロパティを設定します。

.grid {
    --ig-grid-filtering-row-text-color: #292826;
    --ig-grid-filtering-row-background: #ffcd0f;
    --ig-grid-filtering-header-text-color: #292826;
    --ig-grid-filtering-header-background: #ffcd0f;
}

デモ

既知の問題と制限

[!Note] Firefox などの一部のブラウザーは、地域固有の小数点区切り文字をグループ化区切りと見なすため解析できず、無効になります。数値列フィルター値にそのような値を入力すると、数値の有効な部分のみがフィルター式に適用されます。詳細については、Firefox 問題を参照してください。

API リファレンス

その他のリソース

コミュニティに参加して新しいアイデアをご提案ください。

React Grid フィルタリング