Table
レスポンシブな overflow、密度、任意の行ストライプに対応する意味のあるデータテーブルです。
主なプロパティ
| プロパティ | 値 | 既定値 |
|---|---|---|
density | compact, comfortable, spacious | comfortable |
striped | true, false | false |
| parts | Root, Caption, Header, Body, Footer, Row, Head, Cell | compound API |
インストール
pnpm add @tinyrack/ui長い行はコード領域を横にスクロールして確認できます。
スタイル
@import '@tinyrack/ui/components/table.css';長い行はコード領域を横にスクロールして確認できます。
インポート
import { TRTable } from '@tinyrack/ui/components/table';長い行はコード領域を横にスクロールして確認できます。
プレイグラウンド
使用方法
例
密度 パーマリンク
対応するすべての density で同じコンテンツを表示します。
幅広い表のオーバーフロー パーマリンク
横スクロールのヒント、アクセシブル名、キーボードのフォーカス位置を用意すると、幅広い表を移動できます。
空の状態 パーマリンク
空のフィードバックは Body 内の Row と Cell に置き、colSpan で表示列をまたぎます。
API
TRTable.Root はネイティブ table を overflow container で包みます。キーボード利用者が広い table を移動する必要がある場合は、containerProps で領域にアクセシブルな名前と tabIndex={0} を付けます。containerRef は同じ wrapper を指し、通常の ref は引き続き <table> を指します。
| パーツ | ネイティブ要素と props |
|---|---|
TRTable.Root | <table> props に加えて density、striped、containerClassName、containerProps、containerRef を受け取ります。ref は table を指します。 |
TRTable.Caption | ネイティブ <caption> props。ref は caption を指します。table のアクセシブルなタイトルまたは説明に使用します。 |
TRTable.Header | ネイティブ <thead> props。ref は header group を指します。 |
TRTable.Body | ネイティブ <tbody> props。ref は body group を指します。 |
TRTable.Footer | ネイティブ <tfoot> props。ref は footer group を指します。 |
TRTable.Row | ネイティブ <tr> props。ref は row を指します。 |
TRTable.Head | ネイティブ <th> props。ref は header cell を指します。列見出しには scope="col"、行見出しには scope="row" を設定します。 |
TRTable.Cell | ネイティブ <td> props。ref は data cell を指します。colSpan、rowSpan、headers などのネイティブ属性を使用できます。 |