テーブル／データテーブル（使い方）

コンポーネント要素

テーブルヘッダーとデータセルは黒いボーダーで明確に区切り、ヘッダーセルのテキストは太字にしてください。 これにより、ヘッダーセルとデータセルを視覚的に判別できるようにします。

必要に応じて、行および／または列をストライプ表示にできます。 大きなテーブルやデータ密度の高いテーブルの視認性が向上します。
データセルが結合されている場合、ストライプ表示ができない場合があります。
- 行方向の結合（縦方向のセル結合）がある場合、行はストライプ表示できません。
- 列方向の結合（横方向のセル結合）がある場合、列はストライプ表示できません。
テーブルがストライプ表示を含む場合、背景色の有無に関わらずボーダーと背景色とのコントラスト比が3:1を下回らないよう留意してください。
hover時のハイライト表示は、「ホバーハイライト」を参照してください。

セル単位でリンクできます。
セルのリンクが1つの場合は、セル全体をリンク領域にできます。
セルのリンクが2つ以上の場合は、文字列ごとのリンクとします。 セル全体をリンク領域にすることはできません。
リンクの表示は、リンクテキストと同じ表現（下線付き青テキスト）です。 ただし、テーブルの大きさ等に応じて、下線なし青テキストまたは下線付き黒テキストで表現することもできます。
行全体をリンクにすることはできません。

テーブルヘッダーの先頭に、すべての行を選択するためのチェックボックスを追加できます。

テーブル内で選択済みの行と未選択の行が混在している場合、このチェックボックスはindeterminateプロパティを利用したマイナス記号表示になります。この状態でテーブルヘッダーのチェックボックスを選択した場合、すべての行が選択されます。

テーブルヘッダーには、以下のアクションを実装できます。

ソート（並べ替え）の機能が必要な場合は、クリックした列を基準に並べ替えを行います。

ソート可能な列のヘッダーセルを下線つきテキストで表示します。
ソートが可能であることを示すためにソートアイコンを表示します。
ソートアイコンは昇順を表す上向き矢印を強調したもの、降順を表す下向き矢印を強調したもの、およびどちらの矢印も強調されていないものがあり、ソートの状態に応じたソートアイコンを表示します。
ヘッダーセルのテキストおよびソートアイコンをクリッカブルエリアにしてください。

列に対する追加アクションを選択するメニューを格納できます。