Table

table要素の代替として表形式でデータを表示するためのコンポーネントです。データを行列で一覧表示するとき、レコードを並べて比較するビューを提示するときに使います。

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

アクセシビリティ

開発時の考慮点

セル内にチェックボックスやラジオボタンをそのまま配置しない

<Td><Checkbox /></Td>、<Th><Checkbox /></Th>、および<Td><RadioButton /></Td>などのように、セルの内部にチェックボックスやラジオボタンをそのまま配置してはいけません。それぞれの場合でTdCheckbox、ThCheckbox、およびTdRadioButtonという専用のコンポーネントが提供されているため、代わりにこれらを利用してください。

これらの専用のコンポーネントを利用せずにチェックボックスやラジオボタンを配置すると、アクセシブルネームが設定されず、ガイドラインの「フォームパーツにアクセシブルネームがある」に違反するおそれがあります。

なお、チェックボックスおよびラジオボタンのアクセシブルネームについてはeslint-plugin-smarthr別タブで開くのルールsmarthr/a11y-prohibit-checkbox-or-radio-in-table-cell別タブで開くを用いることで自動的に検証できます。

TdCheckboxおよびTdRadioButtonでは行を特定できる要素をIDで参照する

TdCheckboxおよびTdRadioButtonを利用する場合は、aria-labelledby属性を必ず指定しなければなりません。この属性には、それだけで行を一意に判別できる要素へのID参照を指定します。多くのオブジェクトでは、この属性値はしばしばオブジェクト名へのID参照になるでしょう。

オブジェクト名だけでは一意に判別できない可能性があるオブジェクトでは、オブジェクトの情報を含む複数の要素のID参照をスペース区切りで指定しなければなりません。例えば、従業員は同姓同名の人物が在籍する場合もあることから、以下のように社員番号と組み合わせます。

BulkActionRowではTertiaryボタンを使用する

BulkActionRow内で「すべてのオブジェクトを選択」や「選択解除」ボタンを実装する際は、必ずButtonコンポーネントのvariant="tertiary"を使用してください。

Buttonのvariant="tertiary"を使用することで、BulkActionRowの背景色に対してコントラスト比4.5:1を確保できるように内部的に実装されているため、視覚的に見やすくなります。

モバイル

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

よくあるテーブルの「モバイル」セクションを参照し、レイアウトに応じてListコンポーネント（WIP）への置き換えを検討してください。

使い方チェックリスト

Table

参照元：アクセシビリティ > 開発時の考慮点 > セル内にチェックボックスやラジオボタンをそのまま配置しない 「アクセシビリティ > 開発時の考慮点 > セル内にチェックボックスやラジオボタンをそのまま配置しない」の本文へ移動

• Avoid

  セルの内部に Checkbox や RadioButton をそのまま配置せず、TdCheckbox / ThCheckbox / TdRadioButton を利用する

参照元：アクセシビリティ > 開発時の考慮点 > TdCheckboxおよびTdRadioButtonでは行を特定できる要素をIDで参照する 「アクセシビリティ > 開発時の考慮点 > TdCheckboxおよびTdRadioButtonでは行を特定できる要素をIDで参照する」の本文へ移動

• Must

  TdCheckbox および TdRadioButton を利用する場合は `aria-labelledby` 属性を必ず指定し、それだけで行を一意に判別できる要素への ID 参照を指定する
• Must

  オブジェクト名だけで一意に判別できないオブジェクトでは、複数の要素の ID 参照をスペース区切りで指定する

Props

Table props

Th props

ThCheckbox props

Td props

TdCheckbox props

TdRadioButton props

BulkActionRow props

EmptyTableBody props

関連リンク

• よくあるテーブル