SmartHR Design System

Table

表形式でデータを表示するためのコンポーネントです。
他のコンポーネントと組み合わせることが多いため、具体的な使用方法はよくあるテーブルを参照してください。

アクセシビリティ

行を選択するチェックボックスやラジオボタンのラベル

<TdCheckbox>や<TdRadioButton>を用いてaria-labelledbyで行のオブジェクトを識別するためのテキストを参照してください。

モバイル

モバイルでは、画面幅を越えたテーブルは2次元スクロールを招くため、垂直方向に積みあげることを推奨します。

Props

Table props

borderType
"both" "horizontal" "vertical" "all" "outer"
borderStyle
"solid" "dotted" "dashed"
rounded
false true
layout
"auto" "fixed"
fixedHead
false true

Th props

sort
"desc" "none" "asc"

並び替え状態

onSort
() => void

並び替えをクリックした時に発火するコールバック関数

fixed
"left" "right"

横スクロール時、カラムを左右いずれかに固定

decorators
{ sortDirectionIconAlt: (text: string, { sort }: { sort: sortTypes; }) => ReactNode; }

文言を変更するための関数

contentWidth
string number
align
"left" "right"
vAlign
"middle" "bottom" "baseline"

ThCheckbox props

error
false true
mixed
false true
decorators
DecoratorsType<"checkAllInvisibleLabel"> & { checkColumnName?: (text: string) => string; }
vAlign
"middle" "bottom" "baseline"
fixed
"left" "right"

Td props

align
"left" "right"
vAlign
"middle" "baseline"
nullable
false true
fixed
"left" "right"

横スクロール時、カラムを左右いずれかに固定

contentWidth
string number { base?: CellContentWidth; min?: CellContentWidth; max?: CellContentWidth; }

TdCheckbox props

aria-labelledby必須
string

値を特定するための行 id

error
false true

チェックボックスにエラーがあるかどうか

mixed
false true

true のとき、チェック状態を mixed にする

vAlign
"middle" "baseline"
fixed
"left" "right"

TdRadioButton props

aria-labelledby
string

値を特定するための行 id Identifies the element (or elements) that labels the current element. @see aria-describedby.

vAlign
"middle" "baseline"

TableReel props

ref
(instance: HTMLDivElement) => void RefObject<HTMLDivElement>

BulkActionRow props

ref
(instance: HTMLTableRowElement) => void RefObject<HTMLTableRowElement>

WakuWakuButton props

Propsは設定されていません。

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 "X3S" "XXS" "XS" "S" "M" "L" "XL" "XXL" "X3L" { vertical?: Gap; horizontal?: Gap; }

境界とコンテンツの間の余白

ref
(instance: HTMLTableSectionElement) => void RefObject<HTMLTableSectionElement>

関連リンク