Table
表形式でデータを表示するためのコンポーネントです。
他のコンポーネントと組み合わせることが多いため、具体的な使用方法はよくあるテーブルを参照してください。
アクセシビリティ
行を選択するチェックボックスのラベル
<TdCheckbox>を用いてaria-labelledbyで行のオブジェクトを識別するためのテキストを参照してください。
Props
Table props
borderType
"horizontal" "both"
layout
"auto" "fixed"
fixedHead
false true
Th props
sort
"desc" "none" "asc"
並び替え状態
onSort
() => void
並び替えをクリックした時に発火するコールバック関数
decorators
{ sortDirectionIconAlt: (text: string, { sort }: { sort: "desc" | "none" | "asc"; }) => ReactNode; }
文言を変更するための関数
contentWidth
string number
fixed
false true
align
"left" "right"
vAlign
"baseline" "middle" "bottom"
ThCheckbox props
mixed
false true
error
false true
decorators
DecoratorsType<"checkAllInvisibleLabel"> & { checkColumnName?: (text: string) => string; }
vAlign
"baseline" "middle" "bottom"
Td props
fixed
false true
align
"left" "right"
vAlign
"baseline" "middle"
nullable
false true
contentWidth
string number { base?: CellContentWidth; min?: CellContentWidth; max?: CellContentWidth; }
TdCheckbox props
aria-labelledby必須
string
値を特定するための行 id
mixed
false true
true のとき、チェック状態を mixed にする
error
false true
チェックボックスにエラーがあるかどうか
vAlign
"baseline" "middle"
TableReel props
ref
(instance: HTMLDivElement) => void RefObject<HTMLDivElement>
BulkActionRow props
ref
(instance: HTMLTableRowElement) => void RefObject<HTMLTableRowElement>
EmptyTableBody props
padding
0 0.25 0.5 0.75 1 1.25 1.5 2 2.5 3 3.5 4 8 -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) => void RefObject<HTMLTableSectionElement>