Skip to content
fandhe-frontendcore v0.4.3
GitHub

Data Table

fandhe-frontend-pre-styled-ui の data_table mod が提供するスタイル済み Data Table 部品です。shadcn/ui Data Table 相当の表操作 UI で、Root / Toolbar / Column Header / Sort Trigger / Select All / Select Row / Footer / Selection Count の 8 パーツ構成です。

見た目 variant（ColorPalette / Size 等の軸）は持ちません。data-loading / data-empty / data-sort / data-state / data-hidden は headless 層が出力する data-* を CSS セレクタとして参照するだけで、class ベースの軸を持ちません。

表本体（<table> / <thead> / <tbody> / <tr>）は新規に作らず、既存の table mod をそのまま使います。列ヘッダー・セル・行の表示状態（ソート・列非表示・行選択）は column_attrs / column_header_attrs / row_attrs（node を作らない属性ヘルパ）を table::column_header / table::cell / table::row の attrs へ渡すことで合成します。本部品自身の column_header / sort_trigger（th / button ノードを実際に生成するパーツ）は自前で表を組み立てる利用者向けであり、table mod と組み合わせる Themes 推奨経路の Demo には現れません。select_all / select_row は <table> セル階層に直接載る th / td であるため、Themes 経路でもそのまま使います。

sort_trigger は現在のソート方向に応じて ▲ / ▼ / ↕ のアイコンを ::after で表示します。選択行の背景は table の row パーツが持つ data-selected 規則をそのまま利用し、本部品は独自の行背景規則を持ちません。

行の並べ替え・フィルタ・ページング処理そのもの、選択結果の保持・送信・永続化、列定義・列順の永続化はこの部品では実装しません（アプリケーション側が Rust コードで処理し、結果を表示状態として渡す設計です）。fandhe-frontend-wasm-full 側の DOM 配線（sort-trigger click → dispatch・列表示切替・ページング等）も別イシューで担当します。

関連 API: fandhe-frontend-pre-styled-ui API / fandhe-frontend-headless-ui API

Demo

root/toolbar/column-header/sort-trigger/select-all/select-row/footer/selection-count の 8 パーツ構成。ColorPalette/Size 等の軸は持たず、data-loading/data-empty/data-sort/data-state/data-hidden は headless の data-* を参照するのみです。表本体は table mod をそのまま使い、column_header_attrs/row_attrs を table::column_header/table::row の attrs へパススルーします（Themes 推奨経路）。

Filter by name...
Email
Role
AliceAdmin
BobMember
1 of 2 row(s) selected.
∅
No results
No rows match the current filter.

Features

  • root/toolbar/column-header/sort-trigger/select-all/select-row/footer/selection-count の 8 パーツで表操作 UI を構造化する（crates/pre-styled-ui/src/data_table.rs）
  • ColorPalette/Size 等の見た目 variant を持たない（data_table.rs モジュール doc「軸を持たない理由」節）
  • column_attrs/column_header_attrs/row_attrs（node を作らない属性ヘルパ）を table::column_header/table::cell/table::row の attrs へパススルーする Themes 推奨経路を持つ（表本体は table mod をそのまま使い、新規に <table> を作らない）
  • sort_trigger は data-sort（none/ascending/descending）に応じて ▲/▼/↕ を ::after で表示する（raw CSS 追記、data_table.rs モジュール doc「ソート方向アイコンを raw CSS ::after で表現する理由」節）
  • 選択行の背景は table の row パーツが持つ data-selected 規則（イシュー #2052）をそのまま利用し、本部品は独自の行背景規則を持たない
  • data-loading/data-empty/data-sort/data-state/data-hidden は headless の data-* を参照するのみで class ベースの軸を持たない
  • 行の並べ替え・フィルタ・ページング処理そのもの、選択結果の保持・送信・永続化、列定義・列順の永続化は実装しない（docs/policy/intentional-non-adoption.md §3.25 規則 1。fandhe-frontend-wasm-full 側の DOM 配線は別イシュー #2126）

Anatomy

root
  toolbar
  sort-trigger
  footer
    selection-count

API Reference

Arguments

NameTypeDefaultDescription
root.props.loadingboolfalsetrue の場合 data-loading + aria-busy="true" を付与する。
root.props.emptyboolfalsetrue の場合 data-empty を付与する。
column_header.sortableboolfalsetrue の場合のみ aria-sort/data-sort を出力する（false の列は非ソート列として扱う）。
sort_trigger.id&str—対象列 id。data-value として出力され、fandhe-frontend-wasm-full の MAPPING_TABLE が読む契約。
select_all.state / select_row.stateCheckedStateUnchecked全選択/行選択チェックボックスの表示状態（data-state として出力）。選択集合の保持は行わない。
column_toggle_item.column&ColumnProps—列表示切替 1 項目の対象列。checked = !column.hidden として表示する。

Data Attributes

PartAttributeObserved Values
rootdata-empty（値なし）
rootdata-loading（値なし）
sort-triggerdata-sortascending
sort-triggerdata-valuename

CSS Variables

VariableDefault
--fandhe-data-table-cell-paddingvar(--fandhe-space-3) var(--fandhe-space-4)
--fandhe-data-table-empty-min-height—
--fandhe-data-table-gapvar(--fandhe-space-3)
--fandhe-data-table-row-border1px solid var(--fandhe-color-border-muted)
--fandhe-data-table-select-width2.5rem

Examples

Sorted (descending)

sort_trigger を降順で表示する例です。

Carol

Column toggle item

列表示切替メニューの 1 項目（Menu の checkbox item の薄いラッパ）の例です。

Email

Accessibility

Keyboard Interactions

KeyDescription
Tab / Enter / Spacesort_trigger はネイティブ button（Tab で移動、Enter/Space で押下）。column_toggle_item・select_all/select_row に入れ子にする checkbox/menu のキー操作はそれぞれの部品のものを継承する。

WAI-ARIA

AttributeDescription
scope="col" (column_header / select_all)列見出しの WAI-ARIA/HTML 意味論を固定付与する。
aria-sort (column_header)none/ascending/descending/other の 4 値。sortable=false の列には付与しない。
aria-busy="true" (root、loading 時)データ読み込み中であることを示す。
(付与しない) role="toolbar"矢印キー roving focus の配線義務が生じるため意図的に不採用（data_table.rs headless 側モジュール doc「参照競合の判定」節、shadcn/ui も素の flex div を使う）。
(付与しない) aria-live選択件数（selection_count）は頻繁に変わり得るため自動読み上げを冗長にしないよう付与しない（必要ならアプリ側で付与する）。