データテーブル
Data table行と列で構成されたデータを一覧表示し、並び替えなどの操作を伴うことが多い表形式の表示UI。
| ワイヤレスイヤホン | ¥8,800 | 42 | 2026-07-02 |
| メカニカルキーボード | ¥15,400 | 7 | 2026-08-01 |
| モバイルバッテリー | ¥3,200 | 120 | 2026-06-18 |
| 4Kモニター | ¥42,000 | 3 | 2026-08-10 |
| デスクライト | ¥5,600 | 65 | 2026-05-27 |
○ 使う場面
- 属性が多い項目同士を横並びで比較・走査させたいSaaSダッシュボードや管理画面
- 並び替え・絞り込みなど、データ操作を伴う一覧を扱うとき
× 避ける場面
- 画像が主役で、1件ごとの独立性を出したいとき(→カード)
- モバイル幅で列数が多く、横スクロールが常態化してしまうとき
別名
テーブル、データグリッド
近縁種との比較
「テーブル」の語源はラテン語で板や卓を意味する tabula で、古くから帳簿や台帳の記録に使われてきた「行と列で整理する」という発想を、そのまま画面上のデータ一覧に持ち込んだのがこのUIである。並び替えや絞り込みといった操作を伴うことが多い点は、紙の帳簿にはない特徴である。
| 近縁種 | 違い・使い分け |
|---|---|
| カード | カードが「1件=1枚の面」として独立性・視認性を優先するのに対し、データテーブルは行と列を揃えることで属性同士の横断的な比較・走査を優先する。画像が主役のコンテンツにはカード、数値や状態を多列で比較させたいSaaS管理画面にはデータテーブルが向く。 |
| 階層ツリー | 階層構造を持つデータについては、フラットな行の集合であるデータテーブルよりも、親子関係を開閉できる階層ツリーの方が適している。 |
分類
機能・役割
- ナビゲーション
- 入力・操作
- 表示・整理
- フィードバック・状態
表示レイヤー
- インライン
- 固定・追従
- オーバーレイ
- 全画面・遷移
複雑さ
- 単体パーツ
- 複合パーツ
- セクション