Grid の列非表示

Ignite UI for Angular Grid は、IgxColumnHidingDirective のある IgxColumnActionsComponent を提供し、ユーザーがユーザー インターフェイスを介して、または Angular コンポーネントを使用して列の非表示を実行できるようにします。Material UI Grid には組み込み列非表示 UI があり、これを Grid のツールバーから使用して列の表示状態を変更できます。更に別のコンポーネントとして列非表示 UI を定義してページの必要な場所に配置できます。

Angular Grid 列非表示の例

Grid の設定

Grid を作成してからデータをバインドします。列でフィルタリングとソートも有効にします。

<!--columnHiding.component.html-->

<igx-grid #grid id="grid" [data]="data" [autoGenerate]="false" width="100%" height="560px" columnWidth="200px" [allowFiltering]="true">
    <igx-column [field]="'ID'" dataType="string" [sortable]="true" [hidden]="true"></igx-column>
    <igx-column [field]="'ContactName'" dataType="string" [sortable]="true" [hidden]="true"></igx-column>
    <igx-column [field]="'ContactTitle'" dataType="string" [sortable]="true"></igx-column>
    <igx-column [field]="'City'" dataType="string" [sortable]="true"></igx-column>
    <igx-column [field]="'CompanyName'" dataType="string" [sortable]="true"></igx-column>
    <igx-column [field]="'Fax'" dataType="string" [sortable]="true"></igx-column>
    <igx-column [field]="'Address'" dataType="string" [sortable]="true"></igx-column>
    <igx-column [field]="'PostalCode'" dataType="string" [sortable]="true"></igx-column>
    <igx-column [field]="'Country'" dataType="string" [sortable]="true"></igx-column>
    <igx-column [field]="'Phone'" dataType="string" [sortable]="true"></igx-column>
</igx-grid>

ツールバーの列非表示 UI

定義済みの列非表示 UI は、Grid のツールバーの IgxDropDownComponent 内に配置されます。列非表示の UI をこのドロップダウンを使用して表示/非表示にできます。 これには、Grid の IgxGridToolbarActionsDirective および IgxGridToolbarHidingComponent の両方を設定することだけです。ツールバーにタイトルを追加するには、IgxGridToolbarTitleDirective を設定し、Grid のラッパーにカスタム スタイルを設定します。

<!--columnHiding.component.html-->

<div class="grid__wrapper">
    <igx-grid ...>
        <igx-grid-toolbar>
            <igx-grid-toolbar-title>Employees</igx-grid-toolbar-title>
            <igx-grid-toolbar-actions>
                <igx-grid-toolbar-hiding></igx-grid-toolbar-hiding>
            </igx-grid-toolbar-actions>
        </igx-grid-toolbar>
        ...
    </igx-grid>
</div>

/* columnHiding.component.css */

.grid__wrapper {
    margin: 10px;
}

Grid にはツールバーの列非表示 UI に便利なプロパティがあります。 igx-grid-toolbar-hiding title および hiddenColumnsText プロパティを使用して、ツールバーのドロップダウン ボタンに表示されるタイトルおよびテキストを設定します。hiddenColumnsText は列のカウント数の右に表示されます。カウントはデフォルトでボタンに含まれます。 hiddenColumnsText プロパティはローカライズにも使用できます。

<!--columnHiding.component.html-->

<div class="grid__wrapper">
    <igx-grid hiddenColumnsText="Hidden">
        <igx-grid-toolbar>
            <igx-grid-toolbar-title>Employees</igx-grid-toolbar-title>
            <igx-grid-toolbar-actions>
                <igx-grid-toolbar-hiding title="Column Hiding"></igx-grid-toolbar-hiding>
            </igx-grid-toolbar-actions>
        </igx-grid-toolbar>
    </igx-grid>
</div>

列非表示 UI の columnsAreaMaxHeight プロパティを使用すると、列を含む領域の最大の高さを設定できます。列が多すぎてコンテナーにすべて収まらない場合にスクロールバーが表示されるため、スクロールバーを使用して任意の列に移動できます。検索入力は上にピン固定されて、[すべて表示]/[すべて非表示] ボタンが下にピン固定されます。

// columnHiding.component.ts

public ngAfterViewInit() {        
    this.grid.toolbar.columnHidingUI.columnsAreaMaxHeight = "200px";
}

列非表示 UI の機能セットを使用するには、列非表示 UI コンポーネントへの参照を返すツールバーの columnHidingUI プロパティを使用します。相対する API にアクセスし、アプリケーションの要件に基づいて使用できます。

このトピックのはじめにあるコードの結果は、列非表示の例セクションで確認できます。

カスタム列の非表示 UI

IgxColumnActionsComponent を手動で定義し、IgxColumnHidingDirective を追加して、その目的がわかるようにして、ページの任意の場所に配置します。ただし、最初に、IgxColumnActionsModule をインポートする必要があります。

