SmartHR Design System

Table

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

StorybookGitHub
別画面で開く
ドラッグして幅を変更
ドラッグして高さを変更

アクセシビリティ

行を選択するチェックボックスのラベル

<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
align
"left""right"
fixed
falsetrue

ThCheckbox props

mixed
falsetrue
error
falsetrue
decorators
DecoratorsType<"checkAllInvisibleLabel">

Td props

align
"left""right"
fixed
falsetrue
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>

関連リンク