テーブル内の一括操作
テーブルの複数行を選択して一括で操作するパターン。チェックボックスによる選択 UI と、選択状態に応じて変化する操作エリアで構成する。
構成
3 つの要素で一括操作 UI を組み立てる。
一括選択チェックボックス（ヘッダー行）
- テーブルヘッダーの左端に置く。クリックで表示ページ内のすべてを選択・解除する
- 一部の行だけ選択されている場合は混在状態（indeterminate）で表示する
- 全解除時は、ページをまたぐ選択もすべて解除する
個別選択チェックボックス（各行）
- 各行の左端に置く。デフォルトは未選択
- ページ移動時は選択状態をリセットする
一括操作エリア（BulkActionRow）
- テーブルの上部に配置し、1 件以上選択されたときに表示する（または常時表示のどちらかを選ぶ）
- 選択件数テキスト・全選択リンク・一括操作ボタンを含む
- 一括操作ボタンは最大 4 つまで。それ以上は「その他の操作」でまとめる
ライティングルール
選択状態に応じてテキストを変える。
| 状態 | 表示テキスト例 |
|---|---|
| 未選択 | 顧客が選択されていません |
| 複数選択 | 3 件の顧客が選択されています |
| このページをすべて選択 | このページの 50 件すべてが選択されています |
| 全件選択 | 一覧の 8,477 件すべてが選択されています |
全選択の動作
ページ内選択と全件選択は段階的に行う。
- ページ全選択後: 「一覧の ○○ 件すべてを選択」リンクを表示し、全件選択に進める
- 全件選択中: リンクが「選択解除」に変わり、ページをまたぐすべての選択を解除できる
- ページ移動時: 全選択状態は自動でリセットする