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 です。
その他のコンポーネントおよびディレクティブ (またはそのいずれか) で使用した API:
IgxGridComponent
プロパティ:
IgxColumnComponent
プロパティ:
IgxGridToolbarComponent
プロパティ:
IgxGridToolbarComponent
ディレクティブ:
IgxGridToolbarComponent
メソッド:
IgxGridComponent
イベント:
スタイル: