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 SolidJS data grids and shows the Simple Table for Solid setup with signals.
If you also need pinning, virtualization, and grouping with aggregations alongside selection, Simple Table for Solid 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.
Solid library comparison
| Library | Support | Notes |
|---|---|---|
| Simple Table for Solid | Built-in (single / multi / checkbox) | selectableCells="row" + onRowSelect callback. |
| TanStack Solid Table | Headless | row-selection feature; you render checkboxes and bind events yourself. |
| Kobalte primitives | Not applicable | Kobalte is a primitives library, not a data-grid solution. |
Implementation: Simple Table for Solid
Enable selection with selectableCells, listen for onRowSelect, 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.
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; createStore preserves identity better than replacing rows wholesale.
Frequently asked questions
- Can I support Shift-click range selection?
- Yes—Simple Table handles range selection out of the box for selectableCells="row".
- Does it work with createStore?
- Yes. Selection state can live in a store; Solid's fine-grained reactivity makes updates smooth.
- Is selection accessible?
- Yes. Simple Table sets aria-selected on rows and supports keyboard navigation.
Wrap-up
Row selection in SolidJS is a single prop and callback in Simple Table. TanStack Solid Table is headless—you wire checkboxes manually.
Always key selection by stable identifier and provide proper touch targets. Combine with virtualization and pinning for large datasets.