Row selection drives bulk actions: delete, archive, export, assign. Get it wrong and users misclick or struggle on touch screens.
This tutorial walks through single, multi, and checkbox selection patterns for Svelte / SvelteKit and shows the Simple Table for Svelte setup with both Svelte 4 stores and Svelte 5 runes.
If you also need pinning, virtualization, and grouping with aggregations alongside selection, Simple Table for Svelte is the focused source-available pick.
Why it matters
Bulk actions
Selection enables archive, delete, export, assign, etc. Without it, users repeat per-row actions.
Keyboard ergonomics
Shift-click range, Ctrl-click toggle, and Space-to-select are expected by power users.
Cross-page persistence
When users paginate, their selection should survive the navigation.
Accessibility
Screen readers and keyboard users need aria-selected and focus-visible states.
Svelte library comparison
| Library | Support | Notes |
|---|---|---|
| Simple Table for Svelte | Built-in (single / multi / checkbox) | selectableCells="row" + on:rowSelect dispatcher event. |
| svelte-headless-table | Plugin (manual) | addSelectedRows plugin gives state; rendering and toggling are DIY. |
| SVAR DataGrid (Svelte) | Built-in (commercial) | Selection built-in but commercial license required. |
| Flowbite Svelte Table | Manual | Markup-only utilities—wire selection state yourself. |
Implementation: Simple Table for Svelte
Enable selection with selectableCells, listen for the rowSelect event, and combine with sorting / filtering / pinning without extra config.
Common pitfalls
Tracking by index breaks
Problem: When users sort or filter, the same index points to a different row.
Solution: Always key selection by a stable identifier (id / uuid).
Tiny touch targets
Problem: Checkboxes are too small on phones, users miss-tap.
Solution: Provide at least 44x44px touch targets. Simple Table's checkbox column does this.
Unintended row toggles on cell click
Problem: Clicking a button inside a row also selects the row.
Solution: Stop propagation on clickable cell renderers, or use selectableCells="row" with a dedicated checkbox column.
Lost selection on data refetch
Problem: After polling refresh, selection clears.
Solution: Reapply your stable-id Set after data refresh.
Frequently asked questions
- Does this work with Svelte 4 stores?
- Yes. Replace $state with writable() and the event handler still works.
- Can I support Shift-click range selection?
- Yes—Simple Table handles range selection out of the box for selectableCells="row".
- Is selection accessible?
- Yes. Simple Table sets aria-selected on rows and supports keyboard navigation.
Wrap-up
Row selection in Svelte is a single prop and event handler in Simple Table. svelte-headless-table requires plugin wiring; SVAR ships it commercially; Flowbite is DIY.
Always key selection by stable identifier and provide proper touch targets. Combine with virtualization and pinning for large datasets.