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' | テキスト揃え |
colSpan | number | — | 結合する列数 |
rowSpan | number | — | 結合する行数 |
その他のコンポーネント
| コンポーネント | 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>アクセシビリティ
コンポーネントが内部で処理すること
- セマンティックな HTML テーブル要素（
table,thead,tbody,th,td）を使用する data-slot属性でコンポーネントの役割を識別可能にする
利用者が対応すること
- テーブルの目的を説明する
TableCaptionを設定すること
関連コンポーネント
DataTable— TanStack Table と組み合わせたインタラクティブなデータテーブルに使用するCard— テーブルをカードでラップして視覚的にグループ化する場合に使用する