列の並べ替え

onColumnsChange を渡すと、列ヘッダーにカーソルを載せたときに grip(⠿)が出て、掴んで左右へドラッグすると列の順番を入れ替えられます。並べ替えの結果は onColumnsChange に新しい列配列として返るため、消費側は columns を差し替えるだけです(controlled)。

デモ(商品一覧の列)

• 列ヘッダーにカーソルを載せ、右側の grip(⠿)を押して左右へドラッグします。デモは表示方式 columnDragMotion="live" で、掴んだ列がポインタに付いてきて、通る先の列がその場で退避します。左上の「表示方式」で既定の 'ghost'(挿入位置に縦線、離すと列が新しい位置へスライド)に切り替えられます。
• 「ID」は左固定です。左固定ペインへ運ぶとピン留め、固定ペインから中央へ運ぶと固定の解除になります。'live' でペインをまたぐと、列の複製(浮かぶ列)が付いてきて、見出しにピン(固定ペインへ)/ 移動の矢印(中央へ)のアイコンが出ます。

使い方

const [columns, setColumns] = useState(initialColumns);

<SpreadsheetGrid
  rows={rows}
  columns={columns}
  onColumnsChange={setColumns}   // これを渡すと grip が出て並べ替えられる
  columnDragMotion="live"        // 'ghost'(既定) | 'live'
/>

onColumnsChange に渡る配列は、固定列ごと(左固定 → 中央 → 右固定)の順に並べ直されます(画面上の列順と一致)。非表示列も配列に残ります。

表示方式(columnDragMotion)

• 'ghost'(既定): 列名のゴーストがポインタに付いてきて、挿入位置に縦線が出ます。離すと列が新しい位置へスライドします(従来の挙動)。グリッドの枠外で離すとキャンセルです。
• 'live': 掴んだ列(ヘッダー + 描画中のセル)そのものがポインタに付いてきて、通る先の列がその場で左右へ退避します。ドロップ先が「線」ではなく「隙間」として見えます。枠の外で離しても直前の位置へ確定します。
  • 固定ペインをまたいで運ぶ(ピン留め / 解除)ときは、本物の列はペインの外へ出せないため、列の複製(浮かぶ列)がポインタに付いてきます。元のペインは列が抜けた分だけ詰まり、移動先は縦線で示します。浮かぶ列の見出しには、固定ペインへ運ぶときはピン、中央へ運ぶときは移動の矢印のアイコンが付きます('ghost' のゴーストと同じ出し分け)。浮かぶ列は表の枠の内側に収まり、離すと新しい位置へ滑り込みます(Esc では元の位置へ戻ります)。同じペインへ戻ると、本物の列の追従に戻ります。
• motion="off"(または 'auto' で OS の「視差効果を減らす」が有効)のときは 'ghost' と同じ動きになります。

行の並べ替えにも同じ表示方式があります(rowDragMotion。行ドラッグ並び替えを参照)。

仕様の要点

• 有効条件 — onColumnsChange を渡したときだけ grip が出ます(未指定なら列範囲選択など従来どおりの挙動)。
• 対象外の列 — 自動グループ列 / 展開行トグル列 / 行ドラッグハンドル列は合成列のため grip が出ません。
• 固定ペインへのドロップ — 左固定 / 右固定のペインの上で離すと、その位置に並べたうえで固定します。固定列が 1 本もないときは、グリッドの左端 / 右端の細い帯(32px)が固定ペインへのドロップ先になります。
• キャンセル — Escape で何も変更せずに終わります('live' では元の位置へ戻ります)。ドラッグ中にウィンドウからフォーカスが外れた(別アプリへ切り替えた等)ときも同じく取り消します。同じ位置で離しても onColumnsChange は呼ばれません。
• 自動スクロール — 左右端に近づくと横スクロールし、画面外の位置へも運べます。端は固定ペインへのドロップ先も兼ねるため、目的の位置が見えたら少し内側へ戻してから離します。
• スタイル — 挿入位置の縦線は .ssg-col-drop-indicator、ゴーストは [data-grid-drag-ghost](classNames.dragGhost)、'live' で掴んだ列のセルは [data-ssg-col-dragging="live"] です。'live' でペインをまたぐときの浮かぶ列は .ssg-col-drag-float(表の枠と同じ矩形のクリップ層。中の複製は [data-ssg-col-dragging="live"] の見た目を引き継ぎます)、その見出しのアイコンは .ssg-col-drag-pin(色はゴーストと同じトークン --ssg-ghost-bg / --ssg-ghost-text)です。