Angular Grid 列ピン固定

単一または複数の列を Angular UI グリッドの左端にピン固定できます。Ignite UI for Angular の列固定は、ユーザーが特定の列順序で列をロックすることを可能にし、Grid で水平スクロール時にロックされた列が常に表示されます。Material UI Grid には組み込みの列ピン固定 UI があり、Grid のツールバーで列の表示状態を変更できます。その他、カスタム UI を定義し、Column Pinning API を介して列のピン固定状態を変更できます。

The fastest, feature-rich Angular Data Grid, offering paging, sorting, filtering, grouping, exporting to PDF and Excel, and more. Everything you need for the ultimate app building experience and data manipulation.

Try Now For Free

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 { PinningToolbarSampleComponent } from "./grid/grid-sample-pinning/grid-toolbar-pinning.component";
import { 
	IgxGridModule,
	IgxIconModule
 } from "igniteui-angular";
import { IgxPreventDocumentScrollModule } from "./directives/prevent-scroll.directive";



@NgModule({
  bootstrap: [AppComponent],
  declarations: [
	AppComponent,
	PinningToolbarSampleComponent
],
  imports: [
	BrowserModule,
	BrowserAnimationsModule,
	FormsModule,
	IgxPreventDocumentScrollModule,
	IgxGridModule,
	IgxIconModule
],
  providers: [],
  entryComponents: [],
  schemas: []
})
export class AppModule {}
tsCOPY CODE

import { Component, ViewChild, ViewEncapsulation, OnInit } from '@angular/core';
import { IgxColumnComponent, IgxGridComponent } from 'igniteui-angular';
import { DATA } from '../../data/customers';

@Component({
    encapsulation: ViewEncapsulation.None,
    providers: [],
    selector: 'app-grid-sample',
    styleUrls: ['grid-toolbar-pinning.component.scss'],
    templateUrl: 'grid-toolbar-pinning.component.html'

})

export class PinningToolbarSampleComponent implements OnInit{
    @ViewChild('grid1', { static: true }) public grid1: IgxGridComponent;

    public data: any[];
    public columns: any[];
    public ngOnInit(): void {
        this.columns = [
            { field: 'CompanyName', header: 'Company Name', width: 300 },
            { field: 'ContactName', header: 'Contact Name', width: 200, pinned: true },
            { field: 'ContactTitle', header: 'Contact Title', width: 200, pinned: true },
            { field: 'Address', header: 'Address', width: 300 },
            { field: 'City', header: 'City', width: 120 },
            { field: 'Region', header: 'Region', width: 120 },
            { field: 'PostalCode', header: 'Postal Code', width: 150 },
            { field: 'Phone', header: 'Phone', width: 150 },
            { field: 'Fax', header: 'Fax', width: 150 }
        ];
        this.data = DATA;
    }

    public toggleColumn(col: IgxColumnComponent) {
        col.pinned ? col.unpin() : col.pin();
    }
}
tsCOPY CODE

<div class="grid__wrapper" style='width: 100%;'>
    <igx-grid [igxPreventDocumentScroll]="true" #grid1 [data]="data" [width]="'100%'" [height]="'480px'">
        <igx-grid-toolbar>
            <igx-grid-toolbar-actions>
                <igx-grid-toolbar-pinning></igx-grid-toolbar-pinning>
            </igx-grid-toolbar-actions>
        </igx-grid-toolbar>

        <igx-column #col *ngFor="let c of columns" [field]="c.field" [header]="c.header" [width]="c.width" [pinned]='c.pinned'
            [hidden]='c.hidden' [headerClasses]="'customHeaderSyle'">
        </igx-column>
    </igx-grid>
</div>
htmlCOPY CODE

:host ::ng-deep .title {
    width: 100%;
}

.grid__wrapper {
    padding: 16px;
}
scssCOPY CODE

Edit in: CodesandboxStackBlitz

Like this sample? Get access to our complete Ignite UI for Angular toolkit and start building your own apps in minutes. Download it for free.

列固定 API

列ピン固定は、igx-column の pinned 入力によって制御されます。ピン固定列は常に Grid の左側に描画され、Grid 本体のピン固定されていない列の水平スクロールで固定されます。

