Grid の列の並べ替えと移動

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

const headerTemplate = (ctx: IgrCellTemplateContext) => {
    return (
    <>
       <IgrIcon draggable={false} onClick={onClick}></IgrIcon>
    </>
    );
}

React Grid 列移動概要の例

概要

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

<IgrGrid moving={true}></IgrGrid>

API

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

IgrGridBaseDirective.moveColumn - Moves a column before or after another column (a target). The first parameter is the column to be moved, and the second parameter is the target column. Also accepts an optional third parameter Position (representing a DropPosition value), which determines whether to place the column before or after the target column.

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

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

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

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

イベント

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

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

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

<IgrGrid autoGenerate={false} moving={true} data={data} onColumnMovingEnd={onColumnMovingEnd}>
    <IgrColumn field="Category"></IgrColumn>
    <IgrColumn field="Change On Year(%)" dataType="number"></IgrColumn>
</IgrGrid>

スタイル設定

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

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

<IgrGrid className="grid"></IgrGrid>

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

<IgrGrid class="grid"></IgrGrid>

デモ

API リファレンス

その他のリソース

• 仮想化とパフォーマンス
• ページング
• フィルタリング
• ソート
• 集計
• 列のピン固定
• 列のサイズ変更
• 選択
• 検索

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

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