Name | Required | Type | Description |
---|
fixedHead | - | false ,
true | `true` のとき、スクロール時にヘッダーを固定表示する |
children | - | string ,
number ,
false ,
true ,
{} ,
ReactElement<any, string | JSXElementConstructor<any>> ,
Iterable<ReactNode> ,
ReactPortal | テーブルの内容 |
className | - | string | コンポーネントに適用するクラス名 |
Name | Required | Type | Description |
---|
highlighted | - | false ,
true | `true` のとき、セルの色をハイライトする |
children | - | string ,
number ,
false ,
true ,
{} ,
ReactElement<any, string | JSXElementConstructor<any>> ,
Iterable<ReactNode> ,
ReactPortal | セルの内容 |
onClick | - | () => void | セルをクリックした時に発火するコールバック関数 |
Name | Required | Type | Description |
---|
nullable | - | false ,
true | `true` のとき、セル内が空であれば "----" を表示する |
children | - | string ,
number ,
false ,
true ,
{} ,
ReactElement<any, string | JSXElementConstructor<any>> ,
Iterable<ReactNode> ,
ReactPortal | セルの内容 |
行を選択するチェックボックスには同じセル内にラベルを配置できないため、同じ行の中のいずれかのテキストを参照します。
行のオブジェクトを識別するためのテキストがある場合はそれを参照してください。
参照には<label>
を用いても良いですが、識別するためのテキストはオブジェクト詳細へのリンクとなることも多いため aria-labelledby
を用いるのが良いでしょう。
<Row key={key}>
<CheckBoxCell>
<CheckBox aria-labelledby={object.id} />
</CheckBoxCell>
<Cell>
<a href={`/hoge/${object.id}`} id={object.id}>{name}</a>
</Cell>
...
</Row>