テーブル内の一括操作

よくあるテーブルで複数のオブジェクトに対して一括操作するUIのパターンです。

構成

「よくあるテーブル」のなかで、複数オブジェクトへの一括操作に関するUIは、以下の要素で構成されます。
テーブル内のその他の要素については、「よくあるテーブル」の構成を参照してください。

テーブル内の要素をすべて選択できるチェックボックスです。

デフォルトは未選択状態で、クリックされるとテーブルに表示されているオブジェクトをすべて選択状態にします。表示しているページ外のオブジェクト（他のページのオブジェクト）は選択状態にしません。

「一括選択するチェックボックス」が未選択状態のときに、テーブル内のオブジェクトが1つ以上選択された場合（選択状態と未選択状態が混ざっている場合）は、「一括選択するチェックボックス」を混在選択状態（mixed=true）にします。

「一括選択するチェックボックス」の選択状態を解除すると、「わくわくチェック」の選択解除と同様にテーブルのページ送り上も含めたすべての選択状態を解除します。

混在選択状態（mixed=true）で「一括選択するチェックボックス」をクリックした場合も同様に、すべての選択状態を解除します。

テーブル内のオブジェクトを個別選択できるチェックボックスです。

ページ送りによって他のページに遷移された場合は、選択状態は維持せずにすべてのオブジェクトの選択状態を解除します。

テーブル内で選択されたオブジェクトに対して一括操作を配置するエリアです。 SmartHR UIではこのエリアをBulkActionRowと呼んでいます。

原則として、「一括選択するチェックボックス」または「個別選択するチェックボックス」が1つ以上選択されている場合に表示します。

テーブル内でオブジェクトの選択状態を示すテキストです。

オブジェクトの選択状態にあわせたライティングパターンは以下のとおりです。

オブジェクトの選択状態	テキストに表示する文言
未選択	`{オブジェクト名}が選択されていません。`
複数選択されている	`{件数}件の{オブジェクト名}が選択されています。`
表示されているものすべてが選択されている	`このページの{オブジェクト名}{件数}件すべてが選択されています。`
テーブルのページ送り上のすべてが選択されている	`一覧の{オブジェクト名}{件数}件すべてが選択されています。`

複数のページに分けてオブジェクトを表示する際に、ページの枠を超えてオブジェクトを選択できるUIを「わくわくチェック」と呼んでいます。

具体的な動作については、わくわくチェックの動作を参照してください。

データの削除・一括変更など、選択したオブジェクトを一括で操作するためのボタンです。
BulkActionRow内の要素として配置します。

Buttonや、類似する操作をまとめたDropdownButtonを配置できます。
ユーザーが迷わないよう、配置するボタンは多くても4つ程度とします。多数の操作ができる場合には、アクションの優先度を検討し、優先度が低いアクションは減らしたり、ドロップダウンボタンとしてまとめて配置するなどを検討しましょう。

ここに配置される典型的な一括操作ボタンの例は以下のとおりです。
以下に限らず、データの追加・一括変更など、扱う機能やユースケースによって配置できます。

基本的に余白の取り方に従って配置します。
テーブル内の一括操作エリアの要素間の余白は以下のとおりです。

わくわくチェック の動作パターンは次のとおりです。

オブジェクトが1つ以上選択されたときに 一覧のすべてのオブジェクトを選択 というテキストリンクを表示し、ユーザーがテーブルのページ送り上のすべてのオブジェクトを選択できるようにします。

わくわくチェック のオブジェクト選択中は、ユーザー自身で元の状態に戻せるように 一覧のすべてのオブジェクトを選択 のテキストリンクを 選択解除 に置き換え、（ページ送りも含めた）すべてのオブジェクトの選択状態を解除できるようにします。

また、わくわくチェック のオブジェクト選択中に、ページ送りによって他のページに遷移された場合は、選択状態は維持せずにすべてのオブジェクトの選択状態を解除する動作に統一します。