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>

関連リンク