Table
fandhe-frontend-wireframe-ui の N 列 × M 行のデータ表配置部品です。「ここにデータ表がある」という配置イメージだけを示す非インタラクティブな部品です。API は table(headers, rows, size) の 3 引数(詳細は下の引数表を参照)で、props 構造体は導入していません。
視覚的な参照元は Table(blocks.pm) です。ライセンス上の理由により、本ページには blocks.pm のスクリーンショットや外観・プロパティ構成をそのまま取り込みません(詳細は docs/design/wireframe-ui-architecture.md §2)。参照したい場合は外部リンク先を直接確認してください。
実際のデータ表示・並べ替え・行選択のような機能が必要な場合は、Table(Themes) / Data table(Themes) / Data table(Primitives) を検討してください。
Demo
既定(ヘッダーあり、3 列 × 3 行)
NameRoleStatus
AliceEngineerActive
BobDesignerInvited
CarolManagerActive
ヘッダーなし
AliceEngineerActive
BobDesignerInvited
CarolManagerActive
短い行は空セルで埋める
NameRoleStatus
AliceEngineer
Bob
Sm
NameRoleStatus
AliceEngineerActive
BobDesignerInvited
CarolManagerActive
Lg
NameRoleStatus
AliceEngineerActive
BobDesignerInvited
CarolManagerActive
引数表
| 引数 | 型 | 既定値 | 説明 |
|---|---|---|---|
| headers | &[&str] | - | 列見出しの文言。空スライスならヘッダー行を出力しない。 |
| rows | &[&[&str]] | - | 行ごとのセル文言。20 行を超える入力は先頭のみへ飽和する。短い行は空セルで埋める。 |
| size | Size | Size::Md | サイズ段階(xs〜xl)。 |
原案差分メモ
<table>/<th>は使わない: Calendar の先例(「データテーブル意味論を持ち込まず Grid と同じ手法を使う」)に揃え、div/span+ CSS grid で表現します。プレースホルダーの文言を支援技術へ「データ表」として伝えないための一貫した判断です。- ヘッダー有無は bool ではなくスライスの空判定で表す: 原案の Header(bool) は
headers.is_empty()へ畳みました。空ならヘッダー行を出力しません。別に bool を持つと「header=trueなのにheaders=[]」という矛盾した入力を生むため採りませんでした。 - 列数は明示引数にしない:
headers/rowsの形から導きます(headers.len()と各行長の最大値のうち大きい方を1..=12へ丸める)。原案の「Columns #」に相当する引数は持ちません。 - 行数は明示引数にしない:
rows.len()をそのまま使い、MAX_TABLE_ROWS(20 行)を超える入力は先頭のみを描画します(A05 資源有界化、textarea::MAX_ROWS/calendar::MAX_WEEKSと同型)。原案の「Rows #」に相当する引数は持ちません。 - 短い行は空セルで埋める: 列数より短いヘッダー行・データ行は、不足分を空セル(
fw-wire-table-cell-empty。Calendar のday-emptyと同じ作り)で埋めます。列数より長い行は先頭の列数分だけを使います。こうして全行が同じセル数になり、見た目の列が崩れません。 - セル種別は持たない: 原案の「セル種別」(テキスト/バー状プレースホルダー/アバターやチェックボックスの差し込み等)は採らず、全セルをテキストのみとしました。利用実績が出た時点で拡張を検討します。
- 配色はグレースケール: 原案の黒塗りヘッダーは
--fw-wire-fill-subtle(グレースケール)へ調整しました。--fw-wire-ink/--fw-wire-line/--fw-wire-line-subtleトークンのみを使い、ColorPaletteには依存しません。 style属性・ネイティブ対話要素は一切出力しない:role/aria-*/tabindex/style/on*/<table>/<th>/<button>/<input>/<select>/<a href>は出力しません(docs/design/wireframe-ui-architecture.md§7)。ルートはclassのみを持ちます(question/calendarの「ルートは class のみ」判断と同型)。- スクリーンショット非掲載:
docs/design/reference-screenshots/への blocks.pm 画像取り込みは #2602 で fail-closed に非掲載と確定しています。