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

グリッド Excel フィルタリングは、Tree Grid などの Angular テーブルに対して Excel のようなフィルタリング UI を提供します。

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

使用方法

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

<igx-tree-grid [data]="data" [autoGenerate]="true" [allowFiltering]="true" [filterMode]="'excelStyleFilter'">
</igx-tree-grid>

インタラクション

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

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

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

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

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

メニュー機能の構成

ソート、移動、ピン固定、非表示の機能をフィルター メニューから削除できます。これらを制御する入力は以下のとおりです: sortable、selected、disablePinning、disableHiding。

<igx-tree-grid #treegrid1 [data]="data" [autoGenerate]="false" height="480px" width="100%" [moving]="true" [allowFiltering]="true"
    primaryKey="ID" foreignKey="ParentID" filterMode="excelStyleFilter">
    <igx-column field="ID" header="Order ID" [dataType]="'string'"></igx-column>
    <igx-column field="Name" header="Order Product" [dataType]="'string'" [sortable]="true"></igx-column>
    <igx-column field="Category" header="Category" [dataType]="'string'" [sortable]="true"></igx-column>
    <igx-column field="Units" header="Units" [dataType]="'number'" [sortable]="true"></igx-column>
    <igx-column field="UnitPrice" header="Unit Price" [dataType]="'currency'" [pipeArgs]="formatOptions"></igx-column>
    <igx-column field="Price" header="Price" [dataType]="'currency'" [pipeArgs]="formatOptions" [sortable]="false" [disablePinning]="true" [disableHiding]="true"></igx-column>
    <igx-column field="OrderDate" header="Order Date" [dataType]="'date'" [formatter]="formatDate" [sortable]="false"></igx-column>
    <igx-column field="Delivered" header="Deliverued" [dataType]="'boolean'" [sortable]="false">
        <ng-template igxCell let-cell="cell" let-val>
            <img *ngIf="val" src="assets/images/grid/active.png" title="Delivered" alt="Delivered" />
            <img *ngIf="!val" src="assets/images/grid/expired.png" title="Undelivered" alt="Undelivered" />
        </ng-template>
    </igx-column>
</igx-tree-grid>

以下のサンプルでは、‘Order Product’、‘Category’、および ‘Units’ 列で 3 つの機能がすべて有効化され、‘Price’ で 3 つすべてが無効化され、‘Order Date’ と ‘Delivered’ でピン固定と非表示のみが設定されています。

テンプレート

列機能を無効にせずに Excel スタイル フィルター メニューをさらにカスタマイズする場合は、カスタム テンプレートを使用できます。Excel スタイル フィルター メニューには、テンプレート化のための 2 つのディレクティブがあります:

• IgxExcelStyleColumnOperationsTemplateDirective - ソート、移動、固定などのすべての列操作で領域を再テンプレート化します。
• IgxExcelStyleFilterOperationsTemplateDirective - すべてのフィルター固有の操作で領域を再テンプレート化します。

これらの領域の 1 つだけ、または両方を再テンプレート化できます。これらのディレクティブ内にカスタム コンテンツを配置したり、組み込みの Excel スタイル フィルタリング コンポーネントを使用できます。

次のコードは、ExcelStyleHeader、ExcelStyleSorting および ExcelStyleSearch コンポーネントを使用してカスタム Excel スタイル フィルター メニューを定義する方法を示しています。

<igx-tree-grid #treegrid1 [data]="data" [autoGenerate]="false" height="480px" width="100%" [allowFiltering]="true"
    primaryKey="ID" foreignKey="ParentID" filterMode="excelStyleFilter">

    <igx-grid-excel-style-filtering [minHeight]="'380px'" [maxHeight]="'500px'">
        <igx-excel-style-column-operations>
            <igx-excel-style-header
                [showPinning]="true"
                [showHiding]="true"
            >
            </igx-excel-style-header>

            <igx-excel-style-sorting></igx-excel-style-sorting>
        </igx-excel-style-column-operations>

        <igx-excel-style-filter-operations>
            <igx-excel-style-search></igx-excel-style-search>
        </igx-excel-style-filter-operations>
    </igx-grid-excel-style-filtering>

    ...
</igx-tree-grid>

igxExcelStyleHeaderIcon ディレクティブを使用して、列ヘッダーの Excel スタイル フィルタリング アイコンを再テンプレート化することもできます。

<igx-tree-grid ...>
    <ng-template igxExcelStyleHeaderIcon>
        <igx-icon>filter_alt</igx-icon>
    </ng-template>
</igx-tree-grid>

以下は、使用可能な Excel スタイルフィルタリング コンポーネントの完全なリストです:

• ExcelStyleHeader
• ExcelStyleSorting
• ExcelStyleMoving
• ExcelStylePinning
• ExcelStyleHiding
• ExcelStyleSelecting
• ExcelStyleClearFilters
• ExcelStyleConditionalFilter
• ExcelStyleSearch

一意の列値ストラテジ

