Table
表形式でデータを表示するためのコンポーネントです。
他のコンポーネントと組み合わせることが多いため、具体的な使用方法はよくあるテーブルを参照してください。
アクセシビリティ
行を選択するチェックボックスのラベル
<TdCheckbox>
を用いてaria-labelledby
で行のオブジェクトを識別するためのテキストを参照してください。
<tr key={key}><TdCheckbox aria-labelledby={object.id} /><Td><a href={`/hoge/${object.id}`} id={object.id}>{name}</a></Td>...</tr>
Props
Table props
layout
"auto""fixed"
fixedHead
falsetrue
Th props
sort
"desc""none""asc"
並び替え状態
onSort
() => void
並び替えをクリックした時に発火するコールバック関数
decorators
{ sortDirectionIconAlt: (text: string, { sort }: { sort: "desc" | "none" | "asc"; }) => ReactNode; }
文言を変更するための関数
contentWidth
stringnumber
fixed
falsetrue
align
"left""right"
ThCheckbox props
mixed
falsetrue
error
falsetrue
decorators
DecoratorsType<"checkAllInvisibleLabel"> & { checkColumnName?: (text: string) => string; }
Td props
fixed
falsetrue
align
"left""right"
nullable
falsetrue
contentWidth
stringnumber{ base?: CellContentWidth; min?: CellContentWidth; max?: CellContentWidth; }
TdCheckbox props
children
stringnumberfalsetrueReactElement<any, string | JSXElementConstructor<any>>Iterable<ReactNode>ReactPortal
aria-labelledby では特定できない場合に補足するための不可視ラベル
aria-labelledby必須
string
値を特定するための行 id
mixed
falsetrue
true
のとき、チェック状態を mixed
にする
error
falsetrue
チェックボックスにエラーがあるかどうか
TableReel props
ref
(instance: HTMLDivElement) => voidRefObject<HTMLDivElement>
BulkActionRow props
ref
(instance: HTMLTableRowElement) => voidRefObject<HTMLTableRowElement>
EmptyTableBody props
padding
00.250.50.7511.251.522.533.548-0.25-0.5-0.75-1-1.25-1.5-2-2.5-3-3.5-4-8"XXS""XS""S""M""L""XL""XXL""X3S""X3L"{ vertical?: Gap; horizontal?: Gap; }
境界とコンテンツの間の余白
ref
(instance: HTMLTableSectionElement) => voidRefObject<HTMLTableSectionElement>