<igx-grid #grid1 [data]="data | async" [width]="700px" [autoGenerate]="false" (columnInit)="initColumns($event)"
    (selected)="selectCell($event)">
    <igx-column [field]="Name" [pinned]="true"></igx-column>
    <igx-column [field]="AthleteNumber"></igx-column>
    <igx-column [field]="TrackProgress"></igx-column>
    <igx-paginator [perPage]="10">
    </igx-paginator>
</igx-grid>
html

IgxGridComponent の Grid の pinColumn または unpinColumn メソッドを使用してフィールド名によって列をピン固定またはピン固定解除できます。

this.grid.pinColumn('AthleteNumber');
this.grid.unpinColumn('Name');
typescript

両方のメソッドは操作に成功したかどうかを示すブール値を返します。よくある失敗の原因として列がすでにそのステートになっていることがあります。

列をピン固定すると、一番右に配置されたピン固定列の右にピン固定されます。ピン固定列の順序を変更するには、columnPin イベントでイベント引数の insertAtIndex プロパティを適切な位置インデックスに変更します。

<igx-grid #grid1 [data]="data | async" [autoGenerate]="true" (columnPin)="columnPinning($event)"></igx-grid>
html

public columnPinning(event) {
    if (event.column.field === 'Name') {
        event.insertAtIndex = 0;
    }
}
typescript

ピン固定の位置

pinning 設定オプションを使用して、列のピン固定の位置を変更できます。列の位置を Start または End のいずれかに設定できます。End に設定すると、列がピン固定されていない列の後に、グリッドの最後にレンダリングされます。 ピン固定されていない列は水平にスクロールできますが、ピン固定された列は右側に固定されます。

<igx-grid [data]="data" [autoGenerate]="true" [pinning]="pinningConfig"></igx-grid>
html

public pinningConfig: IPinningConfig = { columns: ColumnPinningPosition.End };
typescript

デモ

EXAMPLE

カスタム列ピン固定 UI

カスタム UI を定義し、関連する API を介して列のピン状態を変更できます。

ツールバーの代わりに、エンドユーザーが特定の列のピンの状態を変更するためにクリックできる列ヘッダーにピンアイコンを定義するとします。 これは、カスタムアイコンを使用して列のヘッダーテンプレートを作成することで実行できます。

<igx-grid #grid1 [data]="data" [width]="'100%'" [height]="'500px'">
    <igx-column #col *ngFor="let c of columns" [field]="c.field" [header]="c.header" [width]="c.width" [pinned]='c.pinned'
        [hidden]='c.hidden' [headerClasses]="'customHeaderSyle'">
        <ng-template igxHeader>
            <div class="title-inner">
                <span style="float:left">{{col.header}}</span>
                <igx-icon class="pin-icon" fontSet="fas" name="fa-thumbtack" (click)="toggleColumn(col)"></igx-icon>
            </div>
        </ng-template>
    </igx-column>
</igx-grid>
html

カスタムアイコンをクリックすると、関連する列のピン状態は、列の API メソッドを使用して変更できます。

public toggleColumn(col: ColumnType) {
    col.pinned ? col.unpin() : col.pin();
}
typescript

デモ

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 { PinningSampleComponent } from "./grid/grid-sample-pinning/grid-pinning.component";
import { 
	IgxGridModule,
	IgxIconModule
 } from "igniteui-angular";
import { IgxPreventDocumentScrollModule } from "./directives/prevent-scroll.directive";



@NgModule({
  bootstrap: [AppComponent],
  declarations: [
	AppComponent,
	PinningSampleComponent
],
  imports: [
	BrowserModule,
	BrowserAnimationsModule,
	FormsModule,
	IgxPreventDocumentScrollModule,
	IgxGridModule,
	IgxIconModule
],
  providers: [],
  entryComponents: [],
  schemas: []
})
export class AppModule {}
tsCOPY CODE

import { Component, ViewChild, ViewEncapsulation, OnInit , AfterViewInit} from '@angular/core';
import { IgxColumnComponent, IgxGridComponent, IgxIconService } from 'igniteui-angular';
import { icons } from '../../services/svgIcons';

import { DATA } from '../../data/customers';

const FILTERING_ICONS_FONT_SET = 'filtering-icons';
@Component({
    encapsulation: ViewEncapsulation.None,
    providers: [],
    selector: 'app-grid-sample',
    styleUrls: ['grid-pinning.component.scss'],
    templateUrl: 'grid-pinning.component.html'

})

