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
上記のようにカラーの値をハードコーディングする代わりに、palette
および color
関数を使用してカラーに関してより高い柔軟性を実現することができます。使い方の詳細についてはパレット
のトピックをご覧ください。
最後のステップは、それぞれのテーマを持つコンポーネント ミックスインを含めることです。
@include css-vars($custom-grid-theme);
デモ
Note
このサンプルは、Change Theme
(テーマの変更) から選択したグローバル テーマに影響を受けません。