Table
Props
Table props
fixedHead
falsetrue
true のとき、スクロール時にヘッダーを固定表示する
children
stringnumberfalsetrueReactElement<any, string | JSXElementConstructor<any>>Iterable<ReactNode>ReactPortal
テーブルの内容
className
string
コンポーネントに適用するクラス名
Th props
sort
"desc""none""asc"
並び替え状態
onSort
() => void
並び替えをクリックした時に発火するコールバック関数
decorators
{ sortDirectionIconAlt: (text: string, { sort }: { sort: "desc" | "none" | "asc"; }) => ReactNode; }
文言を変更するための関数
fixed
falsetrue
true のとき、TableReel内で固定表示になる
ThCheckbox props
lineHeight
number
mixed
falsetrue
error
falsetrue
decorators
DecoratorsType<"checkAllInvisibleLabel">
Td props
nullable
falsetrue
true のとき、セル内が空であれば "----" を表示する
fixed
falsetrue
true のとき、TableReel内で固定表示になる
TdCheckbox props
mixed
falsetrue
true のとき、チェック状態を mixed にする
error
falsetrue
チェックボックスにエラーがあるかどうか
lineHeight
number
ラベル部分の line-height
aria-labelledby必須
string
値を特定するための行 id
children
stringnumberfalsetrueReactElement<any, string | JSXElementConstructor<any>>Iterable<ReactNode>ReactPortal
aria-labelledby では特定できない場合に補足するための不可視ラベル
アクセシビリティ
行を選択するチェックボックスのラベル
<TdCheckbox>を用いてaria-labelledbyで行のオブジェクトを識別するためのテキストを参照してください。
<tr key={key}><TdCheckbox aria-labelledby={object.id} /><Td><a href={`/hoge/${object.id}`} id={object.id}>{name}</a></Td>...</tr>