Excel スタイル フィルタリング ダイアログ内のリスト 項目は、それぞれの列の一意の値を表します。これらの値は手動で提供し、ロード オン デマンドすることができます。詳細については、Tree Grid リモート データ 操作で説明されています。

書式設定された値のフィルタリング ストラテジ

デフォルトで、Tree Grid コンポーネントは元のセル値に基づいてデータをフィルターしますが、場合によっては書式設定された値に基づいてデータをフィルターすることができます。 そのためには、TreeGridFormattedValuesFilteringStrategy を使用します。 以下のサンプルは、列の数値を文字列として書式設定し、文字列値に基づいて Tree Grid をフィルターする方法を示します。

ツリー フィルター ビュー

デフォルトでは、Excel スタイル フィルタリング ダイアログはリスト ビューで項目を表示します。それらをツリー ビューに表示するには、TreeGridFilteringStrategy を使用して、列フィールド名の配列を指定します。フィルター項目は、指定された列の場合はツリー ビューに、他のすべての列の場合はリスト ビューに表示されます。次のサンプルは、最初の列のツリー ビューにフィルター項目を表示する方法を示しています:

外部の Excel スタイル フィルタリング

上記デモで示されるように、Excel スタイル フィルタリング ダイアログのデフォルトの外観は Tree Grid 内にあります。このダイアログは、フィルターを構成するときにのみ表示されます。ダイアログはグリッドの外部でスタンドアロン コンポーネントとして使用すると、常に表示になります。以下のデモでは、Excel スタイル フィルタリングが Tree Grid とは別に宣言されます。

デモ

使用方法

Excel スタイル フィルタリング コンポーネントを設定するには、column プロパティを Tree Grid 列の 1 つに設定する必要があります。上記のサンプルで、column プロパティは Tree Grid 列を表示する IgxSelectComponent の値にバインドされています。

<igx-select #gridColums value="ID">
   <label igxLabel>Columns:</label>
   <igx-select-item *ngFor="let c of treegrid1.columns" [value]="c.field">
       {{ c.field }}
   </igx-select-item>
</igx-select>

<igx-grid-excel-style-filtering [column]="treegrid1.getColumnByName(gridColums.value)">
</igx-grid-excel-style-filtering>

表示要素が重なる場合のアウトレット設定

Tree Grid の z-index は、DOM の各グリッドに個別の重ね合わせコンテキストを作成します。これにより、グリッドのすべての子孫要素が互いに重ね合うことなく意図したとおりに描画されます。 ただし、グリッドの外側にある要素 (Excel スタイル フィルターなど) は、同じ z-index を持つ外側の要素 (たとえば、2 つのグリッドが上下に重ねる) と競合し、誤った描画が発生します。この問題の解決策は、outlet プロパティを外部のアウトレット ディレクティブに設定し、オーバーレイ要素が常に上に表示されるようにすることです。

デモ

スタイル設定

ページネーターのスタイル設定を始めるには、すべてのテーマ関数とコンポーネントミックスインが存在する index ファイルをインポートする必要があります。

@use "igniteui-angular/theming" as *;

// 重要: Ignite UI for Angular 13 より前のバージョンは、次を使用してください。
// @import '~igniteui-angular/lib/core/styles/themes/index';

Excel スタイル フィルタリング ダイアログのスタイルを設定する方法はいくつかあります。grid-theme を使用してスタイルを設定できます。Excel スタイル フィルタリング ダイアログは、grid-theme で定義された $background、$foreground、および $accent-color 値を継承します。また、ダイアログのテキスト色をカスタマイズするための専用パラメーターも提供しています。

または、専用の excel-filtering-theme を使用すると、Excel スタイル フィルタリング ダイアログのみを完全にスタイル設定できます。

最も簡単な方法は、grid-theme を使用することです。

$background: #292826;
$foreground: #eeece1;
$accent: #ffcd0f;

$custom-grid: grid-theme(
  $background: $background,
  $foreground: $foreground,
  $accent-color: $accent,
);

Excel スタイル フィルタリング ダイアログの背景色と前景色はグリッド テーマから継承されます。さらに、ボタンやチェックボックスなどのすべてのネストされたコンポーネントは、グリッド テーマからアクセント カラーを継承します。

これで、新しく作成したグリッドテーマを組み込む準備が整いました。Excel スタイル フィルタリング ダイアログに固有のスタイル変更を加えたい場合は、直接対象に指定することができます。

:host {
    @include tokens($custom-grid);

    igx-grid-excel-style-filtering {
        --ig-excel-filtering-background: #444;
    }
}

:host ::ng-deep {
    @include tokens($custom-grid);

    igx-grid-excel-style-filtering {
        --ig-excel-filtering-background: #444;
    }
}

デモ

API リファレンス

• Column
• TreeGrid
• IgxTreeGridComponent スタイル
• Excel Filtering Theme

その他のリソース

• Tree Grid 概要

• ページング

• 仮想化とパフォーマンス

• ソート

• 集計

• 列移動

• 列のピン固定

• 列のサイズ変更

• 選択

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

• Ignite UI for Angular フォーラム (英語)
• Ignite UI for Angular GitHub (英語)