export class PinningSampleComponent implements OnInit, AfterViewInit {
    @ViewChild('grid1', { static: true }) public grid1: IgxGridComponent;

    public data: any[];
    public columns: any[];

    constructor(private iconService: IgxIconService) {
    }

    public ngOnInit(): void {
        this.columns = [
            { field: 'ID', header: 'ID', width: 100, hidden: true },
            { field: 'CompanyName', header: 'Company Name', width: 300 },
            { field: 'ContactName', header: 'Contact Name', width: 200, pinned: true },
            { field: 'ContactTitle', header: 'Contact Title', width: 200, pinned: true },
            { field: 'Address', header: 'Address', width: 300 },
            { field: 'City', header: 'City', width: 120 },
            { field: 'Region', header: 'Region', width: 120 },
            { field: 'PostalCode', header: 'Postal Code', width: 150 },
            { field: 'Phone', header: 'Phone', width: 150 },
            { field: 'Fax', header: 'Fax', width: 150 }
        ];
        this.data = DATA;
    }

    public ngAfterViewInit() {
        const pinnedIcons = icons.filter(icon => icon.name === 'pin' || icon.name === 'unpin');
        pinnedIcons.forEach(icon => {
            if (!this.iconService.isSvgIconCached(icon.name, FILTERING_ICONS_FONT_SET)) {
                this.iconService.addSvgIconFromText(icon.name, icon.value, FILTERING_ICONS_FONT_SET);
            }
        });
    }

    public toggleColumn(col: IgxColumnComponent) {
        col.pinned ? col.unpin() : col.pin();
    }
}
tsCOPY CODE

<div class="grid__wrapper" style='width: 100%;'>
    <igx-grid [igxPreventDocumentScroll]="true" #grid1 [data]="data" [width]="'100%'" [height]="'480px'">
        <igx-column #col *ngFor="let c of columns" [field]="c.field" [header]="c.header" [width]="c.width"
            [pinned]='c.pinned' [hidden]='c.hidden' [headerClasses]="'customHeaderSyle'">
            <ng-template igxHeader>
                <div class="title-inner">
                    <span class="header-text">{{col.header}}</span>
                    <igx-icon class="pin-icon" [class.pinned]="col.pinned" [class.unpinned]="!col.pinned"
                        family="filtering-icons" name="{{col.pinned ? 'unpin' : 'pin'}}" (click)="toggleColumn(col)">
                    </igx-icon>
                </div>
            </ng-template>
        </igx-column>
    </igx-grid>
</div>htmlCOPY CODE

.grid__wrapper {
    margin: 0 auto;
    padding: 16px;
}

.title-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.header-text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pin-icon {
    margin-left: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
}

.pinned {
    color: #444;

    &:hover {
        color: #999;
    }
}

.unpinned {
    color: #999;

    &:hover {
        color: #444;
    }
}
scssCOPY CODE

Edit in: CodesandboxStackBlitz

ピン固定の制限

• 列幅をパーセンテージ (%) で設定した場合にピン固定列があると Grid 本体およびヘッダー コンテンツが正しく配置されません。列のピン固定を正しく設定するには、列幅をピクセル (px) に設定するか、Grid によって自動的に割り当てる必要があります。

スタイル設定

igxGridを使用すると、Ignite UI for Angular テーマ ライブラリ でスタイルを設定できます。grid-theme は、グリッドのすべての機能をカスタマイズできるさまざまなプロパティを公開します。

以下の手順では、グリッドのピン固定スタイルをカスタマイズする手順を実行しています。

グローバル テーマのインポート

グループ化機能のカスタマイズは、すべてのスタイリング機能とミックスインが配置されている index ファイルをインポートする必要があります。

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

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

カスタム テーマの定義

次に、grid-theme を拡張し、必要に応じて Group By をカスタマイズするために必要なパラメーターを受け入れる新しいテーマを作成します。

$custom-theme: grid-theme(
  $pinned-border-width: 5px,
  $pinned-border-style: double,
  $pinned-border-color: #ffcd0f,
  $cell-active-border-color: #ffcd0f
);
scss

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

カスタム テーマの適用

テーマを適用する最も簡単な方法は、グローバル スタイル ファイルに sass @include ステートメントを使用することです。

