A floating action bar that appears when table rows are selected and renders any actions your application needs.
The parent owns row selection and action behavior. The bar handles visibility, positioning, responsive overflow, animation, and the clear-selection control.
Select projects to reveal the bulk actions bar.
| Project | Status | |
|---|---|---|
| Website redesign | In progress | |
| Mobile application | Planning | |
| Analytics dashboard | In progress | |
| Customer portal | Complete |
Installation
Install dependencies
Install the required packages for this component:
Copy the Source Code
Copy and paste the following code into your project:
Folder Structure
Usage
Derive stable selected row IDs from the table selection state, then place your own controls inside BulkActionsBar.
Add it to a table
Follow these steps after your columns and table data are ready.
Enable row selection and stable row IDs
Register rowSelectionFeature and use a database ID or another stable value for getRowId. Stable IDs are important when sorting, filtering, or paginating rows.
Derive only the selected IDs
Filter for truthy values before counting. A row-selection record can retain keys whose value is false.
Render the actions your app needs
Pass the count and clear callback, then compose normal Svelte controls as children. Keep confirmations, loading states, permissions, and API calls in the parent.
Props
Bulk actions bar props
| Name | Type | Default | Description |
|---|---|---|---|
selectedCount | number | required | Number of selected items. The bar is rendered only when this is greater than zero. |
onClear | () => void | required | Called when the built-in clear-selection button is pressed. |
children | Snippet | required | Custom action buttons, menus, dialogs, or other controls. |
summary | Snippet<[number]> | "{count} items selected" | Optional custom selected-count content for localization or richer markup. |
clearLabel | string | "Clear selection" | Accessible label and tooltip for the clear button. |
class | string | "" | Optional classes for the visible action bar surface. |
...restProps | HTMLAttributes<HTMLDivElement> | — | Additional HTML attributes forwarded to the action bar region. |