React グリッド列移動の概要
Ignite UI for React Data Grid は列を移動する機能をサポートしているので、表示されている列の順序に関して列の表示方法を柔軟に選択できます。
React グリッド列移動の例
Ignite UI for React Data Grid の列移動はデフォルトで有効になっているため、グリッドの columnMovingMode
プロパティを設定して制御できます。このプロパティには、Deferred または None の 2 つのオプションがあります。Deferred
は列の移動を許可しますが、None
はグリッド全体の列の移動を無効にします。
列の移動が Deferred
に設定されていると、列を移動している間、セパレーターが表示されます。列を移動しているときにマウス ポインタを離すと、移動した列は区切り記号の右側にある列の位置に移動します。このセパレータは、それぞれ columnMovingSeparatorWidth
プロパティと columnMovingSeparatorBackground
プロパティを使用して幅と色をカスタマイズすることもできます。
必要に応じて、列の動きをアニメートすることもできます。これは、グリッドの columnMovingAnimationMode
プロパティを設定することによって実行できます。アニメーションはデフォルトで編集できません。
コード スニペット
以下は、遅延列の移動、アニメーションの有効化、5 ピクセル幅のセパレーターを使用して Ignite UI for React Data Grid に列移動を実装する方法を示しています。
import { ColumnMovingAnimationMode } from 'igniteui-react-grids';
import { ColumnMovingMode } from 'igniteui-react-grids';
<IgrDataGrid
ref={this.onGridRef}
height="500px"
width="100%"
dataSource={this.data}
columnMovingMode={ColumnMovingMode.Deferred}
columnMovingAnimationMode={ColumnMovingAnimationMode.SlideOver}
columnMovingSeparatorWidth={5} />