Angular Grid 列サイズ変更

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

最速で機能豊富な Angular Data Grid は、ページング、ソート、フィルタリング、グループ化、PDF および Excel へのエクスポートなどの機能を提供します。究極のアプリ構築エクスペリエンスとデータ操作に必要なすべてが揃っています。

無料で試してみる

Angular Grid 列サイズ変更の例

EXAMPLE

MODULES

TS

HTML

SCSS

import { NgModule } from "@angular/core";
import { FormsModule } from "@angular/forms";
import { BrowserModule } from "@angular/platform-browser";
import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
import { AppComponent } from "./app.component";
import { IgxGridModule } from "igniteui-angular";
import { ResizingSampleComponent } from "./grid/grid-resizing-sample/grid-resizing-sample.component";
import { IgxPreventDocumentScrollModule } from "./directives/prevent-scroll.directive";



@NgModule({
  bootstrap: [AppComponent],
  declarations: [
	AppComponent,
	ResizingSampleComponent
],
  imports: [
	BrowserModule,
	BrowserAnimationsModule,
	FormsModule,
	IgxPreventDocumentScrollModule,
	IgxGridModule
],
  providers: [],
  entryComponents: [],
  schemas: []
})
export class AppModule {}
tsコピー

import { Component } from '@angular/core';
import { IgxColumnComponent } from 'igniteui-angular';
import { DATA } from '../../data/customers';

@Component({
    selector: 'app-grid-resizing-sample',
    styleUrls: ['./grid-resizing-sample.component.scss'],
    templateUrl: 'grid-resizing-sample.component.html'
})

export class ResizingSampleComponent {
    public data: any[];

    public col: IgxColumnComponent;
    public pWidth: string;
    public nWidth: string;

    constructor() {
        this.data = DATA;
    }

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

<div class="grid__wrapper">
    <igx-grid [igxPreventDocumentScroll]="true" [data]="data" (columnResized)="onResize($event)" [autoGenerate]="false" height="500px" width="100%">
        <igx-column [field]="'ID'" [header]="'ID'" [resizable]="true"></igx-column>
        <igx-column [field]="'CompanyName'" [header]="'Company Name'" [resizable]="true"></igx-column>
        <igx-column [field]="'ContactName'" [header]="'Contact Name'" [resizable]="true" [minWidth]="'60px'" [maxWidth]="'230px'"></igx-column>
        <igx-column [field]="'ContactTitle'" [header]="'Contact Title'" [resizable]="true"></igx-column>
        <igx-column [field]="'Address'" [header]="'Address'" [resizable]="true"></igx-column>
        <igx-column [field]="'City'" [header]="'City'" [resizable]="true"></igx-column>
        <igx-column [field]="'Region'" [header]="'Region'" [resizable]="true"></igx-column>
        <igx-column [field]="'PostalCode'" [header]="'Postal Code'" [resizable]="true"></igx-column>
        <igx-column [field]="'Phone'" [header]="'Phone'" [resizable]="true"></igx-column>
        <igx-column [field]="'Fax'" [header]="'Fax'" [resizable]="true"></igx-column>
    </igx-grid>
</div>
htmlコピー

.grid__wrapper {
    padding: 16px;
}
scssコピー

Edit in: CodesandboxStackBlitz

このサンプルが気に入りましたか? 完全な Ignite UI for Angularツールキットにアクセスして、すばやく独自のアプリの作成を開始します。無料でダウンロードできます。

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

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

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>
html

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

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

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

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

<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>
html

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

ピクセル

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

パーセンテージ

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

列のサイズ変更の制限

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

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

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

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

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

または

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

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

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

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

@ViewChild('grid') grid: IgxGridComponent;

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

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

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

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

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

EXAMPLE

MODULES

TS

HTML

SCSS

import { NgModule } from "@angular/core";
import { FormsModule } from "@angular/forms";
import { BrowserModule } from "@angular/platform-browser";
import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
import { AppComponent } from "./app.component";
import { IgxGridModule } from "igniteui-angular";
import { GridColumnAutosizingComponent } from "./grid/grid-column-autosizing/grid-column-autosizing.component";
import { IgxPreventDocumentScrollModule } from "./directives/prevent-scroll.directive";



@NgModule({
  bootstrap: [AppComponent],
  declarations: [
	AppComponent,
	GridColumnAutosizingComponent
],
  imports: [
	BrowserModule,
	BrowserAnimationsModule,
	FormsModule,
	IgxPreventDocumentScrollModule,
	IgxGridModule
],
  providers: [],
  entryComponents: [],
  schemas: []
})
export class AppModule {}
tsコピー

import { Component } from '@angular/core';
import { DATA } from '../../data/customers';

@Component({
    selector: 'grid-column-autosizing-sample',
    styleUrls: ['./grid-column-autosizing.component.scss'],
    templateUrl: 'grid-column-autosizing.component.html'
})

export class GridColumnAutosizingComponent {
    public data: any[];

