このページは、データテーブル (データグリッド) UI によくある要件についてまとめる予定のページです。
目次
注意
- このページを作ったひとが自分のためにまとめているため網羅性はありません。
一覧
表示系
| 項目 |
簡単な概要 |
| 表示件数の切り替え |
10件、100件など一度に表示するデータ数を変更できる。ほぼ必須 |
| ページネーション |
一度に表示するデータ数より全件数が多い時に表示位置を切り替えられる。ほぼ必須 |
| 検索 |
データの内容をもとにフィルタをかけることができる。全列対象の場合と各列対象の場合がある |
| 縦スクロール |
テーブルの高さを制限し、縦スクロールバーを用いてスクロールできる。ほぼ必須 |
| 横スクロール |
画面幅よりすべての列幅の合計が大きい場合に横スクロールバーを用いてスクロールできる。ほぼ必須 |
| レスポンシブ (Web のみ) |
スマートフォンで閲覧するときに表示が自動でスマートフォン用に調整される。
PC・スマートフォン両方で使用する場合に必要になる場合がある |
| エクスポート |
表示しているデータを CSV や Excel で出力できる。
データを Excel で加工 (グラフ表示等) するときに必要になる場合がある |
行
| 項目 |
簡単な概要 |
| 選択 (単一行・複数行) |
行の選択ができる。編集や削除操作に必要になる |
| チェックボックス |
1列目にチェックボックスを設け、チェック = 選択にする。列ヘッダのチェックで全選択・選択解除できる。 |
| クリック |
行をクリック = 1行選択、Shift + クリック = 複数行選択、Ctrl + クリック = 複数行選択 (飛び飛びで) できる。
ぱっと見で分かりづらいのでチェックボックスにしたほうがいいことが多い |
| グループ化 |
複数のデータをまとめて折りたたむことができる (例: Excel のピボットテーブル)。データが多いときに必要になる場合がある |
| 1データ複数行 |
1データ1行ではなく1データ2行などの表示ができる。列が多く、横スクロールで対応しづらいときに必要になる場合がある |
列
| 項目 |
簡単な概要 |
| ソート (単一列・複数列) |
データを昇順・降順で並び変えできる。単一列ソートはほぼ必須 |
| 固定 |
横スクロールしても特定の列を表示し続けることができる (例: Excel のウィンドウ枠の固定)。列が多いときに必要になる場合がある |
| リサイズ |
列幅をユーザーが変更できる。データの内容 (テキスト) が長いときに必要になる場合がある |
セル
| 項目 |
簡単な概要 |
| 書式 |
値を書式化して表示することができる (「10000」→「￥10,000」)。データを見やすくするために必須 |
| グラフ |
値を棒グラフなどで表示できる。データを見やすくするために必要になる場合がある |
編集系
| 項目 |
簡単な概要 |
| 行の追加 |
行が追加できる。UI 表現は別画面の場合とその場編集 (in-place edit) の場合がある。 |
| 行の編集 |
行が編集できる。UI 表現は同上。一括編集が必要になる場合がある |
| 行の削除 |
行が削除できる。複数行一括削除が必要になる場合がある |