PackagesUIComponentsTables
Table
データを行と列で表示するテーブルコンポーネント。請求書一覧、ユーザーリスト等の構造化データの表示に使用する。
いつ使うか
- 構造化されたデータを行と列で表示するときに使用する
- ヘッダー、フッター、キャプションを含む静的なテーブルレイアウトに使用する
いつ使わないか
- ソート・フィルタ・ページネーション等のインタラクティブなデータ操作が必要な場合は
DataTableを使用する - キーバリューペアの表示には、定義リスト (
dl) の使用を検討する
Usage
import {
Table,
TableBody,
TableCell,
TableHead,
TableHeader,
TableRow,
} from '@bi-shop-it/ui/table';
<Table>
<TableHeader>
<TableRow>
<TableHead>名前</TableHead>
<TableHead>メールアドレス</TableHead>
</TableRow>
</TableHeader>
<TableBody>
<TableRow>
<TableCell>田中 太郎</TableCell>
<TableCell>[email protected]</TableCell>
</TableRow>
</TableBody>
</Table>;Props
すべてのコンポーネントは children: ReactNode を受け取る。
TableHead / TableCell
| Prop | 型 | デフォルト | 説明 |
|---|---|---|---|
align | 'left' | 'center' | 'right' | 'left' | テキストの水平揃え |
highlight | 'muted' | 'info' | 'success' | 'warning' | 'destructive' | — | セルの背景色。意味ベースで指定する |
sticky | 'left' | 'top' | ('left' | 'top')[] | — | スクロール時にセルを固定する辺。縦横両方を固定する角セルは ['left', 'top'] を渡す |
colSpan | number | — | 結合する列数 |
rowSpan | number | — | 結合する行数 |
TableCell は上記に加えて verticalAlign を受け取る。
| Prop | 型 | デフォルト | 説明 |
|---|---|---|---|
verticalAlign | 'top' | 'middle' | 'bottom' | 'middle' | 内容の垂直揃え |
TableRow
| Prop | 型 | デフォルト | 説明 |
|---|---|---|---|
highlight | 'muted' | 'info' | 'success' | 'warning' | 'destructive' | — | 行の背景色。意味ベースで指定する |
onClick | () => void | — | 行クリック時のハンドラ。指定時は行全体がクリック可能になりキーボード操作も有効 |
Table
| Prop | 型 | デフォルト | 説明 |
|---|---|---|---|
maxHeight | 'sm' | 'md' | 'lg' | 'xl' | — | スクロール領域の高さ上限。sticky="top" で縦方向にヘッダーを固定する場合に指定する |
sticky="top" は、スクロール領域自体が縦スクロールしないと機能しない。maxHeight で高さを制限し、縦スクロールコンテナにする必要がある。
その他のコンポーネント
| コンポーネント | HTML 要素 | 説明 |
|---|---|---|
Table | <table> | テーブルのルート。スクロール対応 |
TableHeader | <thead> | ヘッダー行のグループ |
TableBody | <tbody> | データ行のグループ |
TableFooter | <tfoot> | フッター行のグループ |
TableRow | <tr> | テーブル行 |
TableCaption | <caption> | テーブルのキャプション |
状態
デフォルト
キャプション、ヘッダー、フッターを含む完全なテーブル。
| 請求書番号 | ステータス | 支払方法 | 金額 |
|---|---|---|---|
| INV-001 | 支払済 | 銀行振込 | ￥250,000 |
| INV-002 | 未払い | クレジットカード | ￥150,000 |
| INV-003 | 支払済 | 銀行振込 | ￥350,000 |
| INV-004 | 支払済 | 口座振替 | ￥450,000 |
| INV-005 | 未払い | クレジットカード | ￥550,000 |
| 合計 | ￥1,750,000 | ||
<Table>
<TableCaption>最近の請求書一覧</TableCaption>
<TableHeader>
<TableRow>
<TableHead>請求書番号</TableHead>
<TableHead>ステータス</TableHead>
<TableHead>支払方法</TableHead>
<TableHead align="right">金額</TableHead>
</TableRow>
</TableHeader>
<TableBody>
<TableRow>
<TableCell>INV-001</TableCell>
<TableCell>支払済</TableCell>
<TableCell>銀行振込</TableCell>
<TableCell align="right">¥250,000</TableCell>
</TableRow>
</TableBody>
<TableFooter>
<TableRow>
<TableCell colSpan={3}>合計</TableCell>
<TableCell align="right">¥1,750,000</TableCell>
</TableRow>
</TableFooter>
</Table>シンプル
ヘッダーとデータ行のみのシンプルなテーブル。
| 名前 | メールアドレス | 役割 |
|---|---|---|
| 田中 太郎 | [email protected] | 管理者 |
| 佐藤 花子 | [email protected] | 編集者 |
| 鈴木 一郎 | [email protected] | 閲覧者 |
<Table>
<TableHeader>
<TableRow>
<TableHead>名前</TableHead>
<TableHead>メールアドレス</TableHead>
<TableHead>役割</TableHead>
</TableRow>
</TableHeader>
<TableBody>
<TableRow>
<TableCell>田中 太郎</TableCell>
<TableCell>[email protected]</TableCell>
<TableCell>管理者</TableCell>
</TableRow>
</TableBody>
</Table>行クリック
TableRow に onClick を渡すと、その行全体がクリック可能になる。マウスクリックに加え、フォーカス時の Enter / Space キーでも発火する。
| 名前 | メールアドレス |
|---|---|
| 田中 太郎 | [email protected] |
| 佐藤 花子 | [email protected] |
| 鈴木 一郎 | [email protected] |
<Table>
<TableHeader>
<TableRow>
<TableHead>名前</TableHead>
<TableHead>メールアドレス</TableHead>
</TableRow>
</TableHeader>
<TableBody>
{users.map((user) => (
<TableRow key={user.id} onClick={() => router.push(`/users/${user.id}`)}>
<TableCell>{user.name}</TableCell>
<TableCell>{user.email}</TableCell>
</TableRow>
))}
</TableBody>
</Table>行内に TextLink やボタン等のインタラクティブ要素を置く場合、そのままでは要素クリック時にも行の onClick が発火する。要素側で event.stopPropagation() してバブリングを止めること。
<TableRow onClick={() => handleRowClick(user.id)}>
<TableCell>
<button
type="button"
onClick={(event) => {
event.stopPropagation();
handleEdit(user.id);
}}
>
編集
</button>
</TableCell>
</TableRow>アクセシビリティ
コンポーネントが内部で処理すること
- セマンティックな HTML テーブル要素（
table、thead、tbody、th、td）を使用する data-slot属性でコンポーネントの役割を識別可能にするonClick付きのTableRowにrole="button"、tabIndex={0}、Enter / Space キーハンドラを付与する
利用者が対応すること
- テーブルの目的を説明する
TableCaptionを設定すること - 行内にインタラクティブ要素を置く場合は
event.stopPropagation()で行クリックへのバブリングを止めること
関連コンポーネント
DataTable— TanStack Table と組み合わせたインタラクティブなデータテーブルに使用するCard— テーブルをカードでラップして視覚的にグループ化する場合に使用する