Grid の列の並べ替えと移動

Web Components Grid の Ignite UI for Web Components 列移動機能を使用すると、列をすばやく簡単に並べ替えることができます。これは、列移動 API を使用するか、マウスまたはタッチジェスチャを使用してヘッダーを別の位置にドラッグアンドドロップすることによって実行できます。Web Components Grid では、ピン固定された列とピン固定されていない列、および複数列ヘッダーに対しても列の移動を有効にすることができます。

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

[!Note] 列ヘッダーがテンプレート化され、対応する列がグループ化可能である場合、テンプレート化された要素は draggable 属性を false に設定する必要があります。

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

public headerTemplate = (ctx: IgcCellTemplateContext) => {
    return html`
        <igc-icon draggable="false" @click="${() => this.onClick()}"></igc-icon>
    `;
}

Web Components Grid 列移動概要の例

概要

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

<igc-grid moving="true"></igc-grid>

API

ドラッグアンドドロップ機能に加えて、列の移動機能には、プログラムで列を移動/並べ替えできる 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);

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

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

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

イベント

列のドラッグアンドドロップ操作を可能にする列移動に関連するイベントが複数あります。ColumnMovingStart、ColumnMoving、および ColumnMovingEnd です。

IgcGridComponent の ColumnMovingEnd イベントを処理し、列が新しい位置にドロップされたときにカスタムロジックを実装できます。たとえば、以下のスニペットでは、Change On Year(%) 列の後に Category のドロップをキャンセルできます。

<igc-grid id="dataGrid" auto-generate="false" moving="true">
    <igc-column field="Category"></igc-column>
    <igc-column field="Change On Year(%)" data-type="Number" ></igc-column>
</igc-grid>

constructor() {
    var dataGrid = this.dataGrid = document.getElementById('dataGrid') as IgcGridComponent;
    dataGrid.data = this.data;
    dataGrid.addEventListener("columnMovingEnd", this.onColumnMovingEnd);
}

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

スタイル設定

定義済みのテーマに加えて、利用可能な CSS プロパティのいくつかを設定することで、グリッドをさらにカスタマイズできます。

色を変更したい場合は、最初にグリッドのクラスを設定する必要があります:

<igc-grid class="grid"></igc-grid>

次に、関連する CSS プロパティをこのクラスに設定します:

.grid {
    --ig-grid-ghost-header-text-color: #f4d45c;
    --ig-grid-ghost-header-background: #ad9d9d;
    --ig-grid-ghost-header-icon-color: #f4d45c;
}

デモ

API リファレンス

その他のリソース

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