@include css-vars($custom-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 { PinningStylingComponent } from "./grid/grid-sample-pinning-styling/grid-pinning-styling.component";
import { 
	IgxGridModule,
	IgxIconModule
 } from "igniteui-angular";
import { IgxPreventDocumentScrollModule } from "./directives/prevent-scroll.directive";



@NgModule({
  bootstrap: [AppComponent],
  declarations: [
	AppComponent,
	PinningStylingComponent
],
  imports: [
	BrowserModule,
	BrowserAnimationsModule,
	FormsModule,
	IgxPreventDocumentScrollModule,
	IgxGridModule,
	IgxIconModule
],
  providers: [],
  entryComponents: [],
  schemas: []
})
export class AppModule {}
tsCOPY CODE

import { Component, ViewChild, ViewEncapsulation, OnInit } from '@angular/core';
import { IgxColumnComponent, IgxGridComponent } from 'igniteui-angular';
import { DATA } from '../../data/customers';

@Component({
    encapsulation: ViewEncapsulation.None,
    providers: [],
    selector: 'app-grid-sample',
    styleUrls: ['grid-pinning-styling.component.scss'],
    templateUrl: 'grid-pinning-styling.component.html'

})

export class PinningStylingComponent implements OnInit{
    @ViewChild('grid1', { static: true }) public grid1: IgxGridComponent;

    public data: any[];
    public columns: any[];
    public ngOnInit(): void {
        this.columns = [
            { field: 'ID', header: 'ID', width: 100, hidden: true },
            { field: 'CompanyName', header: 'Company Name', width: 300 },
            { field: 'ContactName', header: 'Contact Name', width: 200, pinned: true },
            { field: 'ContactTitle', header: 'Contact Title', width: 200, pinned: true },
            { field: 'Address', header: 'Address', width: 300 },
            { field: 'City', header: 'City', width: 120 },
            { field: 'Region', header: 'Region', width: 120 },
            { field: 'PostalCode', header: 'Postal Code', width: 150 },
            { field: 'Phone', header: 'Phone', width: 150 },
            { field: 'Fax', header: 'Fax', width: 150 }
        ];
        this.data = DATA;
    }

    public toggleColumn(col: IgxColumnComponent) {
        col.pinned ? col.unpin() : col.pin();
    }
}
tsCOPY CODE

<div class="grid__wrapper" style='width: 100%;'>
    <igx-grid [igxPreventDocumentScroll]="true" #grid1 [data]="data" [width]="'100%'" [height]="'480px'">
        <igx-column #col *ngFor="let c of columns" [field]="c.field" [header]="c.header" [width]="c.width" [pinned]='c.pinned'
            [hidden]='c.hidden' [headerClasses]="'customHeaderSyle'">
            <ng-template igxHeader>
                <div class="title-inner">
                    <span style="float:left">{{col.header}}</span>
                    <igx-icon class="pin-icon" family="fas" name="fa-thumbtack" (click)="toggleColumn(col)"></igx-icon>
                </div>
            </ng-template>
        </igx-column>
    </igx-grid>
</div>
htmlCOPY CODE

@use '../../../variables' as *;
@import url("https://unpkg.com/@fortawesome/fontawesome-free-webfonts@^1.0.9/css/fontawesome.css");
@import url("https://unpkg.com/@fortawesome/fontawesome-free-webfonts@^1.0.9/css/fa-regular.css");
@import url("https://unpkg.com/@fortawesome/fontawesome-free-webfonts@^1.0.9/css/fa-solid.css");

$custom-theme: grid-theme(
    $pinned-border-width: 5px,
    $pinned-border-style: double,
    $pinned-border-color: #FFCD0F,
    $cell-active-border-color: #FFCD0F
);

:host {
	@include css-vars($custom-theme);
}

.header-icon {
    font-size: 1.1em;
    width: 1.1em;
    height: 1.1em;
    float: right;
    cursor: pointer;
}

.header {
    height: 100%;
}

:host ::ng-deep .title {
    width: 100%;
}

.pin-icon {
    margin-left: 8px;
    font-size: 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    color: #999;

    &:hover {
        color: #444
    }
}

.igx-grid__th--pinned  {
    .pin-icon {
        color: #444;

        &:hover {
            color: #999
        }
    }
}

.title-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.grid__wrapper {
    margin: 0 auto;
    padding: 16px;
}
scssCOPY CODE

Edit in: CodesandboxStackBlitz

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

API リファレンス

• IgxGridComponent
• IgxColumnComponent

その他のリソース

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

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

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