You're building an Angular admin tool. The Description column is too narrow, the ID column is too wide. Users want Excel-like control. That's column resizing—and it's surprisingly easy to get wrong if you wire mouse and touch events yourself.
This guide compares column-resizing implementations across the Angular data grid landscape (AG Grid Angular, ngx-datatable, PrimeNG, mat-table, Simple Table for Angular) and shows the idiomatic standalone-component setup for Simple Table.
If you're greenfield on Angular 17/18/19 and want resizing that integrates with virtualization, pinning, and grouping, Simple Table for Angular is the focused MIT pick. Read on for the implementation details.
Why it matters
User control
Different users need different column widths. Resizing puts that control in their hands rather than your design system's.
Screen real estate
Laptop vs 4K monitor; mobile vs desktop. Resizable columns adapt to any viewport without code changes.
Data visibility
Long emails, descriptions, and IDs get truncated by default. Resize lets users widen the columns they care about.
Professional feel
Excel and Google Sheets users expect resize. A grid without it feels like a prototype.
Angular library comparison
| Library | Support | Notes |
|---|---|---|
| Simple Table for Angular | Built-in (one input) | [columnResizing]="true" on standalone <simple-table>; integrates with autoExpandColumns. |
| AG Grid Angular | Built-in | resizable: true on column defs; advanced features (pivot, master/detail) Enterprise-only. |
| ngx-datatable | Built-in | [resizeable]="true" + [columnMode]="'force'"; requires manual width management. |
| PrimeNG Table | Built-in | [resizableColumns]="true"; pairs with [columnResizeMode]="'fit' | 'expand'". |
| Angular Material mat-table | Manual / DIY | No native resize—you wire it via CDK Drag/Resize Observer or third-party directives. |
| Kendo Grid for Angular | Built-in | [resizable]="true"; commercial license required. |
Implementation: Simple Table for Angular
Enable column resizing with a single input on the standalone <simple-table> component. Pair with autoExpandColumns to keep total width pinned to the container, or leave it off to allow horizontal scrolling.
columnResizing with autoExpandColumns to keep the table flush with the container; remove it to allow horizontal scrolling on small viewports.Implementation: AG Grid Angular
AG Grid is powerful but the API is verbose and Enterprise features are paywalled. Here's the basic resize setup for comparison.
Common pitfalls
Forgot to set minWidth
Problem: Users shrink columns to 10px, content becomes unreadable.
Solution: Always set minWidth (50–100px for text, 30–50px for numbers/icons).
Janky drag on large datasets
Problem: Re-render of 10k rows on every mouse move kills FPS.
Solution: Use a library with built-in virtualization (Simple Table, AG Grid). Avoid hand-rolling resize on plain mat-table.
Touch events not firing
Problem: Resize works on desktop but not mobile.
Solution: Pick a library that handles touchstart/touchmove (Simple Table does this). If rolling your own, listen for both pointer and touch events.
Resize handle too narrow
Problem: Users can't grab the 1–2px border.
Solution: Make the interactive hit area 6–10px even if the visual is thinner.
Frequently asked questions
- Does Simple Table for Angular support signals?
- Yes—headers and rows accept signals or static values. Resize updates flow through Angular's change detection automatically.
- Can I disable resize per column?
- Yes. Set isResizable: false on individual HeaderObject entries to keep specific columns fixed.
- What about responsive / mobile?
- Disable autoExpandColumns at small viewports and let the grid scroll horizontally. Resize handles still work on touch.
- How does this integrate with sorting and filtering?
- Resizing is independent of sort/filter state. Users can resize while sorted/filtered without losing their position.
Wrap-up
Column resizing in Angular is a single input on Simple Table. AG Grid covers it out of the box too, but with verbose config. PrimeNG and ngx-datatable need more wiring; mat-table needs custom directives.
If you're greenfield on Angular 17+ and want resize, pinning, virtualization, grouping, and editing in one MIT package, Simple Table for Angular is the focused pick.