Components List

Grid の列の並べ替えと移動

Ignite UI for Angular の Grid のコンポーネントは、標準ドラッグ/ドロップのマウス/タッチによるジェスチャ、または列移動 API を使用した順序変更のための列移動機能を提供します。列の移動は、固定列と固定されていない列、および複数列ヘッダーの両方で機能します。列を固定領域に移動すると列が固定され、または逆に固定領域の外に列を移動すると、列の固定が解除されます。

列と列グループ間の順序変更は、それらが階層の同じレベルにあり、両方が同じグループにある場合にのみ許可されます。列/列グループが最上位の列である場合、列/列グループ間を移動できます。

列ヘッダーがテンプレート化され、対応する列が移動可能 (またはグループ化可能) である場合、テンプレート化された要素は draggable 属性を false に設定する必要があります。これにより、要素によって発行されたすべてのイベントのハンドラーをアタッチできます。それ以外の場合、イベントは igxDrag ディレクティブによって消費されます。

ピン固定領域が最大幅 (Grid 幅合計の 80%) を超えた場合、ドロップ操作が禁止されていてピン固定ができないことをヒントの表示でエンドユーザーに通知します。つまり、ピン固定領域に列をドロップできません。

<ng-template igxHeader>
    <igx-icon [attr.draggable]="false" (click)="onClick()"></igx-icon>
</ng-template>
html

Angular Grid 列移動の例

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



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

import { Component, ViewChild } from '@angular/core';
import { ColumnType, IgxGridComponent } from 'igniteui-angular';
import { DATA } from '../../data/financialData';

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

export class GridMovingSampleComponent {
    @ViewChild('dataGrid', { static: true }) public grid: IgxGridComponent;
    public data: any[];

    constructor() {
        this.data = DATA;
    }

    public formatNumber(value: number) {
        return value.toFixed(2);
    }

    public formatCurrency(value: number) {
        return '$' + value.toFixed(2);
    }

    public toggleColumnPinning(column: ColumnType) {
        column.pinned ? column.unpin() : column.pin();
    }
}
ts

<ng-template igxHeader let-column #pinTemplate>
    <div class="title-inner">
        <span style="float:left">{{column.field}}</span>
        <igx-icon class="pin-icon" family="fas" name="fa-thumbtack" [attr.draggable]="false" (click)="toggleColumnPinning(column)"></igx-icon>
    </div>
</ng-template>
<div class="grid__wrapper">
    <igx-grid [igxPreventDocumentScroll]="true" #dataGrid [data]="data" [moving]="true" [autoGenerate]="false" height="620px" width="100%">
        <igx-paginator [perPage]="10"></igx-paginator>
        <igx-column [field]="'Category'" [width]="'200px'" [pinned]="true" [headerTemplate]="pinTemplate"></igx-column>
        <igx-column [field]="'Type'"  [pinned]="true" [headerTemplate]="pinTemplate"></igx-column>
        <igx-column [field]="'Price'" dataType="number" [formatter]="formatCurrency" [headerTemplate]="pinTemplate"></igx-column>
        <igx-column [field]="'Buy'" dataType="number" [formatter]="formatCurrency" [headerTemplate]="pinTemplate"></igx-column>
        <igx-column [field]="'Sell'" dataType="number" [formatter]="formatCurrency" [headerTemplate]="pinTemplate"></igx-column>
        <igx-column [field]="'Spread'" dataType="number" [headerTemplate]="pinTemplate"></igx-column>
        <igx-column [field]="'Change'" dataType="number" [headerTemplate]="pinTemplate">
            <ng-template igxCell let-val>
                <div class="currency-badge-container">
                    <igx-badge *ngIf="val>0" type="success" position="bottom-right" icon="arrow_upward" class="badge-left"></igx-badge>
                    <igx-badge *ngIf="val<0" type="error" position="bottom-right" icon="arrow_downward" class="error badge-left"></igx-badge>
                    <span class="cellAlignSyle" [class.up]="val>0" [class.down]="val<0">{{ formatNumber(val) }}</span>
                </div>
            </ng-template>
        </igx-column>
        <igx-column [field]="'Change(%)'" [width]="'150px'" dataType="number"  [formatter]="formatNumber" [headerTemplate]="pinTemplate">
            <ng-template igxCell let-val>
                <span class="cellAlignSyle" [class.up]="val>0" [class.down]="val<0">{{ formatNumber(val) }}%</span>
            </ng-template>
        </igx-column>
        <igx-column [field]="'Change On Year(%)'" [width]="'170px'" dataType="number"  [formatter]="formatNumber" [headerTemplate]="pinTemplate">
            <ng-template igxCell let-val>
                <div class="currency-badge-container">
                    <igx-badge *ngIf="val>0" type="success" position="bottom-right" icon="arrow_upward" class="badge-left"></igx-badge>
                    <igx-badge *ngIf="val<0" type="error" position="bottom-right" icon="arrow_downward" class="error badge-left"></igx-badge>
                    <span class="cellAlignSyle" [class.up]="val>0" [class.down]="val<0">{{ formatNumber(val) }}%</span>
                </div>
            </ng-template>
        </igx-column>
    </igx-grid>
