SpreadSheetTable

概要

SpreadSheetTable はテーブルを描画するメインコンポーネントです。

import { SpreadSheetTable } from '@heynow-jp/react-spread-sheet-table'

// 仮想スクロールあり (固定高さ)
<SpreadSheetTable table={table} height={500} />

// 仮想スクロールなし (行数に合った自然な高さ)
<SpreadSheetTable table={table} />

Props

プロパティ	型	デフォルト	説明
table	TableInstance<T>	(必須)	useSpreadSheetTable で生成したインスタンス
height	number	-	テーブルの高さ (px)。指定すると仮想スクロールが有効に。省略すると全行表示
readOnly	boolean	false	テーブル全体を読み取り専用に
cellMeta	(row: T, columnKey: keyof T, rowIndex: number) => CellMeta | undefined	-	セルごとの追加スタイル・ツールチップを返すコールバック
autoWidth	boolean	false	テーブル幅をカラム幅の合計に合わせる

ReactSpreadSheetTableProvider

複数の SpreadSheetTable を同一画面で使用するとき、クリップボード範囲 (マーチングアンツ) の排他制御を行う Provider です。

あるテーブルでコピー/カットを実行すると、別テーブルのクリップボード範囲が自動的にクリアされます。Provider なしでも各テーブルは独立して動作しますが、マーチングアンツが複数テーブルに残る場合があります。

import {
  ReactSpreadSheetTableProvider,
  SpreadSheetTable,
  useSpreadSheetTable,
} from '@heynow-jp/react-spread-sheet-table'

function App() {
  const tableA = useSpreadSheetTable({ ... })
  const tableB = useSpreadSheetTable({ ... })

  return (
    <ReactSpreadSheetTableProvider>
      <SpreadSheetTable table={tableA} />
      <SpreadSheetTable table={tableB} />
    </ReactSpreadSheetTableProvider>
  )
}

CellMeta

cellMeta コールバックが返すオブジェクトの型です。

type CellMeta = {
  className?: string  // セルに追加する CSS クラス
  tooltip?: string    // ホバー時のツールチップテキスト
}

バリデーションエラーのツールチップが存在する場合はそちらが優先されます。

キーボードショートカット

キー	動作
Arrow keys	セル移動
Shift + Arrow	範囲選択の拡張
Tab	右のセルへ移動
Shift + Tab	左のセルへ移動
Enter	編集開始 / 編集確定
Escape	編集キャンセル
Delete / Backspace	セル内容を削除
Space	boolean セルのトグル
Ctrl + C	コピー
Ctrl + V	ペースト
Ctrl + Z	Undo
Ctrl + Shift + Z	Redo
Ctrl + A	全選択

マウス操作

操作	動作
クリック	セル選択
ダブルクリック	編集開始
Shift + クリック	範囲選択
ドラッグ	範囲選択
列ヘッダークリック	列全体を選択
行ヘッダークリック	行全体を選択
行ヘッダードラッグ	行の並び替え (reorderable 有効時)