Wide tables with 20+ columns become unusable without pinning. Users lose context as they scroll horizontally—what row am I on? Pin the identifier column on the left and an actions column on the right and the UX clicks back into place.
This tutorial walks through column pinning patterns for the Angular data grid landscape and shows the Simple Table for Angular setup with signals.
If you also need virtualization, grouping with aggregations, and inline editing alongside pinning, Simple Table for Angular is the focused MIT pick.
Why it matters
Context anchoring
Users don't lose track of what row they're on as they scroll horizontally.
Action accessibility
Pin Edit / Delete / Open buttons on the right so they're always within reach.
Wide-table support
30+ columns become navigable when key columns stay sticky.
Excel-like ergonomics
Power users expect Freeze Panes; pinning delivers the same affordance.
Angular library comparison
| Library | Support | Notes |
|---|---|---|
| Simple Table for Angular | Built-in (left + right) | pinned: 'left' | 'right' on HeaderObject; sticky on horizontal scroll. |
| AG Grid Angular | Built-in | pinned: 'left' | 'right' on column defs. |
| PrimeNG Table | Built-in | frozenColumns + scrollable + scrollDirection='horizontal'. |
| ngx-datatable | Limited | [frozenLeft] / [frozenRight] but limited theming and edge cases. |
| Angular Material mat-table | Manual | Use sticky directive + position: sticky CSS; corner cases require custom z-index management. |
Implementation: Simple Table for Angular
Set pinned: 'left' or pinned: 'right' on individual HeaderObjects. Simple Table handles z-index, sticky positioning, and shadow indicators automatically.
columnResizing if users should be able to resize pinned columns.Common pitfalls
Too many pinned columns
Problem: Users pin 8 of 12 columns; the scrolling area becomes useless.
Solution: Cap pinned columns at 2–3 each side, or warn the user beyond a threshold.
Pinned column width mismatch
Problem: Resizing a pinned column doesn't update the sticky offset.
Solution: Pick a library that handles offset recalculation on resize. Simple Table does this automatically.
Z-index battles with editors / dropdowns
Problem: Cell editors render below the pinned column, getting clipped.
Solution: Render editors / popovers in a portal at the document root, not inside the cell.
Mobile horizontal scroll feels broken
Problem: Pinned columns over-fill the viewport on small screens.
Solution: Conditionally disable pinning at < 768px (use @angular/cdk/layout BreakpointObserver).
Frequently asked questions
- Can users reorder pinned columns?
- Yes—Simple Table supports column reordering, including across the pinned/unpinned boundary. Set columnReordering="true".
- What about pinning rows (not just columns)?
- Row pinning is on the roadmap. Until then, render pinned rows in a separate header / footer slot.
- Does pinning work with virtualization?
- Yes. The pinned columns are rendered separately from the virtualized scroll area; performance is unchanged for 1M rows.
Wrap-up
Column pinning in Angular is a single property on Simple Table. AG Grid and PrimeNG support it natively too; mat-table requires manual sticky CSS with z-index management.
Cap the number of pinned columns and disable pinning on small viewports to keep the scrolling area usable.