Web Components グリッド列移動の概要

Ignite UI for Web Components Data Grid は列を移動する機能をサポートしているので、表示されている列の順序に関して列の表示方法を柔軟に選択できます。

Web Components グリッド列移動の例

Edit on CodeSandbox

Ignite UI for Web Components Data Grid の列移動はデフォルトで有効になっているため、グリッドの columnMovingMode プロパティを設定して制御できます。このプロパティには、Deferred または None の 2 つのオプションがあります。Deferred は列の移動を許可しますが、None はグリッド全体の列の移動を無効にします。

列の移動が Deferred に設定されていると、列を移動している間、セパレーターが表示されます。列を移動しているときにマウス ポインタを離すと、移動した列は区切り記号の右側にある列の位置に移動します。このセパレータは、それぞれ columnMovingSeparatorWidth プロパティと columnMovingSeparatorBackground プロパティを使用して幅と色をカスタマイズすることもできます。

必要に応じて、列の動きをアニメートすることもできます。これは、グリッドの columnMovingAnimationMode プロパティを設定することによって実行できます。アニメーションはデフォルトで編集できません。

コード スニペット

以下は、遅延列の移動、アニメーションの有効化、5 ピクセル幅のセパレーターを使用して Ignite UI for Web Components Data グリッドに列移動を実装する方法を示しています。

import { ColumnMovingAnimationMode } from 'igniteui-webcomponents-grids';
import { ColumnMovingMode } from 'igniteui-webcomponents-grids';

<igc-data-grid id="grid"
    height="100%"
    width="100%"
    column-moving-mode="Deferred"
    column-moving-animation-mode="SlideOver"
    column-moving-separator-width="5">
</igc-data-grid>

let grid1 = (document.getElementById("grid") as IgcDataGridComponent);
grid1.dataSource = data;