// app.module.ts

...
import {
    ...
    IgxColumnActionsModule 
} from 'igniteui-angular';

@NgModule({
    ...
    imports: [..., IgxColumnActionsModule],
})
export class AppModule {}

次に IgxColumnActionsComponent を作成します。アプリケーションでグリッドの隣に配置します。これはツールバーの列非表示 UI と異なります。ツールバーの場合、コンポーネントはドロップダウンに含まれます。コンポーネントの columns プロパティをグリッドの列に設定し、更にカスタム スタイルも追加します。

<!--columnHiding.component.html-->

<div class="columnHidingContainer">
    <igx-column-actions igxColumnHiding #columnHidingUI [columns]="grid.columns">
    </igx-column-actions>
</div>
<div class="gridContainer">
    <igx-grid #grid [data]="data" [autoGenerate]="false" width="100%" height="500px" columnWidth="200px">
        ...
    </igx-grid>
</div>

/* columnHiding.component.css */

.grid__wrapper {
    margin: 15px;
    display: flex;
    flex-direction: row;
}

.columnHidingContainer {
    min-width: 250px;
    height: 560px;
    display: flex;
    flex-direction: column;
    padding-left: 20px;
    padding-right: 20px;
    border: 1px gray;
    border-radius: 10px;
    box-shadow: 1px 1px 2px 2px rgba(50, 50, 50, 0.25);
    igx-column-actions {
        height: 460px;
    }
}

.columnsOrderOptionsContainer {
    margin-top: 20px;
    margin-bottom: 20px;
}

.gridContainer {
    width: 100%;
    min-width: 200px;
    display: flex;
    flex-direction: column;
    margin-left: 30px;    
}

タイトルおよびフィルター プロンプトの追加

列非表示コンポーネント機能を拡張するために title および filterColumnsPrompt プロパティを設定します。title は一番上に表示され、filterColumnsPrompt は列非表示 UI のフィルター入力に表示されるプロンプト テキストです。

<!--columnHiding.component.html-->

<div class="columnHidingContainer">
    <igx-column-actions igxColumnHiding #columnHidingUI [columns]="grid.columns"
                       title="Column Hiding" filterColumnsPrompt="Type here to search">
    </igx-column-actions>
</div>

列の表示順序オプションの追加

列非表示 UI で列の表示順序を選択する機能も追加します。このため、columnDisplayOrder プロパティを使用します。列挙型のプロパティで、以下のオプションがあります。

• Alphabetical (列をアルファベット順でソート)
• DisplayOrder (列をグリッドで表示される順序によってソート)

このオプションにラジオ ボタンを追加します。IgxRadio モジュールを追加します。

// app.module.ts

...
import {
    ...
    IgxRadioModule    
} from 'igniteui-angular';

@NgModule({
    ...
    imports: [..., IgxRadioModule],    
})
export class AppModule {}

両方のラジオ ボタンの checked プロパティを異なる条件に個々にバインドして、click イベントを処理します。

<!--columnHiding.component.html-->

<div class="columnHidingContainer">
    ...
    <div class="columnsOrderOptionsContainer">
        <igx-radio [checked]="columnHidingUI.columnDisplayOrder === 'Alphabetical'"
                   (click)="columnHidingUI.columnDisplayOrder = 'Alphabetical'">
            Alphabetical order
        </igx-radio>
        <igx-radio [checked]="columnHidingUI.columnDisplayOrder === 'DisplayOrder'"
                   (click)="columnHidingUI.columnDisplayOrder = 'DisplayOrder'">
            Display order
        </igx-radio>
    </div>
</div>

列の非表示の無効化

列の disableHiding プロパティを true に設定すると、ユーザーが列非表示 UI によって列を非表示にできません。

<!--columnHiding.component.html-->

<div class="gridContainer">
    <igx-grid ... >
        ...
        <igx-column [field]="'ContactName'" dataType="string" [sortable]="true" [disableHiding]="true"></igx-column>
        <igx-column [field]="'ContactTitle'" dataType="string" [sortable]="true" [disableHiding]="true"></igx-column>
        ...
    </igx-grid>
</div>

列非表示 UI コンポーネントは以下のようになります。

スタイル設定

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

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

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

最も簡単なアプローチを使用して、column-actions-theme を拡張し、$title-color および $background-color パラメーターを受け取る新しいテーマを作成します。

$custom-column-actions-theme: column-actions-theme(
    $background-color: steelblue,
    $title-color: gold
);

ご覧のように column-actions-theme は列操作コンテナーの色のみを制御しますが、ボタン、チェックボックス、内部の入力グループには影響しません。ボタンのスタイルも設定したい場合、新しいボタン テーマを作成します。

