Skip to content
fandhe-frontend
GitHub

Table

fandhe-frontend-pre-styled-uitable mod が提供するスタイル済み Table 部品です。

表形式データを表示する部品です。TableVariant(Line/Outline)で外枠・区切り線を、striped(bool)で縞模様表示を切り替えます。column_header は scope="col" を関数側で固定し呼び出し側の偽装を除去します。

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

Demo

table/thead/tbody/tfoot/tr/th/td/caption の HTML 意味論を尊重した表組み。variant(line / outline)・size(sm / md / lg)・striped の 3 軸 variant を持ちます。

登録済みユーザー一覧
NameEmailRole
Alicealice@example.comAdmin
Bobbob@example.comMember
Carolcarol@example.comMember
登録済みユーザー一覧
NameEmailRole
Alicealice@example.comAdmin
Bobbob@example.comMember
Carolcarol@example.comMember
登録済みユーザー一覧
NameEmailRole
Alicealice@example.comAdmin
Bobbob@example.comMember
Carolcarol@example.comMember
登録済みユーザー一覧
NameEmailRole
Alicealice@example.comAdmin
Bobbob@example.comMember
Carolcarol@example.comMember
登録済みユーザー一覧
NameEmailRole
Alicealice@example.comAdmin
Bobbob@example.comMember
Carolcarol@example.comMember

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
      cell

API Reference

Arguments

NameTypeDefaultDescription
variantTableVariantLine外枠・区切り線の見た目(table.rs:128-152)。
sizeSizeMdセルの padding/font-size(table.rs:130-131)。
stripedboolfalse縞模様表示の有無(table.rs:132-143)。

CSS Variables

VariableDefault
--fandhe-table-cell-padding0.75rem 1rem
--fandhe-table-font-sizevar(--fandhe-font-font-size-sm)
--fandhe-table-row-bordernone
--fandhe-table-stripe-bgtransparent

Examples

Striped

striped=true・header/body を組み合わせた例です。

Name
Alice

Accessibility

WAI-ARIA

AttributeDescription
scope="col"(column-header)column_header が固定付与するテーブル見出しの意味論属性(呼び出し側の偽装は除去、table.rs セキュリティ不変条件節)。role/aria-* 自体はネイティブ table 要素の意味論に委ねており固有の出力はない。