本文へ移動
uiify

フレームワーク

Next.jsTanStack StartAstroVike

スタイル

CSSTailwind

テーマ

言語

English简体中文日本語العربيةРусскийEspañolPortuguês (Brasil)

Table

任意の対話的アダプターを追加できるネイティブのテーブル。

ブラウザー
Chrome 123+Firefox 121+Safari 17.5+
ティア
0
圧縮後のサイズ
617 B
強制レイアウトの上限
0 ms
axe の上限
0
SSR 対応
はい
公開された契約
テストハーネス

プレイグラウンド

Table

ネイティブのテーブルの例

チームメンバー
名前ロールステータス
Alice Chen管理者有効
Bob Smith編集者有効
Carol Lee閲覧者招待済み
3人のメンバー・2人が有効

並べ替え・絞り込み・展開

ロール詳細
Alice Chen管理者
Bob Smith編集者
Carol Lee閲覧者
3人のメンバー・0人を選択

固定するヘッダー・フッター・列

メンバー1編集者member1@example.com有効
メンバー2編集者member2@example.com有効
メンバー3編集者member3@example.com有効
メンバー4編集者member4@example.com有効
メンバー5編集者member5@example.com有効
メンバー6編集者member6@example.com有効
メンバー7編集者member7@example.com有効
メンバー8編集者member8@example.com有効
メンバー9編集者member9@example.com有効
メンバー10編集者member10@example.com有効
メンバー11編集者member11@example.com有効
メンバー12編集者member12@example.com有効
メンバー13編集者member13@example.com有効
メンバー14編集者member14@example.com有効
メンバー15編集者member15@example.com有効
メンバー16編集者member16@example.com有効
メンバー17編集者member17@example.com有効
メンバー18編集者member18@example.com有効
メンバー19編集者member19@example.com有効
メンバー20編集者member20@example.com有効
メンバー21編集者member21@example.com有効
メンバー22編集者member22@example.com有効
メンバー23編集者member23@example.com有効
メンバー24編集者member24@example.com有効
24人のメンバー

API

Table.Root (native)

Prop型既定値説明
layout"auto" | "fixed""auto"ネイティブのテーブルレイアウト。選択、並べ替え、展開には明示的なTableClientエントリーを使います。
size"sm" | "md" | "lg"—選択したスタイルシートによるセルの間隔。
variant"solid" | "outline" | "ghost"—選択したスタイルシートによるサーフェスのバリエーション。
renderReactElement | ((props, state) => ReactElement)—動作とアクセシビリティの接続を維持したまま、描画する要素を置き換えます。

Table.Footer

Prop型既定値説明
stickyboolean—フッターをスクロールコンテナーのブロック終端に固定します。
renderReactElement | ((props, state) => ReactElement)—動作とアクセシビリティの接続を維持したまま、描画する要素を置き換えます。

Table.RowHeader / Table.Cell / Table.ColumnHeader

Prop型既定値説明
align"start" | "center" | "end""start"このセルの論理方向でのテキスト配置。
sticky"start" | "end"—セルを論理インライン方向の端に固定します。固定セルが隣接する場合は、各セルに--uiify-table-sticky-offsetを設定します。
renderReactElement | ((props, state) => ReactElement)—動作とアクセシビリティの接続を維持したまま、描画する要素を置き換えます。

TableClient.ExpandTrigger / TableClient.ExpandedRow

Prop型既定値説明
rowId*string—展開ボタンとネイティブの<tr>をつなぐ共通の行キー。展開行の中に<td colSpan={columnCount}>を配置します。

TableClient.Root — @gunkin/uiify/components/table/client