$custom-button: button-theme($flat-text-color: gold, $disabled-color: black);

この例では、フラットボタンのテキストの色とボタンの無効な色のみを変更しましたが、button-theme の方がより多くの方法を提供します。ボタンのスタイルを制御するパラメーター。

最後にそれぞれのテーマを持つコンポーネント ミックスインを含めることです。

@include column-actions($custom-column-actions-theme);
.igx-column-actions {
    @include button($custom-button);
}

Note

.igx-column-actions 内で igx-button ミックスインのスコープを設定し、列非表示ボタンのみがスタイル設定されるようにします。そうでない場合は、グリッド内の他のボタンも影響を受けます。

Note

コンポーネントが Emulated ViewEncapsulation を使用している場合、::ng-deep を使用してこのカプセル化を解除する必要があります。

:host {
    ::ng-deep {
        @include column-actions($custom-column-actions-theme);
        .igx-column-actions {
            @include button($custom-button);
        }
    }
}

カラーパレットの定義

上記のように色の値をハードコーディングする代わりに、igx-palette と igx-color 関数を使用することによって色に関してより高い柔軟性を持つことができます。

igx-palette は渡された一次色と二次色に基づいてカラーパレットを生成します。

$yellow-color: gold;
$blue-color: steelblue;

$custom-palette: palette($primary: $blue-color, $secondary: $yellow-color);

次に igx-color を使用してパレットから簡単に色を取得できます。

$custom-column-actions-theme: column-actions-theme(
    $palette: $custom-palette,
    $title-color: color($custom-palette, "secondary", 400),
    $background-color: color($custom-palette, "primary", 200)
);

$custom-button: button-theme(
    $palette: $custom-palette,
    $flat-text-color: color($custom-palette, "secondary", 400),
    $disabled-color: black
);

Note

Igx-color と igx-palette は色の生成や取得のための関数です。使い方の詳細については パレット のトピックをご覧ください。

スキーマの使用

テーマ エンジンを使用してスキーマの利点を活用でき、堅牢で柔軟な構造を構築できます。スキーマはテーマを使用する方法です。

// Extending the dark column actions schema
$custom-column-actions-schema: extend($_dark-column-actions,
    (
        title-color:(
           color: ("secondary", 400)
        ),
        background-color:(
           color: ("primary", 200)
        )
    )
);
// Extending the dark button schema
$custom-button-schema: extend($_dark-button,
    (           
        flat-text-color:(
           color:("secondary", 500)
        ),
        disabled-color:(
           color:("primary", 700)
        )
    )
);

カスタム スキーマを適用するには、グローバル (light または dark) の 1 つを拡張する必要があります。これは基本的にカスタム スキーマでコンポーネントをポイントし、その後それぞれのコンポーネントテーマに追加するものです。

// Extending the global dark-schema
$custom-dark-schema: extend($dark-schema,(
   column-actions: $custom-column-actions-schema,
   button: $custom-button-schema
));

// Defining column-actions-theme with the global dark schema
$custom-column-actions-theme: column-actions-theme(
  $palette: $custom-palette,
  $schema: $custom-dark-schema
);

// Defining button-theme with the global dark schema
$custom-button: button-theme(
  $palette: $custom-palette,
  $schema: $custom-dark-schema
);

上記と同じ方法でテーマを含める必要があることに注意してください。

デモ

API リファレンス

このトピックでは、Grid のツールバーの定義済みの列非表示 UI の使用方法や別のコンポーネントとして定義する方法について説明しました。その他の列順序から選択する機能を提供する UI を実装し、カスタム タイトルおよびフィルター プロンプト テキストを設定しました。IgxRadio ボタンなどその他の Ignite UI for Angular コンポーネントも使用しています。

以下は、列非表示 UI のその他の API です。

• IgxColumnActionsComponent
• IgxColumnActionsComponent スタイル

その他のコンポーネントおよびディレクティブ (またはそのいずれか) で使用した API:

IgxGridComponent プロパティ:

• hiddenColumnsCount
• hiddenColumnsText

IgxColumnComponent プロパティ:

• disableHiding

IgxGridToolbarComponent プロパティ:

• columnHidingUI
• columnHidingDropdown
• toolbarHiding

IgxGridToolbarComponent ディレクティブ:

• titleDirective
• actionsDirective

IgxGridToolbarComponent メソッド:

• toggleColumnHidingUI

IgxGridComponent イベント:

• columnVisibilityChanged

IgxRadioComponent

スタイル:

• IgxGridComponent スタイル
• IgxRadioComponent スタイル

その他のリソース

• Grid 概要
• 仮想化とパフォーマンス
• フィルタリング
• ページング
• 並び替え
• 集計
• 列のピン固定
• 列のサイズ変更
• 選択
• 検索

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

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