データテーブル

Data table

行と列で構成されたデータを一覧表示し、並び替えなどの操作を伴うことが多い表形式の表示UI。

商品在庫一覧(列見出しをクリックすると並び替え)
ワイヤレスイヤホン¥8,800422026-07-02
メカニカルキーボード¥15,40072026-08-01
モバイルバッテリー¥3,2001202026-06-18
4Kモニター¥42,00032026-08-10
デスクライト¥5,600652026-05-27

○ 使う場面

  • 属性が多い項目同士を横並びで比較・走査させたいSaaSダッシュボードや管理画面
  • 並び替え・絞り込みなど、データ操作を伴う一覧を扱うとき

× 避ける場面

  • 画像が主役で、1件ごとの独立性を出したいとき(→カード)
  • モバイル幅で列数が多く、横スクロールが常態化してしまうとき

別名

テーブル、データグリッド

近縁種との比較

「テーブル」の語源はラテン語で板や卓を意味する tabula で、古くから帳簿や台帳の記録に使われてきた「行と列で整理する」という発想を、そのまま画面上のデータ一覧に持ち込んだのがこのUIである。並び替えや絞り込みといった操作を伴うことが多い点は、紙の帳簿にはない特徴である。

近縁種違い・使い分け
カードカードが「1件=1枚の面」として独立性・視認性を優先するのに対し、データテーブルは行と列を揃えることで属性同士の横断的な比較・走査を優先する。画像が主役のコンテンツにはカード、数値や状態を多列で比較させたいSaaS管理画面にはデータテーブルが向く。
階層ツリー階層構造を持つデータについては、フラットな行の集合であるデータテーブルよりも、親子関係を開閉できる階層ツリーの方が適している。

分類

機能・役割
  • ナビゲーション
  • 入力・操作
  • 表示・整理
  • フィードバック・状態
表示レイヤー
  • インライン
  • 固定・追従
  • オーバーレイ
  • 全画面・遷移
複雑さ
  • 単体パーツ
  • 複合パーツ
  • セクション