Selection and bulk actions

Act on several rows at once: the floating bar of our plugins, and the bar inside the table where a floating one does not fit.

When the same action is needed on many rows (hide twenty courses, remove fifteen participants), doing it one by one is a punishment. The selection pattern lets the user pick rows and act on all of them from one bar. In our plugins that bar is floating: it follows the user at the bottom of the window, so it is always at hand however long the list is.

When to use it

• The list has actions that make sense for several rows (hide, move, delete, export).
• Users really do these in numbers. If they act on one row at a time, row actions are enough.

Anatomy

1. Checkbox column (table-select): a checkbox per row and one in the header that selects the rows of the page.
2. Selected rows keep a tint (table-active) so the selection is visible at a glance. The tint is the only change: a selected row does not react to the pointer any differently from the others.
3. Floating bar (dd-floatbar): centred at the bottom of the window, a card with the count in bold, the actions as tonal buttons and a clear button at the end.

Copy

The example draws the bar in the flow of the page (dd-floatbar-static); on a real page it is fixed 1.5 rem above the bottom edge.

Behaviour

1. The bar appears with the first selected row and goes away when the last one is unchecked or when the user clears the selection. It slides in; it never moves the table.
2. The checkbox of the header selects the rows of the current page and shows a mixed state when only some are selected. When the page is selected and the list has more, the bar offers “Select all 48” next to the count.
3. The actions are the same as the row actions, in the same order, with their label: in a bar there is room for words. The destructive one is last, in the danger tone.
4. A destructive action confirms with the quantity (“Delete 3 courses?”) and, where it can be undone, offers “Undo” afterwards (see “Confirm, do and undo”).
5. After an action the selection is cleared and the result is announced.
6. Changing the filter, the search or the page clears the selection, unless “all” was chosen deliberately.
7. The bar never covers the pager: the page leaves room at its foot while the bar is shown.

The bar inside the table

Where a floating bar does not fit (a dialog, a side panel, a small card), the bar takes the place of the toolbar of the table while there is a selection (table-toolbar-selection), with the same count and actions.

Copy

On Moodle 4.5 and 4.1 the floating bar is drawn the same way; where the theme of the site gives it a heavier shadow or other radius it is acceptable, as long as it keeps its position and its content.

Layout and spacing

States

• Loading after an action: the affected rows dim and the bar’s buttons are disabled.
• Partial failure: an alert above the table lists what failed (“2 of 3 courses could not be hidden”) and the failed rows stay selected so the user can retry.

Narrow screens

The bar wraps and is centred: count and clear on the first line, the actions below, with a radius like a card. Actions that do not fit go into a “More” dropdown, with the destructive one always last.

Accessibility

• The bar is a region with a label that says what it acts on; the count is a role="status" so each change is announced (“3 selected”).
• Each row’s checkbox has a label that names the row; the header’s names the scope (“Select all on this page”).
• The bar comes after the table in the tab order and appears without moving the focus.

Before shipping

• Every action of the bar also exists for a single row.
• “Select all N” says the real number.
• The destructive action confirms with the quantity.
• A partial failure is reported and can be retried.
• The bar does not cover the pager or the last row.