Column resizing is one of those features users miss only when it's gone. The moment a content cell truncates with an ellipsis, somebody reaches for the column edge and tries to drag.
This tutorial walks through column resizing patterns for the Vue 3 data grid landscape and shows the Simple Table for Vue setup with the Composition API.
If you also need pinning, virtualization, and grouping with aggregations, Simple Table for Vue ships them all in one MIT package—~70 kB gzipped, Composition-API-friendly.
Why it matters
Density vs scannability
Users adjust columns to suit their screen and the row data they're scanning—you don't have to guess for them.
Excel-like ergonomics
Power users expect drag-handle resizing on column edges; without it, the grid feels broken.
Pinned-column compatibility
Resizing a pinned column has to recalc the sticky offset; a quality grid handles this for you.
Persisting widths
Many teams need user-customized layouts persisted to localStorage or the server.
Vue library comparison
| Library | Support | Notes |
|---|---|---|
| Simple Table for Vue | Built-in | :column-resizing="true" + auto-expand keeps total width pinned. |
| Vuetify v-data-table | Manual | No native resize—use v-resize directive or community plugins. |
| PrimeVue DataTable | Built-in | :resizableColumns="true" + columnResizeMode="fit" / "expand". |
| Element Plus el-table | Limited | Only via :border="true" with manual width tracking. |
| Naive UI n-data-table | Built-in | :resizable="true" on individual columns. |
Implementation: Simple Table for Vue
Enable column resizing with a single prop on the <SimpleTable> component. Pair with auto-expand to keep total width pinned to the container.
columnResizing with autoExpandColumns to keep the table flush with the container; remove auto-expand to allow horizontal scrolling.Common pitfalls
Layout shift on resize
Problem: Content next to the table jumps as users resize.
Solution: Wrap the grid in a container with a fixed width or max-width.
Resize handles too narrow on touch
Problem: Mobile users can't grab the 4px column edge.
Solution: Use a library that auto-widens handles for touch (Simple Table does this).
Resizing breaks pinned columns
Problem: Sticky offsets get out of sync.
Solution: Use a grid that recalculates pinned offsets on resize—Simple Table does this automatically.
Widths aren't persisted
Problem: User layouts vanish on refresh.
Solution: Watch headers for changes and store widths in localStorage or your user-prefs API.
Frequently asked questions
- Can I disable resizing per column?
- Yes—set isResizable: false on individual HeaderObject entries.
- Does it work with virtualization?
- Yes. Virtualized 1M-row tables resize columns at 60fps.
- How do I sync widths to the server?
- Watch headers in your component and PATCH user preferences on debounce.
Wrap-up
Column resizing in Vue 3 is a one-line prop on Simple Table. PrimeVue and Naive UI ship it natively too; Vuetify and Element Plus require manual wiring.
If you need resize alongside virtualization, pinning, and grouping, Simple Table for Vue is the focused MIT pick—~70 kB gzipped.