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参照をスペース区切りで指定しなければなりません。例えば、従業員は同姓同名の人物が在籍する場合もあることから、以下のように社員番号と組み合わせます。

モバイル

モバイルでは、画面幅を越えたテーブルは2次元スクロールを招くため、垂直方向に積みあげることを推奨します。
よくあるテーブルの「モバイル」セクションを参照し、レイアウトに応じてListコンポーネント（WIP）への置き換えを検討してください。

Props

Table props

Th props

ThCheckbox props

Td props

TdCheckbox props

TdRadioButton props

BulkActionRow props

WakuWakuButton props

Propsは設定されていません。

EmptyTableBody props

関連リンク

• よくあるテーブル