Reactで、表の列の幅をドラッグで変える方法

import { useRef, useState } from 'react';
import type { KeyboardEvent, PointerEvent } from 'react';

export type Column<T> = {
  key: keyof T & string;
  label: string;
  width: number; // 最初の幅（px）
};

const MIN_WIDTH = 60;
const MAX_WIDTH = 600;
const KEY_STEP = 10;

function clamp(n: number, lo: number, hi: number) {
  return Math.min(hi, Math.max(lo, n));
}

type Drag = {
  key: string;
  pointerId: number;
  startX: number; // 押したときのポインターの x 座標
  startWidth: number; // 押したときの列の幅
};

type Props<T> = {
  columns: Column<T>[];
  rows: T[];
  getRowKey: (row: T) => string;
};

export function ResizableTable<T>({ columns, rows, getRowKey }: Props<T>) {
  const [widths, setWidths] = useState<Record<string, number>>(() =>
    Object.fromEntries(columns.map((c) => [c.key, c.width])),
  );
  const drag = useRef<Drag | null>(null);
  const tableRef = useRef<HTMLTableElement>(null);

  function setWidth(key: string, width: number) {
    setWidths((prev) => ({ ...prev, [key]: clamp(Math.round(width), MIN_WIDTH, MAX_WIDTH) }));
  }

  function handlePointerDown(e: PointerEvent<HTMLDivElement>, key: string) {
    if (e.pointerType === 'mouse' && e.button !== 0) return;
    e.preventDefault(); // ドラッグ中に文字が選ばれないようにする
    // 取っ手の外へ出ても、離すまで取っ手にイベントが届くようにする
    e.currentTarget.setPointerCapture(e.pointerId);
    drag.current = { key, pointerId: e.pointerId, startX: e.clientX, startWidth: widths[key] };
  }

  function handlePointerMove(e: PointerEvent<HTMLDivElement>) {
    const d = drag.current;
    if (!d || d.pointerId !== e.pointerId) return;
    setWidth(d.key, d.startWidth + (e.clientX - d.startX));
  }

  function handlePointerEnd(e: PointerEvent<HTMLDivElement>) {
    if (drag.current?.pointerId === e.pointerId) drag.current = null;
  }

  // ダブルクリックで、その列のいちばん長い中身が収まる幅にする
  function fitToContent(key: string) {
    const cells = tableRef.current?.querySelectorAll<HTMLElement>(`[data-col="${key}"]`) ?? [];
    let max = 0;
    for (const cell of cells) {
      const text = cell.querySelector<HTMLElement>('.cell-text');
      if (!text) continue;
      const style = getComputedStyle(cell);
      const padding = parseFloat(style.paddingLeft) + parseFloat(style.paddingRight);
      max = Math.max(max, text.getBoundingClientRect().width + padding);
    }
    if (max > 0) setWidth(key, Math.ceil(max));
  }

  function handleKeyDown(e: KeyboardEvent<HTMLDivElement>, key: string) {
    const delta = e.key === 'ArrowRight' ? KEY_STEP : e.key === 'ArrowLeft' ? -KEY_STEP : 0;
    if (delta === 0) return;
    e.preventDefault();
    setWidth(key, widths[key] + delta);
  }

  const totalWidth = columns.reduce((sum, c) => sum + widths[c.key], 0);

  return (
    <div className="table-wrap">
      <table ref={tableRef} className="resizable-table" style={{ width: totalWidth }}>
        <colgroup>
          {columns.map((c) => (
            <col key={c.key} style={{ width: widths[c.key] }} />
          ))}
        </colgroup>
        <thead>
          <tr>
            {columns.map((c) => (
              <th key={c.key} scope="col" data-col={c.key}>
                <span className="cell-text">{c.label}</span>
                <div
                  className="col-resizer"
                  role="separator"
                  aria-orientation="vertical"
                  aria-label={`${c.label}の列の幅`}
                  aria-valuemin={MIN_WIDTH}
                  aria-valuemax={MAX_WIDTH}
                  aria-valuenow={widths[c.key]}
                  tabIndex={0}
                  onPointerDown={(e) => handlePointerDown(e, c.key)}
                  onPointerMove={handlePointerMove}
                  onPointerUp={handlePointerEnd}
                  onPointerCancel={handlePointerEnd}
                  onDoubleClick={() => fitToContent(c.key)}
                  onKeyDown={(e) => handleKeyDown(e, c.key)}
                />
              </th>
            ))}
          </tr>
        </thead>
        <tbody>
          {rows.map((row) => (
            <tr key={getRowKey(row)}>
              {columns.map((c) => (
                <td key={c.key} data-col={c.key}>
                  <span className="cell-text">{String(row[c.key])}</span>
                </td>
              ))}
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}

import { ResizableTable } from './ResizableTable';
import type { Column } from './ResizableTable';

type Item = { id: string; name: string; category: string; price: number; note: string };

const columns: Column<Item>[] = [
  { key: 'name', label: '商品名', width: 140 },
  { key: 'category', label: '分類', width: 90 },
  { key: 'price', label: '価格（円）', width: 110 },
  { key: 'note', label: '説明', width: 200 },
];

const rows: Item[] = [
  { id: '1', name: 'ステンレスの保温マグカップ', category: '食器', price: 2480, note: 'ふた付きで、飲み物が冷めにくいマグカップです。' },
  { id: '2', name: '木のまな板', category: '調理器具', price: 1980, note: '片面に溝があり、肉汁がこぼれにくくなっています。' },
  { id: '3', name: '綿のふきん（5枚組）', category: '日用品', price: 880, note: '吸水性が高く、乾きやすい薄手の生地です。' },
];

export function App() {
  return (
    <main>
      <ResizableTable columns={columns} rows={rows} getRowKey={(r) => r.id} />
    </main>
  );
}

.table-wrap {
  max-width: 100%;
  overflow-x: auto; /* 表が画面より広くなったら、横にスクロールさせる */
}
.resizable-table {
  table-layout: fixed; /* 列の幅を、中身ではなく col の指定で決める */
  border-collapse: separate;
  border-spacing: 0;
}
.resizable-table th,
.resizable-table td {
  position: relative; /* 取っ手の位置の基準にする */
  padding: 8px 12px;
  border-bottom: 1px solid #d5dde1;
  text-align: left;
  /* 入りきらない文字は1行のまま隠し、末尾を「…」にする */
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.resizable-table th {
  background: #eefafd;
}
.col-resizer {
  position: absolute;
  top: 0;
  right: 0;
  width: 8px;
  height: 100%;
  cursor: col-resize;
  touch-action: none; /* 指でなぞっても、ページがスクロールしないようにする */
}
.col-resizer::after {
  content: '';
  position: absolute;
  top: 20%;
  right: 3px;
  width: 2px;
  height: 60%;
  background: #9aa5ab;
}
.col-resizer:hover::after,
.col-resizer:focus-visible::after {
  background: #00c8e8;
}

左へ 300px（離さない）: 商品名: state 60 / 実際 60
そのまま押した位置へ戻して離す: 商品名: state 140 / 実際 140
右へ 80px: 商品名: state 220 / 実際 220
左へ 60px（途中で下へ 120px 外れる）: 商品名: state 160 / 実際 160
左へ 300px: 商品名: state 60 / 実際 60
入りきらずに隠れたセル（商品名）: 4 / 4
表示されている文字（1行目の商品名のセル）: ellipsis

white-space: nowrap あり: 41px
white-space: nowrap なし: 185px

商品名: state 140 / 実際 232.015625、分類: state 90 / 実際 88.015625、価格（円）: state 110 / 実際 104.015625、説明: state 200 / 実際 404.65625
商品名を左へ 80px: 商品名: state 60 / 実際 232.015625

商品名: state 140 / 実際 199.109375、分類: state 90 / 実際 128、価格（円）: state 110 / 実際 156.4375、説明: state 200 / 実際 284.453125
商品名を右へ 80px: 商品名: state 220 / 実際 272.515625、分類: state 90 / 実際 111.46875、価格（円）: state 110 / 実際 136.25、説明: state 200 / 実際 247.765625

overflow-x: auto あり: ページの横幅 360px（表示領域 360px）/ 囲みの幅 328px、中身の幅 540px
overflow-x: auto なし: ページの横幅 556px（表示領域 360px）/ 囲みの幅 328px、中身の幅 540px

商品名: 商品名: state 233 / 実際 233
入りきらずに隠れたセル（商品名）: 0 / 4
説明: 説明: state 405 / 実際 405
入りきらずに隠れたセル（説明）: 0 / 4
幅を 1px 減らすと隠れるセル（説明）: 1 / 4
価格（円）: 価格（円）: state 105 / 実際 105
入りきらずに隠れたセル（価格（円））: 0 / 4

ArrowRight→120 ArrowRight→130 ArrowLeft→120 Enter→120
属性: role=separator aria-orientation=vertical aria-label=価格（円）の列の幅 aria-valuemin=60 aria-valuemax=600 tabindex=0

touch-action: none: 右へ 60px なぞる: 商品名 200 / 囲みの scrollLeft 0 / イベント: pointerdown pointerup
touch-action: auto: 右へ 60px なぞる: 商品名 158 / 囲みの scrollLeft 0 / イベント: pointerdown pointercancel