Angular Grid 列サイズ変更

グリッド列のサイズ変更遅延では、Angular ドラッグ操作の実行中にサイズ変更インジケーターが一時的に表示されます。ドラッグ操作が完了すると、新しいグリッド列幅が適用されます。

Angular Grid 列サイズ変更の例

列サイズ変更も列レベルで有効化にできます。つまり、igx-grid にサイズ変更可能な列とサイズ変更不可の列の両方を含むことが可能です。igx-column の resizable 入力で行うことができます。

<igx-column [field]="'ID'" width="100px" [resizable]="true"></igx-column>

igx-grid の columnResized イベントにサブスクライブして列がサイズ変更されたにカスタムロジックを実装します。以前の列幅、新しい列幅、および IgxColumnComponent オブジェクトがイベント引数で公開されます。

<igx-grid [data]="data" (columnResized)="onResize($event)" [autoGenerate]="false">
    <igx-column [field]="'ID'" width="100px" [resizable]="true"></igx-column>
    <igx-column [field]="'CompanyName'" width="100px" [resizable]="true"></igx-column>
</igx-grid>

public onResize(event) {
    this.col = event.column;
    this.pWidth = event.prevWidth;
    this.nWidth = event.newWidth;
}

ピクセル/パーセンテージで列のサイズを変更する

ユーザーのシナリオに応じて、列の幅はピクセル、パーセンテージ、または両方の組み合わせで定義できます。これらのシナリオはすべて、列のサイズ変更機能でサポートされています。デフォルトでは、列に幅が設定されていない場合、ピクセルで設定された幅の使用可能なスペースに収まります。

つまり、次の構成が可能です。

<igx-grid [data]="data" (columnResized)="onResize($event)" [autoGenerate]="false">
    <igx-column [field]="'ID'" width="10%" [resizable]="true"></igx-column>
    <igx-column [field]="'CompanyName'" width="100px" [resizable]="true"></igx-column>
    <igx-column [field]="'ContactTitle'" [resizable]="true"></igx-column>
</igx-grid>

Note

ピクセルとパーセンテージで設定された場合で列のサイズ変更の動作は少々異なります。

ピクセル

幅がピクセルで設定された列のサイズ変更は、マウスの水平移動量を列のサイズに直接足したり引いたりして行なわれます。

パーセンテージ

幅がパーセンテージで設定された列のサイズを変更する場合、ピクセル単位のマウスの水平移動量は、ほぼグリッド幅に対するパーセンテージの量に変換されます。列はレスポンシブな状態のまま、その後のグリッドのサイズ変更は列にも反映されます。

列のサイズ変更の制限

列の最小幅および最大幅の構成も可能です。igx-column の minWidth と maxWidth 入力で行うことができます。この場合、サイズ変更インジケーターのドラッグ操作が制限されます。列が minWidth および maxWidth. によって定義される範囲以外にサイズ変更できないことをユーザーに通知します。

<igx-column [field]="'ID'" width="100px" [resizable]="true"
            [minWidth]="'60px'" [maxWidth]="'230px'"></igx-column>

列幅の最小値と最大値のタイプ (ピクセルまたはパーセンテージ) を混在させることができます。最小値と最大値がパーセンテージに設定されている場合、それぞれの列サイズはピクセルと同様の正確なサイズに制限されます。

つまり、次の構成が可能です。

<igx-column [field]="'ID'" width="10%" [resizable]="true"
            [minWidth]="'60px'" [maxWidth]="'230px'"></igx-column>

または

<igx-column [field]="'ID'" width="100px" [resizable]="true"
            [minWidth]="'5%'" [maxWidth]="'15%'"></igx-column>

ダブルクリックで列の自動サイズ調整

各列ヘッダーの右側をダブルクリックして列を自動サイズ調整することができます。列は、現在表示されているヘッダーを含む一番長いセル値にサイズ設定されます。この動作はデフォルトで有効なため、追加で構成する必要はありません。ただし、maxWidth がその列に設定された際に新しい幅が maxWidth 値より大きい場合、列は自動サイズ調整されません。この場合、列が maxWidth 値に設定されます。

公開した IgxColumnComponent の autosize() を使用して列を動的に自動サイズ調整することも可能です。

@ViewChild('grid') grid: IgxGridComponent;

let column = this.grid.columnList.filter(c => c.field === 'ID')[0];
column.autosize();

初期化時に列を自動サイズ設定する

width を「auto」に設定することで、初期化時に各列を自動サイズに設定できます。

<igx-column width='auto'>...

列がビューで最初に初期化されるとき、その幅は、表示されている最も長いセルまたはヘッダーのサイズに調整されます。表示されている行の外側にあるセルは含まれないことに注意してください。このアプローチは、初期化後の自動サイズ変更よりもパフォーマンスが最適化されており、特に多数の列のサイズを自動サイズ設定する必要がある場合に推奨されます。

スタイル設定

Grid 列のサイズ変更行のスタイル設定は、すべてのテーマ関数とコンポーネントミックスインが存在するインデックスファイルをインポートする必要があります。

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

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

最も簡単な方法は、grid-theme を拡張し、$resize-line-color パラメーター以外にも多くのパラメータを受け入れます。

$custom-grid-theme: grid-theme(
    $resize-line-color: #0288D1
);

Note

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

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

カラーパレットの定義

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

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

$primary-color: #0288D1;
$secondary-color: #BDBDBD;

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

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

$custom-grid-theme: grid-theme(
    $palette: $custom-theme-palette,
    $resize-line-color: color($custom-theme-palette, 'secondary', 500)
);

Note

igx-color と igx-palette は色を生成したり取り出したりするための関数です。使い方の詳細については パレット のトピックを参照してください。

スキーマの使用

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

すべてのコンポーネントに提供されている定義済みスキーマ、ここでは light-grid スキーマを拡張します。

// Extending the light grid schema
$light-grid-schema: extend($_light-grid,
    (
        resize-line-color: (
           color: ('secondary', 500)
            ),
        header-background: (
           color: ("primary", 100)
            ),
        header-text-color: (
           color: ("primary", 600)
            )
    )
);

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

// Extending the global light-schema
$custom-light-grid-schema: extend($light-schema,(
   grid: $light-grid-schema
));

// Specifying the palette and schema of the custom grid theme
$custom-grid-theme: grid-theme(
    $palette: $custom-theme-palette,
    $schema: $custom-light-grid-schema
);

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

デモ

Note

このサンプルは、「テーマの変更」から選択したグローバルテーマに影響を受けません。

API リファレンス

その他のリソース

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

Angular Grid 列サイズ変更