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 the Angular data grid landscape—and shows the Simple Table for Angular setup with signals.
If you also need pinned columns, virtualization, and grouping with aggregations alongside selection, Simple Table for Angular 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.
Angular library comparison
| Library | Support | Notes |
|---|---|---|
| Simple Table for Angular | Built-in (single / multi / checkbox) | [selectableCells]="'row'" + onRowSelect / onSelectionChange outputs. |
| AG Grid Angular | Built-in | rowSelection: 'single' | 'multiple', checkboxSelection on column defs. |
| ngx-datatable | Built-in | [selectionType]="'single' | 'multi' | 'checkbox'"; pairs with [selected] two-way binding. |
| PrimeNG Table | Built-in | [(selection)] + selectionMode='single'|'multiple', plus <p-tableCheckbox>. |
| Angular Material mat-table | Manual | Use SelectionModel + <mat-checkbox>; you wire the column yourself. |
Implementation: Simple Table for Angular
Enable selection with selectableCells, listen for selection changes, 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 that preserve identity.
Frequently asked questions
- Can I support Shift-click range selection?
- Yes—Simple Table handles range selection out of the box for selectableCells="row". 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. For "select across all pages," you'll wire that yourself with a stored Set.
- 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 Angular is a one-line change in Simple Table. Other libraries also support it but with more wiring (mat-table requires DIY entirely).
Always key selection by stable identifier and provide proper touch targets. Combine with virtualization and pinning if you're working with large datasets.