Table

Props

Table props

NameRequiredTypeDescription
fixedHead-false, true`true` のとき、スクロール時にヘッダーを固定表示する
children-string, number, false, true, ReactElement<any, string | JSXElementConstructor<any>>, ReactFragment, ReactPortalテーブルの内容
className-stringコンポーネントに適用するクラス名

Th props

NameRequiredTypeDescription
highlighted-false, true`true` のとき、セルの色をハイライトする
children-string, number, false, true, ReactElement<any, string | JSXElementConstructor<any>>, ReactFragment, ReactPortalセルの内容
onClick-() => voidセルをクリックした時に発火するコールバック関数

Td props

NameRequiredTypeDescription
nullable-false, true`true` のとき、セル内が空であれば "----" を表示する
children-string, number, false, true, ReactElement<any, string | JSXElementConstructor<any>>, ReactFragment, ReactPortalセルの内容

アクセシビリティ

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

行を選択するチェックボックスには同じセル内にラベルを配置できないため、同じ行の中のいずれかのテキストを参照します。 行のオブジェクトを識別するためのテキストがある場合はそれを参照してください。

参照には<label>を用いても良いですが、識別するためのテキストはオブジェクト詳細へのリンクとなることも多いため aria-labelledby を用いるのが良いでしょう。

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