---
summary: 構造化されたデータを行と列で一覧表示する
category: Data Display
---

# Table

商品やユーザーなど、同じ種類のオブジェクトの集まりを行と列で一覧表示するコンポーネントです。素の `<table>` の代わりに使います。行の選択やソートにも対応しています。

## 基本の使い方

```tsx
import { Cell, Column, Row, Table, TableBody, TableHeader } from 'wip-ui'

<Table aria-label="ファイル一覧">
  <TableHeader>
    <Column isRowHeader>名前</Column>
    <Column>種類</Column>
  </TableHeader>
  <TableBody>
    <Row>
      <Cell>Document.pdf</Cell>
      <Cell>PDF</Cell>
    </Row>
  </TableBody>
</Table>
```

## 構成要素

| 部品 | 役割 |
|---|---|
| Table | テーブル全体 |
| TableHeader | 見出し行。Column を並べる |
| Column | 列の見出し |
| TableBody | データ行のまとまり。Row を並べる |
| Row | 1 行分のデータ。Cell を並べる |
| Cell | 1 つのセル |
| ResizableTableContainer | 列幅をユーザーが変えられるようにするときに Table を囲む |
| ColumnResizer | 列幅を変えるためのハンドル。Column の中に置く |
| TableLoadMoreItem | 続きのデータを読み込むための行。TableBody の末尾に置く |

## 使う場面

- ファイル一覧やユーザー一覧など、項目ごとに同じ属性を持つデータを並べて比較させたいとき
- 一括削除や一括更新など、複数の行を選んでまとめて操作させたいとき

## 使い方

### データ

- [avoid] 商品とユーザーなど、異なる種類のオブジェクトを 1 つの Table に混在させない

### 選択

- [should] 複数の行をまとめて操作させるときは、複数の行を選べるようにする
- [should] 行を選べるようにするときは、各行の先頭にチェックボックスを置く。見出し行の先頭には、すべての行を選ぶチェックボックスを置く

### レイアウト

- [should] 画面幅が広い場合は、Container などで Table の外側の最大幅を制限する。Table を極端に横に広げると読みにくくなる

## アクセシビリティ

- [must] Table に aria-label を指定し、何の一覧かを伝える
- [should] 行を識別する列（名前や ID など）の Column に isRowHeader を指定する

## 実装

- [should] 複数の行を選べるようにするときは、Table に selectionMode="multiple" を指定する
- [should] 選択用のチェックボックスは、wip-ui の Checkbox に slot="selection" を指定して、各行の先頭の Cell と、見出しの先頭の Column に置く。ラベルは自動で付くため、children は空にする（例：`<Checkbox slot="selection">{null}</Checkbox>`）

## Props（自動生成）

型定義から生成した props の一覧です。react-aria-components から引き継いだ props の説明は英語です。DOM の汎用的な属性・イベントは省略しています。

### Table

| 名前 | 型 | 既定値 | 説明 |
|---|---|---|---|
| children | ReactNode | - | The elements that make up the table. Includes the TableHeader, TableBody, Columns, and Rows. |
| selectionBehavior | "toggle" \| "replace" | "toggle" | How multiple selection should behave in the collection. |
| disabledBehavior | "selection" \| "all" | "selection" | Whether `disabledKeys` applies to all interactions, or only selection. |
| onRowAction | ((key: Key) => void) | - | Handler that is called when a user performs an action on the row. |
| dragAndDropHooks | DragAndDropHooks<object> | - | The drag and drop hooks returned by `useDragAndDrop` used to enable drag and drop behavior for the Table. |
| disabledKeys | Iterable<Key> | - | A list of row keys to disable. |
| escapeKeyBehavior | "clearSelection" \| "none" | 'clearSelection' | Whether pressing the escape key should clear selection in the table or not. Most experiences should not modify this option as it eliminates a keyboard user's ability to easily clear selection. Only use if the escape key is being handled externally or should not trigger selection clearing contextually. |
| shouldSelectOnPressUp | boolean | - | Whether selection should occur on press up instead of press down. |
| selectionMode | "none" \| "single" \| "multiple" | - | The type of selection that is allowed in the collection. |
| disallowEmptySelection | boolean | - | Whether the collection allows empty selection. |
| selectedKeys | "all" \| Iterable<Key> | - | The currently selected keys in the collection (controlled). |
| defaultSelectedKeys | "all" \| Iterable<Key> | - | The initial selected keys in the collection (uncontrolled). |
| onSelectionChange | ((keys: Selection) => void) | - | Handler that is called when the selection changes. |
| sortDescriptor | SortDescriptor | - | The current sorted column and direction. |
| onSortChange | ((descriptor: SortDescriptor) => any) | - | Handler that is called when the sorted column or direction changes. |
| className | ClassNameOrFunction<TableRenderProps> | - | The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. A function may be provided to compute the class based on component state. |
| style | StyleOrFunction<TableRenderProps> | - | The inline [style](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style) for the element. A function may be provided to compute the style based on component state. |
| slot | string \| null | - | A slot name for the component. Slots allow the component to receive props from a parent component. An explicit `null` value indicates that the local props completely override all props received from a parent. |
| aria-label | string | - | Defines a string value that labels the current element. |
| aria-labelledby | string | - | Identifies the element (or elements) that labels the current element. |
| aria-describedby | string | - | Identifies the element (or elements) that describes the object. |
| aria-details | string | - | Identifies the element (or elements) that provide a detailed, extended description for the object. |

### ColumnResizer

| 名前 | 型 | 既定値 | 説明 |
|---|---|---|---|
| aria-label | string | - | A custom accessibility label for the resizer. |
| children | ReactNode | - | The elements that make up the table. Includes the TableHeader, TableBody, Columns, and Rows. |
| className | ClassNameOrFunction<TableRenderProps> | - | The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. A function may be provided to compute the class based on component state. |
| style | StyleOrFunction<TableRenderProps> | - | The inline [style](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style) for the element. A function may be provided to compute the style based on component state. |

### ResizableTableContainer

| 名前 | 型 | 既定値 | 説明 |
|---|---|---|---|
| onResizeStart | ((widths: Map<Key, ColumnSize>) => void) | - | Handler that is called when a user starts a column resize. |
| onResize | ((widths: Map<Key, ColumnSize>) => void) | - | Handler that is called when a user performs a column resize. Can be used with the width property on columns to put the column widths into a controlled state. |
| onResizeEnd | ((widths: Map<Key, ColumnSize>) => void) | - | Handler that is called after a user performs a column resize. Can be used to store the widths of columns for another future session. |
| children | ReactNode | - | The elements that make up the table. Includes the TableHeader, TableBody, Columns, and Rows. |
| className | ClassNameOrFunction<TableRenderProps> | - | The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. A function may be provided to compute the class based on component state. |
| style | StyleOrFunction<TableRenderProps> | - | The inline [style](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style) for the element. A function may be provided to compute the style based on component state. |
| id | string | - | The element's unique identifier. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id). |