SmartHR Design System

Table

表形式でデータを表示するためのコンポーネントです。

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

Props

Table props

fixedHead
falsetrue

true のとき、スクロール時にヘッダーを固定表示する

Th props

sort
"desc""none""asc"

並び替え状態

onSort
() => void

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

decorators
{ sortDirectionIconAlt: (text: string, { sort }: { sort: "desc" | "none" | "asc"; }) => ReactNode; }

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

fixed
falsetrue

true のとき、TableReel内で固定表示になる

ThCheckbox props

mixed
falsetrue
error
falsetrue
decorators
DecoratorsType<"checkAllInvisibleLabel">

Td props

fixed
falsetrue
nullable
falsetrue

TdCheckbox props

children
stringnumberfalsetrueReactElement<any, string | JSXElementConstructor<any>>Iterable<ReactNode>ReactPortal

aria-labelledby では特定できない場合に補足するための不可視ラベル

aria-labelledby必須
string

値を特定するための行 id

mixed
falsetrue

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

error
falsetrue

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

アクセシビリティ

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

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

<tr key={key}>
  <TdCheckbox aria-labelledby={object.id} />
  <Td>
    <a href={`/hoge/${object.id}`} id={object.id}>{name}</a>
  </Td>
  ...
</tr>