    constructor() {
        this.data = DATA;
    }
}

tsコピー

<div class="grid__wrapper">
    <igx-grid [igxPreventDocumentScroll]="true" [data]="data" [autoGenerate]="false" height="500px" width="100%">
        <igx-column [field]="'ID'" [header]="'ID'" [resizable]="true" width="auto"></igx-column>
        <igx-column [field]="'CompanyName'" [header]="'Company Name'" width="auto" [resizable]="true"></igx-column>
        <igx-column [field]="'ContactName'" [header]="'Contact Name'" width="auto" [resizable]="true"
            [minWidth]="'60px'" [maxWidth]="'230px'"></igx-column>
        <igx-column [field]="'ContactTitle'" [header]="'Contact Title'" width="auto" [resizable]="true"></igx-column>
        <igx-column [field]="'Address'" [header]="'Address'" width="auto" [resizable]="true"></igx-column>
        <igx-column [field]="'City'" [header]="'City'" width="auto" [resizable]="true"></igx-column>
        <igx-column [field]="'Region'" [header]="'Region'" width="auto" [resizable]="true"></igx-column>
        <igx-column [field]="'PostalCode'" [header]="'Postal Code'" width="auto" [resizable]="true"></igx-column>
        <igx-column [field]="'Phone'" [header]="'Phone'" width="auto" [resizable]="true"></igx-column>
        <igx-column [field]="'Fax'" [header]="'Fax'" width="auto" [resizable]="true"></igx-column>
    </igx-grid>
</div>
htmlコピー

.grid__wrapper {
    padding: 16px;
}
scssコピー

Edit in: CodesandboxStackBlitz

スタイル設定

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

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

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

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

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

上記のようにカラーの値をハードコーディングする代わりに、palette および color 関数を使用してカラーに関してより高い柔軟性を実現することができます。使い方の詳細についてはパレットのトピックをご覧ください。

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

@include css-vars($custom-grid-theme);
scss

デモ

EXAMPLE

MODULES

TS

HTML

SCSS

import { NgModule } from "@angular/core";
import { FormsModule } from "@angular/forms";
import { BrowserModule } from "@angular/platform-browser";
import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
import { AppComponent } from "./app.component";
import { IgxGridModule } from "igniteui-angular";
import { GridResizeLineStylingSampleComponent } from "./grid/grid-resize-line-styling-sample/grid-resize-line-styling-sample";
import { IgxPreventDocumentScrollModule } from "./directives/prevent-scroll.directive";



@NgModule({
  bootstrap: [AppComponent],
  declarations: [
	AppComponent,
	GridResizeLineStylingSampleComponent
],
  imports: [
	BrowserModule,
	BrowserAnimationsModule,
	FormsModule,
	IgxPreventDocumentScrollModule,
	IgxGridModule
],
  providers: [],
  entryComponents: [],
  schemas: []
})
export class AppModule {}
tsコピー

    import { Component, OnInit } from '@angular/core';
import { athletesData } from '../../data/athletesData';

@Component({
    selector: 'app-grid-resize-line-styling-sample',
    styleUrls: ['./grid-resize-line-styling-sample.scss'],
    templateUrl: './grid-resize-line-styling-sample.html'
})

export class GridResizeLineStylingSampleComponent implements OnInit {
    public data: any[];
    public ngOnInit() {
        this.data = athletesData;
    }
}
tsコピー

<div class="grid__wrapper">
    <igx-grid [igxPreventDocumentScroll]="true" [data]="data" [autoGenerate]="false" height="510px" width="100%" displayDensity="cosy">
        <igx-column [field]="'Id'" [header]="'Rank'" [resizable]="true"></igx-column>
        <igx-column [field]="'Name'" [header]="'Athlete'" [resizable]="true"></igx-column>
        <igx-column [field]="'BeatsPerMinute'" [header]="'Beats per minute'" [resizable]="true"></igx-column>
        <igx-column [field]="'TopSpeed'" [header]="'Top Speed'" [resizable]="true"></igx-column>
        <igx-column [field]="'TrackProgress'" [header]="'Track Progress'" [resizable]="true"></igx-column>
    </igx-grid>
</div>
htmlコピー

@use '../../../variables' as *;

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

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

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

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

.grid__wrapper {
    padding: 16px;
}
scssコピー

Edit in: CodesandboxStackBlitz

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

API リファレンス

• IgxColumnComponent
• IgxGridComponent
• IgxGridComponent スタイル

その他のリソース

• Grid 概要
• 仮想化とパフォーマンス
• ページング
• フィルタリング
• ソート
• 集計
• 列移動
• 列のピン固定
• 選択

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

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