React Grid フィルタリング
React Grid の Ignite UI for React フィルタリングは、特定の基準または条件に基づいてデータを選択的に表示または非表示にする機能です。IgrGrid
コンポーネントが豊富なフィルタリング API とすべてのフィルタリング機能を提供するバインドされたデータ コンテナがあります。ここで利用可能なフィルタリング タイプは次の 3 つです。
- クイック フィルタリング
- Excel スタイル フィルタリング
- 高度なフィルタリング
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 リファレンス
その他のリソース
コミュニティに参加して新しいアイデアをご提案ください。