Table
fandhe-frontend-pre-styled-ui の table mod が提供するスタイル済み Table 部品です。
表形式データを表示する部品です。TableVariant（Line/Outline）で外枠・区切り線を、size（Xs〜Xl）でセルの padding/font-size を、striped（bool）で縞模様表示を、sticky_header（bool）で column-header（th）の position: sticky 表示を、interactive（bool、イシュー #2052）で row の hover 背景表示を切り替えます（5 軸 variant）。scroll_area（chakra Table.ScrollArea 相当）で root をスクロール枠に包み、sticky_header と組み合わせて見出し行を固定できます。column_header は scope="col" を関数側で固定し呼び出し側の偽装を除去します。呼び出し側は data-selected（行選択、accent-subtle 配色）・data-align（start/center/end、セル整列）を row/cell/column-header へ付与でき、column_header/cell は aria-sort 等の属性をそのまま通過させます（ソート・選択の生産は headless data-table 側の責務です）。
関連 API: fandhe-frontend-pre-styled-ui API
Demo
table/thead/tbody/tfoot/tr/th/td/caption の HTML 意味論を尊重した表組み。variant（line / outline）・size（xs 〜 xl）・striped・sticky_header・interactive（イシュー #2052）の 5 軸 variant と、scroll_area（chakra Table.ScrollArea 相当のスクロール枠）を持ちます。data-selected（選択行）・data-align（セル整列）は呼び出し側が付与する共有語彙です。
Features
- TableVariant（Line/Outline、crates/pre-styled-ui/src/table.rs:172-186）で外枠・区切り線を切り替える（イシュー #1572 で Outline の行罫線・ヘッダー背景を chakra-ui/Radix Themes 基準へ是正）
- size（Size、Xs〜Xl の 5 段）でセルの padding/font-size を切り替える（padding は --fandhe-space-* トークン、イシュー #1572）
- striped（bool）で本文行の背景を交互に変える（table.rs「striped の実装」節）
- sticky_header（bool、イシュー #1571）で column-header（th）を position: sticky にする（table.rs「sticky ヘッダーの実装」節）
- interactive（bool、イシュー #2052、shadcn/ui 突合）で row に bg-muted の hover 背景を付ける（opt-in、chakra-ui interactive 由来。table.rs「interactive 軸（行 hover）」節）
- data-selected（呼び出し側が付与する共有語彙、イシュー #2052）で row を選択状態（accent-subtle/accent-fg-subtle）にする（table.rs「data-selected 行状態」節）
- data-align（呼び出し側が付与する共有語彙、start/center/end、イシュー #2052）で cell/column-header の text-align を切り替える（headless positioning.rs と共有する既存語彙、table.rs「data-align セル整列」節）
- scroll_area（イシュー #1572、chakra Table.ScrollArea 相当）で root を overflow: auto のスクロール枠に包み、sticky_header と組み合わせて見出し行を固定できる（table.rs「scroll-area パーツ」節）
- caption は font-weight: medium・font-size: xs・text-align: inherit（chakra-ui 基準、イシュー #1572）
- column_header は scope="col" を関数側で固定し呼び出し側の偽装を除去する（table.rs セキュリティ不変条件節、COLUMN_HEADER_RESERVED）
- column_header/cell は aria-sort 等の呼び出し側属性をそのまま通過させる（ソート・選択の生産は headless data-table〔#2124〕の責務、table.rs「スコープ外」節）
Anatomy
root
caption
header
row
column-header
body
cell
scroll-area
footer
API Reference
Arguments
| Name | Type | Default | Description |
|---|
variant | TableVariant | Line | 外枠・区切り線の見た目（table.rs「variant について」節）。 |
|---|
size | Size | Md | セルの padding/font-size（table.rs「variant について」節）。 |
|---|
striped | bool | false | 縞模様表示の有無（table.rs「striped の実装」節）。 |
|---|
sticky_header | bool | false | column-header（th）を position: sticky にする（イシュー #1571、table.rs「sticky ヘッダーの実装」節）。 |
|---|
interactive | bool | false | row に bg-muted の hover 背景を付ける（イシュー #2052、table.rs「interactive 軸（行 hover）」節）。 |
|---|
Data Attributes
| Part | Attribute | Observed Values |
|---|
cell | data-align | end |
column-header | data-align | end |
row | data-selected | （値なし） |
CSS Variables
| Variable | Default |
|---|
--fandhe-table-cell-padding | var(--fandhe-space-3) var(--fandhe-space-4) |
--fandhe-table-font-size | var(--fandhe-font-font-size-sm) |
--fandhe-table-header-bg | var(--fandhe-color-bg) |
--fandhe-table-header-position | static |
--fandhe-table-last-row-border | — |
--fandhe-table-row-border | none |
--fandhe-table-row-hover-bg | — |
--fandhe-table-scroll-max-height | none |
--fandhe-table-sticky-offset | 0 |
--fandhe-table-stripe-bg | transparent |
Examples
Striped
striped=true・header/body を組み合わせた例です。
Selectable rows
interactive=true と行の data-selected を組み合わせた例です（イシュー #2052）。
column_header/cell の data-align="end" で金額列を右寄せし、footer に合計行を持たせた例です（イシュー #2052）。
scroll_area で包み、sticky_header=true と組み合わせた例です（イシュー #1572）。
Accessibility
WAI-ARIA
| Attribute | Description |
|---|
| scope="col"（column-header） | column_header が固定付与するテーブル見出しの意味論属性（呼び出し側の偽装は除去、table.rs セキュリティ不変条件節）。role/aria-* 自体はネイティブ table 要素の意味論に委ねており固有の出力はない。 |
| aria-sort（column-header、呼び出し側付与） | ソート状態の意味論属性。table.rs は通過させるのみで生産しない（生産は headless data-table〔#2124〕の責務、イシュー #2052、table.rs「スコープ外」節）。 |