Table
構造化されたデータを行・列形式で表示するコンポーネント。ユーザー一覧・注文履歴・比較表など、複数の属性を持つデータを整理して表示するときに使う。
インストール
npx shoji add table
プレビュー
使用例
| プラン名 | 価格 | ティア | ステータス |
|---|---|---|---|
| Shoji Open | ¥0 | Open | 公開中 |
| Personal Lifetime | ¥19,800 | Personal | 販売中 |
| Team Lifetime | ¥69,800 | Team | 販売中 |
使い方
こんなときに使う
- ユーザー一覧・注文履歴・在庫管理など、複数行のデータ管理
- 料金プラン比較など、行と列の両軸で情報を整理するとき
- ソート・フィルタリング・ページネーションと組み合わせるとき
使わないほうがいい場面
- 2〜3項目しかないシンプルなリスト（ul/li で十分）
- レイアウト目的でテーブルを使う（CSS Grid/Flex を使う）
JP 最適化のポイント
- th に scope="col" を付与 — スクリーンリーダーが列ヘッダーを正しく読み上げる
- 日本語の表では「〇」「×」「－」を多用する — aria-label や title で意味を補足する
- 数値列（金額・個数）は右揃えが日本語UIでも一般的