Prop型既定値説明
aria-labelstring—可視のキャプションや見出しで名前を付けない場合の、テーブルのアクセシブルな名前。
aria-labelledbystring—テーブルのラベルとなる要素のID。
selectionMode"none" | "single" | "multiple""none"行を選択できるかと、同時に選択できる数。"none"はgridロールのない、通常の静的なテーブルを描画します。
selectionBehavior"toggle" | "replace"—行のクリックで選択に追加するか、現在の選択を置き換えるか。
defaultSelectedKeysIterable<string>—初期選択する行のID。選択はコンポーネント内部で非制御として管理します。
selectedKeysIterable<string>—現在選択している行のID。選択は呼び出し側が制御します。
onSelectionChange(selectedKeys: Set<string>) => void—選択が変わるたび、新しく選択した行IDの集合で呼び出します。
defaultSortDescriptorSortDescriptor | null—初期の並べ替え列と方向。並べ替え状態はコンポーネント内部で非制御として管理します。
sortDescriptorSortDescriptor | null—現在の並べ替え列と方向。並べ替えは制御されます。
onSortChange(descriptor: SortDescriptor | null) => void—並べ替え可能な列見出しを実行すると、新しい並べ替え記述子またはnullで呼び出します。
expandedKeys / defaultExpandedKeysIterable<string>—制御される、または初期の展開行キー。
onExpandedChange(keys: Set<string>) => void—展開の要求を通知します。制御される行はキーの更新を待ちます。
renderReactElement | ((props, state) => ReactElement)—動作とアクセシビリティの接続を維持したまま、描画する要素を置き換えます。

Table.Header

Prop型既定値説明
stickybooleanfalseこのセクションをスクロールコンテナーに固定します。Headerはブロック始端、Footerはブロック終端を使います。
renderReactElement | ((props, state) => ReactElement)—動作とアクセシビリティの接続を維持したまま、描画する要素を置き換えます。

Table.Body

Prop型既定値説明
childrenReactNode—テーブル本体の行。
renderReactElement | ((props, state) => ReactElement)—動作とアクセシビリティの接続を維持したまま、描画する要素を置き換えます。

Table.Row

Prop型既定値説明
id*string—選択キーと要素のIDに使う、安定した行ID。
disabledbooleanfalse行の選択と、キーボードによるフォーカスを防ぎます。
selectedboolean—選択ストアが管理を引き継ぐ前に、サーバーレンダリングしたマークアップで行を選択済みにします。
renderReactElement | ((props, state) => ReactElement)—動作とアクセシビリティの接続を維持したまま、描画する要素を置き換えます。

Table.ColumnHeader

Prop型既定値説明
id*string—並べ替え記述子が参照する列ID。
allowsSortingbooleanfalse見出しで列の並べ替えを切り替え、aria-sortを公開します。
sortDirection"ascending" | "descending" | null—この列に描画する並べ替え方向。並べ替えを許可する場合の初期サーバーマークアップに使います。
onClickReact.MouseEventHandler<HTMLTableCellElement>—並べ替え前に実行します。preventDefault()で並べ替えの変更を拒否できます。
childrenReactNode—見出しのラベル。
renderReactElement | ((props, state) => ReactElement)—動作とアクセシビリティの接続を維持したまま、描画する要素を置き換えます。

Table.Cell

Prop型既定値説明
childrenReactNode—セルの内容。
renderReactElement | ((props, state) => ReactElement)—動作とアクセシビリティの接続を維持したまま、描画する要素を置き換えます。

Table.Caption

Prop型既定値説明
childrenReactNode—テーブルを説明するキャプションのテキスト。
renderReactElement | ((props, state) => ReactElement)—動作とアクセシビリティの接続を維持したまま、描画する要素を置き換えます。

Table.RowSelect

Prop型既定値説明
rowId*string—このチェックボックスで選択・解除する行のID。

キーボード

キー操作
TabTableClientの並べ替え・選択・展開コントロールにフォーカス
Enter / Spaceフォーカス中の並べ替え・展開ボタンを実行、チェックボックスを切り替え
Arrow keysTableClient内の選択可能な本文行間を移動

アクセシビリティ

標準のTableは、クライアントJavaScriptなしでネイティブの<table>、<caption>、<thead>、<tbody>、<tfoot>を描画します。見出しのセマンティクスにはColumnHeaderとRowHeaderを使います。/clientエントリーは、並べ替え、選択、キーボードでの行移動、制御された展開を追加し、aria-sort、aria-expanded、aria-controlsで公開します。ExpandedRowはネイティブの<tr>です。内部にcolSpan付きのCellを配置してください。フィルタリングと並び順は利用側が管理します。

スタイリングのフック

data-uiify-tabledata-partdata-layoutdata-sizedata-variantdata-stickydata-selecteddata-disabled--uiify-table-sticky-offset
このページは機械翻訳によるもので、レビューは未実施です。