コンポーネント一覧
Table
列が 5 つを超えるなら、狭い画面では表ではなく 1 件 1 ブロックに組み替える。表は横にスクロールさせ、ページはさせない。
デモ
使い分け
こうする
- aria-label と isRowHeader の列を必ず付ける。行が名前で読める
- 数値の列は align="end"。桁が揃う
- overflow-x-auto の枠で包む。表がスクロールし、ページはしない
こうしない
- 列が 5 つを超える表をスマホでそのまま出さない。1 件 1 ブロックに組み替える
- 行の選択とリンクを同じ行に混ぜない。どちらが起きるか分からない
Props
| 名前 | 型 | 説明 |
|---|---|---|
| aria-label * | string | 表の名前。支援技術が「何の一覧か」を読むために必須 |
| size | 'sm' | 'md' | 'lg' | |
| sortDescriptor | TableSortDescriptor | 並べ替えの状態。制御したい場合に使う |
| onSortChange | (descriptor: TableSortDescriptor) => void | |
| selectionMode | 'none' | 'single' | 'multiple' | 行の選び方。`single` / `multiple` では行を押すと選ばれる（チェックボックスは出さない）。 既定は `none` |
| selectedKeys | 'all' | Iterable<string> | 選ばれている行の `id`。制御したい場合に使う。`'all'` は全行 |
| defaultSelectedKeys | 'all' | Iterable<string> | |
| onSelectionChange | (keys: 'all' | Set<string>) => void | |
| disabledKeys | Iterable<string> | |
| onRowAction | (key: string) => void | 行を押したときの動作（選択とは別）。詳細へ移るなど |
| children | ReactNode | |
| classNames | ClassNames<typeof tableSlots> |
Slot
構成部位に data-slot が出力されます。 CSS の上書きやテストはこれを狙ってください。
- root必須
- header必須
- column必須
- sortIcon
- body必須
- row必須
- cell必須
- empty
アクセシビリティ
| キー | 動作 |
|---|---|
| ↑ ↓ ← → | 行とセルを移動 |
| Home / End | 行頭 / 行末へ |
| Space | 行を選ぶ（`selectionMode` があるとき） |
| Enter / Space（見出し） | 並べ替え |
- 根要素は `role="grid"` で `aria-label` を持つ。並べ替えできる見出しは `aria-sort` を持ち、 Enter / Space で切り替わる。行は矢印キーで移動でき、`selectionMode` があれば Space で選べる。 行が 0 件のときは `renderEmptyState` の内容が本体に出る
- キーボードだけで操作できます。フォーカスリングはコントラスト比 3:1 以上です。
- 本文のコントラスト比は light / dark とも 4.5:1 以上を検査で保証しています。
prefers-reduced-motionが有効なときはアニメーションを行いません。