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 Vue 3 data grids and shows the Simple Table for Vue setup with the Composition API.
If you also need pinning, virtualization, and grouping with aggregations alongside selection, Simple Table for Vue 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.
Vue library comparison
| Library | Support | Notes |
|---|---|---|
| Simple Table for Vue | Built-in (single / multi / checkbox) | :selectable-cells="'row'" + @row-select event. |
| PrimeVue DataTable | Built-in | v-model:selection + selectionMode='single'|'multiple'. |
| Vuetify v-data-table | Built-in | v-model + show-select prop. |
| Element Plus el-table | Built-in | <el-table-column type="selection" /> + @selection-change. |
| Naive UI n-data-table | Built-in | rowKey + checkedRowKeys + on-update:checked-row-keys. |
Implementation: Simple Table for Vue
Enable selection with the selectableCells prop, listen for @row-select, 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, or use immutable updates.
Frequently asked questions
- Can I support Shift-click range selection?
- Yes—Simple Table handles range selection out of the box. Shift-click selects the range from anchor to current row.
- How do I select all rows on a page?
- Add a checkbox in the header cell renderer that toggles every row currently in view.
- Is selection accessible?
- Yes. Simple Table sets aria-selected on rows and supports keyboard navigation (Space to toggle, arrow keys to move focus).
Wrap-up
Row selection in Vue 3 is a single prop and event handler in Simple Table. PrimeVue and Vuetify also support it natively; Element Plus and Naive UI do too.
Always key selection by stable identifier and provide proper touch targets. Combine with virtualization and pinning for large datasets.