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 SolidJS data grids and shows the Simple Table for Solid setup with signals.
If you also need virtualization, grouping with aggregations, and inline editing alongside pinning, Simple Table for Solid 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.
Solid library comparison
| Library | Support | Notes |
|---|---|---|
| Simple Table for Solid | Built-in (left + right) | pinned: 'left' | 'right' on HeaderObject; sticky on horizontal scroll. |
| TanStack Solid Table | Headless | Provides pinning state via column.getIsPinned; sticky CSS and rendering are DIY. |
| Kobalte primitives | Not applicable | Kobalte is a primitives library, not a data-grid solution. |
Implementation: Simple Table for Solid
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 using <Portal>.
Mobile horizontal scroll feels broken
Problem: Pinned columns over-fill the viewport on small screens.
Solution: Conditionally disable pinning at < 768px using a media-query signal.
Frequently asked questions
- Can users reorder pinned columns?
- Yes—Simple Table supports column reordering, including across the pinned/unpinned boundary. Set columnReordering={true}.
- Does it pair with createStore?
- Yes. Headers and rows can both live in stores; Solid's fine-grained reactivity handles updates efficiently.
- 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 SolidJS is a single property on Simple Table. TanStack Solid Table is headless—you build sticky CSS and rendering yourself.
Cap the number of pinned columns and disable pinning on small viewports to keep the scrolling area usable.