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 Solid ecosystem—TanStack Solid Table, Kobalte primitives, and Simple Table for Solid—and shows the signals-native setup.
If you also need pinning, virtualization, and grouping with aggregations, Simple Table for Solid ships them all in one MIT package.
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.
Solid library comparison
| Library | Support | Notes |
|---|---|---|
| Simple Table for Solid | Built-in | columnResizing={true} prop; signals-native, fine-grained reactive. |
| TanStack Solid Table | Headless (manual) | Provides resize state via column.getIsResizing; you build handles + DOM events. |
| Kobalte primitives | Manual | No data-grid—Kobalte is a primitives library for popovers, dialogs, etc. |
Implementation: Simple Table for Solid
Enable column resizing with a single prop on the <SimpleTable> component. Pair with auto-expand to keep total width pinned to the container.
localStorage access in onMount so it only runs client-side.Common pitfalls
SSR breakage on localStorage
Problem: Accessing localStorage during render breaks Solid-Start SSR.
Solution: Guard with onMount, which only runs client-side.
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.
Reactive overhead
Problem: Recreating the entire headers array on each resize triggers excess updates.
Solution: Simple Table batches resize updates and uses fine-grained reactive primitives—only affected cells rerender.
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.
- Does it pair with createStore?
- Yes. Pass a store as the rows source; Solid's fine-grained reactivity makes updates smooth.
Wrap-up
Column resizing in SolidJS is a one-line prop on Simple Table. TanStack Solid Table is headless and requires DIY handles; Kobalte doesn't ship a grid.
If you need resize alongside virtualization, pinning, and grouping, Simple Table for Solid is the focused MIT pick—signals-native, ~70 kB gzipped.