テーブル/データテーブル(概要)

テーブルは、データや情報を行と列の組み合わせで構造化された表組です。
データや情報を分かりやすく提示するためのテーブルと、システム画面で大量のデータを操作・管理するためのデータテーブルに大別されます。
ユースケース
構造化されたデータや情報を表示するとき
行と列を使用し整理することで、データや情報をわかりやすく提示できます。
データを比較するとき
各項目を並べて提示することで、データ同士を比較しやすくなります。
大量のデータを一覧表示するとき
大量のデータを効率的に表示しながら、選択・編集・並び替え等のさまざまな操作に対応します。(データテーブル)
注意が必要なケース
単なる名前–値のペアは説明リスト要素を使う
行と列で表現する必要のないシンプルな情報には、説明リスト要素(今後提供予定)を使用します。
レイアウト目的では使用しない
テーブルは表組のためのコンポーネントです。レイアウトのために使用しないでください。
関連コンポーネント
各種リソース
種別 | リソース | 状態 |
---|---|---|
デザイン | デザインデータ(Figma) | 提供中 |
実装 | ソースコード(HTML+CSS) | 提供中 |
サンプル(HTML+CSS) | 提供中 | |
ソースコード(React+Tailwind CSS) | 提供中 | |
サンプル(React+Tailwind CSS) | 提供中 |