Table

Props

Table props

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

Th props

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

Td props

Name	Required	Type	Description
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>