Table
fandhe-frontend-pre-styled-ui の table mod が提供するスタイル済み Table 部品です。
表形式データを表示する部品です。TableVariant(Line/Outline)で外枠・区切り線を、striped(bool)で縞模様表示を切り替えます。column_header は scope="col" を関数側で固定し呼び出し側の偽装を除去します。
Demo
table/thead/tbody/tfoot/tr/th/td/caption の HTML 意味論を尊重した表組み。variant(line / outline)・size(sm / md / lg)・striped の 3 軸 variant を持ちます。
| Name | Role | |
|---|---|---|
| Alice | alice@example.com | Admin |
| Bob | bob@example.com | Member |
| Carol | carol@example.com | Member |
| Name | Role | |
|---|---|---|
| Alice | alice@example.com | Admin |
| Bob | bob@example.com | Member |
| Carol | carol@example.com | Member |
| Name | Role | |
|---|---|---|
| Alice | alice@example.com | Admin |
| Bob | bob@example.com | Member |
| Carol | carol@example.com | Member |
| Name | Role | |
|---|---|---|
| Alice | alice@example.com | Admin |
| Bob | bob@example.com | Member |
| Carol | carol@example.com | Member |
| Name | Role | |
|---|---|---|
| Alice | alice@example.com | Admin |
| Bob | bob@example.com | Member |
| Carol | carol@example.com | Member |
Features
- TableVariant(Line/Outline、crates/pre-styled-ui/src/table.rs:146-152)で外枠・区切り線を切り替える
- striped(bool)で本文行の背景を交互に変える(table.rs:132-133, striped の実装節)
- column_header は scope="col" を関数側で固定し呼び出し側の偽装を除去する(table.rs セキュリティ不変条件節、COLUMN_HEADER_RESERVED)
Anatomy
root
caption
header
row
column-header
body
cellAPI Reference
Arguments
| Name | Type | Default | Description |
|---|---|---|---|
| variant | TableVariant | Line | 外枠・区切り線の見た目(table.rs:128-152)。 |
| size | Size | Md | セルの padding/font-size(table.rs:130-131)。 |
| striped | bool | false | 縞模様表示の有無(table.rs:132-143)。 |
CSS Variables
| Variable | Default |
|---|---|
| --fandhe-table-cell-padding | 0.75rem 1rem |
| --fandhe-table-font-size | var(--fandhe-font-font-size-sm) |
| --fandhe-table-row-border | none |
| --fandhe-table-stripe-bg | transparent |
Examples
Striped
striped=true・header/body を組み合わせた例です。
| Name |
|---|
| Alice |
Accessibility
WAI-ARIA
| Attribute | Description |
|---|---|
| scope="col"(column-header) | column_header が固定付与するテーブル見出しの意味論属性(呼び出し側の偽装は除去、table.rs セキュリティ不変条件節)。role/aria-* 自体はネイティブ table 要素の意味論に委ねており固有の出力はない。 |