</div>
html

@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");

.cellAlignSyle {
    text-align: right;
    float:right;
}
.cellAlignSyle > span {
    float:right;
}
.up {
    color: green;
}
.down {
    color: red;
}
.grid__wrapper {
  padding: 16px;
}

.currency-badge-container {
    width: 80px; 
    float: right;
}

.badge-left {
    float: left;
}

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

    &:hover {
        color: #444
    }
}

:host{
    ::ng-deep{
        .igx-grid__th--pinned  {
            .pin-icon {
                color: #444;
        
                &:hover {
                    color: #999
                }
            }
        }
    }
}

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

scss

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

概要

列移動は各列レベルで有効にできます。つまり、igx-grid に移動可能な列と移動不可の列の両方を含むことができます。moving の igx-grid 入力によって制御されます。

<igx-grid [moving]="true"></igx-grid>
html

API

ドラッグアンドドロップ機能に加えて、列の移動機能には、プログラムで列を移動/並べ替えできる 2 つの API メソッドも用意されています。

moveColumn - 列を別の列 (ターゲット) の前または後に移動します。最初のパラメーターは移動する列で、2 番目のパラメーターはターゲット列です。オプションの 3 番目のパラメーター position (DropPosition 値を表す) でターゲット列の前または後に列を配置するかどうかを決定します。

// Move the ID column after the Name column
const idColumn = grid.getColumnByName("ID");
const nameColumn = grid.getColumnByName("Name");

grid.moveColumn(idColumn, nameColumn, DropPosition.AfterDropTarget);
typescript

move - 列を指定された表示インデックスに移動します。渡されたインデックスパラメーターが無効である場合 (負である/列数を超える場合)、または列がこのインデックスに移動できない場合 (別のグループ内にある場合)、操作は実行されません。

// Move the ID column at 3rd position.
const idColumn = grid.getColumnByName("ID");
idColumn.move(3);
typescript

API を使用する時、操作が成功した場合、columnMovingEnd イベントのみが発行されることに注意してください。また、ドラッグアンドドロップ機能と比較して、API を使用するために moving プロパティを true に設定する必要がないことにも注意してください。

イベント

列のドラッグアンドドロップ操作をカスタマイズするための列移動に関連するイベントが複数あります。columnMovingStart、columnMoving、columnMovingEnd があります。 igx-grid の columnMovingEnd イベントを処理し、列が新しい位置にドロップされたときにカスタムロジックを実装できます。たとえば、Change On Year(%) 列の後に Category のドロップをキャンセルできます。

<igx-grid #dataGrid [data]="data" [autoGenerate]="false" [moving]="true" (columnMovingEnd)="onColumnMovingEnd($event)">
    <igx-column [field]="'Category'"></igx-column>
    <igx-column [field]="'Change On Year(%)'" [dataType]="'number'" ></igx-column>
</igx-grid>
html

public onColumnMovingEnd(event) {
    if (event.source.field === "Category" && event.target.field === "Change On Year(%)") {
        event.cancel = true;
    }
}
typescript

スタイル設定

Grid 列移動ヘッダーのスタイル設定は、すべてのテーマ関数とコンポーネントミックスインが存在する index ファイルをインポートする必要があります。

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

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

最も簡単な方法は、grid-theme を拡張して $ghost-header-background、$ghost-header-text-color、$ghost-header-icon-color パラメーターを受け入れる新しいテーマを作成します。

// Define dark theme for the column moving
$dark-grid-column-moving-theme: grid-theme(
  $ghost-header-text-color: #f4d45c,
  $ghost-header-background: #575757,
  $ghost-header-icon-color: #f4bb5c
);
scss

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

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

@include css-vars($dark-grid-column-moving-theme);
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 { GridMovingStyledSampleComponent } from "./grid/grid-moving-styled-sample/grid-moving-styled-sample.component";
import { 
	IgxGridModule,
	IgxBadgeModule,
	IgxIconModule
 } from "igniteui-angular";
import { IgxPreventDocumentScrollModule } from "./directives/prevent-scroll.directive";



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

import { Component, ViewChild } from '@angular/core';
import { ColumnType, IgxGridComponent } from 'igniteui-angular';
import { DATA } from '../../data/financialData';

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

export class GridMovingStyledSampleComponent {
    @ViewChild('dataGrid', { static: true }) public grid: IgxGridComponent;
    public data: any[];

