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 MIT 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.