React Grid の Excel スタイルフィルタリング

React Grid は、Excel のようなフィルタリング UI を提供する Excel スタイルのフィルタリング機能を公開します。これにより、大規模なデータセットを操作するプロセスが簡素化されます。主なアイデアは、無関係なエントリを排除しながら、最も関連性の高いデータをフィルタリングできるようにすることです。

React Grid Excel スタイルフィルタリングの例

使用方法

IgrGrid コンポーネントの Excel スタイルフィルタリングをオンにするには、2 つの入力を設定します。allowFiltering を true に設定し、filterMode を ExcelStyleFilter に設定してください。

<IgrGrid data={nwindData} autoGenerate={true} allowFiltering={true} filterMode="excelStyleFilter">
</IgrGrid>

インタラクション

特定の列のフィルターメニューを開くには、ヘッダーの React フィルターアイコンをクリックします。さらに、選択したヘッダーで CTRL + SHIFT + L の組み合わせを使用できます。列でフィルタリング機能とソート、ピン固定、移動、選択、非表示が設定された場合、オンになっている機能のボタンが表示されます。

フィルターが適用されていない場合、リストのすべての項目が選択されます￥。リストの上の入力からフィルターされます。データのフィルターは、リストで項目を選択/非選択して [適用] ボタンをクリックするか、あるいは ENTER を押します。リスト項目に適用したフィルタリングは、equals オペレーターでフィルター式を作成します。各式間のロジックオペレーターは OR です。

検索ボックスに入力してフィルターを適用すると、検索条件に一致する項目のみが選択されます。ただし、現在フィルターされている項目に項目を追加したい場合は、[現在の選択をフィルターに追加] オプションを選択する必要があります。

フィルターをクリアしたい場合、[すべて選択] オプションをチェックして [適用] ボタンを押します。

異なる式でフィルターを適用する場合、テキストフィルターをクリックし、特定の列で使用できるフィルター演算子のサブメニューを開きます。いずれかを選択してカスタムフィルターダイアログを開き、フィルターとロジック演算子を使用して式を追加できます。[クリア] ボタンでフィルターをクリアできます。

メニュー機能の構成

ソート、ピン固定、および非表示機能は、対応する入力を使用してフィルターメニューから削除できます: sortable、selected、disablePinning、disableHiding。

<IgrGrid data={nwindData} autoGenerate={false} allowFiltering={true} filterMode="excelStyleFilter">
    <IgrColumn field="ProductName" header="Product Name" sortable={true} dataType="string">
    </IgrColumn>
    <IgrColumn field="QuantityPerUnit" header="Quantity Per Unit" sortable={false} disablePinning={true} disableHiding={true} dataType="string">
    </IgrColumn>
    <IgrColumn field="UnitPrice" header="Unit Price" disablePinning={true} disableHiding={true} sortable={true} dataType="number">
    </IgrColumn>
    <IgrColumn field="OrderDate" header="Order Date" sortable={false}  dataType="date">
    </IgrColumn>
    <IgrColumn field="Discontinued" header="Discontinued" sortable={true} dataType="boolean">
    </IgrColumn>      
</IgrGrid>

以下のサンプルの Product Name と Discontinued 列で 4 つすべての機能が有効です。Quantity Per Unit で 4 機能すべてが無効、Unit Price でソートのみが有効、Order Date でピン固定と非表示のみ有効です。すべてが selectable です。

テンプレート

Excel スタイルフィルターメニューをさらにカスタマイズする場合は、excelStyleHeaderIconTemplate プロパティを使用して、メニューのヘッダーアイコンのカスタムテンプレートを定義できます。

次のコードは、excelStyleHeaderIconTemplate を使用して Excel スタイルフィルターメニューをカスタマイズする方法を示しています。

const webGridFilterAltIconTemplate = (ctx: IgrGridHeaderTemplateContext) => {
  return (
    <img 
      height="15px" 
      width="15px" 
      src="http://static.infragistics.com/xplatform/images/grid/propeller-logo.svg" 
      title="Continued" 
      alt="Continued" 
    />
  );
}

<IgrGrid autoGenerate={true} allowFiltering={true} filterMode="excelStyleFilter" 
    excelStyleHeaderIconTemplate={webGridFilterAltIconTemplate}>
</IgrGrid>

スタイル設定

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

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

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

.grid {
    --ig-grid-filtering-row-background: #ffcd0f;
    --ig-list-item-background: #ffcd0f;
}

デモ

API リファレンス

その他のリソース

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

React Grid の Excel スタイル フィルタリング

React Grid Excel スタイル フィルタリングの例