    constructor() {
        this.data = DATA;
    }

    public formatNumber(value: number) {
        return value.toFixed(2);
    }

    public formatCurrency(value: number) {
        return '$' + value.toFixed(2);
    }

    public toggleColumnPinning(column: ColumnType) {
        column.pinned ? column.unpin() : column.pin();
    }
}
ts

<ng-template igxHeader let-column #pinTemplate>
    <div class="title-inner">
        <span style="float:left">{{column.field}}</span>
        <igx-icon class="pin-icon" family="fas" name="fa-thumbtack" [attr.draggable]="false" (click)="toggleColumnPinning(column)"></igx-icon>
    </div>
</ng-template>
<div class="grid__wrapper">
    <igx-grid [igxPreventDocumentScroll]="true" #dataGrid [data]="data" [moving]="true" [autoGenerate]="false" height="620px" width="100%">
        <igx-paginator [perPage]="10"></igx-paginator>
        <igx-column [field]="'Category'" [width]="'200px'" [pinned]="true" [headerTemplate]="pinTemplate"></igx-column>
        <igx-column [field]="'Type'" [pinned]="true" [headerTemplate]="pinTemplate"></igx-column>
        <igx-column [field]="'Price'" [dataType]="'number'" [formatter]="formatCurrency" [headerTemplate]="pinTemplate"></igx-column>
        <igx-column [field]="'Buy'" [dataType]="'number'" [formatter]="formatCurrency" [headerTemplate]="pinTemplate"></igx-column>
        <igx-column [field]="'Sell'" [dataType]="'number'" [formatter]="formatCurrency" [headerTemplate]="pinTemplate"></igx-column>
        <igx-column [field]="'Spread'" [dataType]="'number'" [headerTemplate]="pinTemplate"></igx-column>
        <igx-column [field]="'Change'" [dataType]="'number'" [headerTemplate]="pinTemplate">
            <ng-template igxCell let-val>
                <div class="currency-badge-container">
                    <igx-badge *ngIf="val>0" type="success" position="bottom-right" icon="arrow_upward" class="badge-left"></igx-badge>
                    <igx-badge *ngIf="val<0" type="error" position="bottom-right" icon="arrow_downward" class="error badge-left"></igx-badge>
                    <span class="cellAlignSyle" [class.up]="val>0" [class.down]="val<0">{{ formatNumber(val) }}</span>
                </div>
            </ng-template>
        </igx-column>
        <igx-column [field]="'Change(%)'" [width]="'150px'" [dataType]="'number'" [formatter]="formatNumber" [headerTemplate]="pinTemplate">
            <ng-template igxCell let-val>
                <span class="cellAlignSyle" [class.up]="val>0" [class.down]="val<0">{{ formatNumber(val) }}%</span>
            </ng-template>
        </igx-column>
        <igx-column [field]="'Change On Year(%)'" [width]="'170px'" [dataType]="'number'" [formatter]="formatNumber" [headerTemplate]="pinTemplate">
            <ng-template igxCell let-val>
                <div class="currency-badge-container">
                    <igx-badge *ngIf="val>0" type="success" position="bottom-right" icon="arrow_upward" class="badge-left"></igx-badge>
                    <igx-badge *ngIf="val<0" type="error" position="bottom-right" icon="arrow_downward" class="error badge-left"></igx-badge>
                    <span class="cellAlignSyle" [class.up]="val>0" [class.down]="val<0">{{ formatNumber(val) }}%</span>
                </div>
            </ng-template>
        </igx-column>
    </igx-grid>
</div>
html

@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");

$yellow-color: #F4D45C;
$black-color: #575757;

$dark-palette: palette($primary: $yellow-color, $secondary: $black-color, $surface: #222);
$dark-grid-column-moving-theme: grid-theme(
    $ghost-header-text-color: color($dark-palette, "primary", 400),
    $ghost-header-background: color($dark-palette, "secondary", 200),
    $ghost-header-icon-color:  color($dark-palette, "primary", 500)
);

:host {
    @include palette($dark-palette);
    ::ng-deep{
        .igx-grid__th--pinned  {
            .pin-icon {
                color: #444;

                &:hover {
                    color: #999
                }
            }
        }

        .grid__wrapper {
            padding: 16px;
            @include css-vars($dark-grid-column-moving-theme);
          }
    }
}

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

.cellAlignSyle {
    text-align: right;
    float:right;
}

.cellAlignSyle > span {
    float:right;
}

.up {
    color: green;
}

.down {
    color: red;
}

.currency-badge-container {
    width: 80px;
    float: right;
}

.badge-left {
    float: left;
}

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

    &:hover {
        color: #444
    }
}
scss

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

API リファレンス

その他のリソース

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