Bulk Actions Bar — Table Row Selection HTML CSS JS

Any table where users manage many records — subscribers, orders, files, tasks — needs bulk actions: select several rows, then email, export, or delete them all at once. The pattern that does this best is a floating action bar that stays hidden until something is selected, then slides up with the count and the available actions. This snippet builds that complete interaction in plain HTML, CSS, and vanilla JavaScript: row checkboxes, a header select-all with an indeterminate state, and a context bar that appears on demand.

A bar that appears only when relevant

The bulk-actions bar is hidden by default and slides up from the bottom of the table the instant one or more rows are selected, showing "N selected" and the action buttons. When the selection is cleared, it slides away. This "contextual toolbar" approach keeps the interface clean — the actions don't clutter the screen when there's nothing to act on, and they appear exactly when they become useful. The bar animates with transform and opacity only (a spring-eased rise), so it feels responsive and stays smooth across every framework export.

Selection tracked in a Set

Selected rows live in a JavaScript Set of row ids, which is the natural data structure for "which things are chosen": adding, removing, and membership checks are all trivial, and selected.size is the live count. Every interaction — a row checkbox, select-all, or an action — mutates the Set and calls one sync() function that re-derives all the UI: the count, the bar's visibility, each row's highlight and checkbox, and the header checkbox state. There's no scattered DOM bookkeeping; the Set is the source of truth and the UI is its projection.

Select-all with a true indeterminate state

The header checkbox does more than check/uncheck everything — it correctly reflects partial selection with the indeterminate state (the dash, not a check), which is the standard, accessible way to show "some but not all rows are selected." sync() sets checked when every row is selected, indeterminate when some are, and neither when none are. This three-state header is a detail most hand-built tables skip, but it's what makes select-all feel correct: a half-selected table shouldn't show a fully-checked header.

Actions that operate on the selection

The bar's buttons — Email, Export, and a red-tinted Delete — each operate on the current set of selected ids. Delete removes the rows and clears the selection (which hides the bar); Email and Export show a brief confirmation in the demo, but in a real app these are where you'd call your API with the selected ids. Separating the destructive Delete visually (red on hover) follows the convention that keeps a bulk delete from being fired by accident, and a "Clear" button lets users deselect everything in one click without unchecking each row.

Row affordances and accessibility

Selected rows get a tinted background so the selection is visible in the table itself, not just in the bar's count, and each checkbox carries an aria-label naming its row. The header checkbox is labeled "Select all." For a production build you'd add Shift-click range selection (covered in the FAQs) and announce selection changes via a live region, but the core — Set-backed selection, a contextual bar, and a correct tri-state header — is the foundation every bulk-action table needs.