Reactで、表の行をチェックボックスでまとめて選ぶ方法

const [selected, setSelected] = useState<ReadonlySet<string>>(new Set());

import { useEffect, useRef, useState } from 'react';

export type FileRow = { id: string; name: string; size: string };

export function FileTable({ initialRows }: { initialRows: FileRow[] }) {
  const [rows, setRows] = useState(initialRows);
  // 選んだ行は、並び順ではなく id で覚える
  const [selected, setSelected] = useState<ReadonlySet<string>>(new Set());
  // Shift を押してクリックしたときの起点
  const anchorId = useRef<string | null>(null);

  const allChecked = rows.length > 0 && rows.every((r) => selected.has(r.id));
  const someChecked = rows.some((r) => selected.has(r.id));

  // indeterminate は HTML の属性がないので、DOM のプロパティに直接入れる
  const headerRef = useRef<HTMLInputElement>(null);
  useEffect(() => {
    if (headerRef.current) {
      headerRef.current.indeterminate = someChecked && !allChecked;
    }
  }, [someChecked, allChecked]);

  function toggleAll() {
    setSelected(allChecked ? new Set() : new Set(rows.map((r) => r.id)));
  }

  function toggleRow(e: React.ChangeEvent<HTMLInputElement>, id: string) {
    const checked = e.target.checked;
    const shift = e.nativeEvent instanceof MouseEvent && e.nativeEvent.shiftKey;
    const from = rows.findIndex((r) => r.id === anchorId.current);
    const to = rows.findIndex((r) => r.id === id);
    // Shift なら起点からこの行までを、この行と同じ状態にそろえる
    const ids =
      shift && from !== -1
        ? rows.slice(Math.min(from, to), Math.max(from, to) + 1).map((r) => r.id)
        : [id];
    setSelected((prev) => {
      const next = new Set(prev);
      for (const x of ids) {
        if (checked) next.add(x);
        else next.delete(x);
      }
      return next;
    });
    anchorId.current = id;
  }

  function deleteSelected() {
    setRows((prev) => prev.filter((r) => !selected.has(r.id)));
    setSelected(new Set());
  }

  return (
    <>
      <p>
        {selected.size}件を選択中{' '}
        <button type="button" disabled={selected.size === 0} onClick={deleteSelected}>
          選んだ行を削除
        </button>
      </p>
      <table>
        <thead>
          <tr>
            <th>
              <input
                type="checkbox"
                ref={headerRef}
                checked={allChecked}
                onChange={toggleAll}
                aria-label="すべての行を選択"
              />
            </th>
            <th>ファイル名</th>
            <th>サイズ</th>
          </tr>
        </thead>
        <tbody>
          {rows.map((r) => (
            <tr key={r.id} className={selected.has(r.id) ? 'selected' : undefined}>
              <td>
                <input
                  type="checkbox"
                  checked={selected.has(r.id)}
                  onChange={(e) => toggleRow(e, r.id)}
                  aria-label={`${r.name} を選択`}
                />
              </td>
              <td>{r.name}</td>
              <td>{r.size}</td>
            </tr>
          ))}
        </tbody>
      </table>
    </>
  );
}

[console.error] Received `true` for a non-boolean attribute `indeterminate`.
  indeterminate プロパティ: false

--- photo.png をクリック
  header: checked=false indeterminate=true
  checked: photo.png
- checkbox "すべての行を選択" [checked=mixed]

--- 見出しのチェックボックスをクリック（一部だけ選択中から）
  header: checked=true indeterminate=false
  checked: report.pdf, photo.png, memo.txt, slides.pdf, data.csv, logo.svg
--- 見出しのチェックボックスをもう一度クリック
  header: checked=false indeterminate=false
  checked: (なし)

--- Shift を押して data.csv をクリック
  checked: photo.png, memo.txt, slides.pdf, data.csv
  lastClick: PointerEvent shiftKey=true

--- memo.txt にフォーカスして Shift+Space
  checked: report.pdf, photo.png, memo.txt
  lastClick: PointerEvent shiftKey=true

--- photo.png と slides.pdf を選び、data.csv を2回クリック（起点は data.csv）: photo.png, slides.pdf
--- 削除のあと、Shift を押して report.pdf をクリック: report.pdf, memo.txt, data.csv
--- photo.png、slides.pdf の順にクリック（起点は slides.pdf）: photo.png, slides.pdf
--- 削除のあと（起点の slides.pdf はもうない）、Shift を押して logo.svg をクリック: logo.svg

--- 「選んだ行を削除」をクリック
  count: 0件を選択中 選んだ行を削除
  rows: 4
  button: disabled

--- 削除のあと、report.pdf をクリックし、Shift を押して logo.svg をクリック
  header: checked=true indeterminate=false
  checked: report.pdf, memo.txt, data.csv, logo.svg