Pin first column on horizontal scroll
Live in demo 25-column-pinning.
When
Wide grids where the row-label column must stay visible while the data scrolls horizontally.
How
Key API surface:
api.setColumnPinning({ left: ['id'] })
See the demo source for the full implementation; this recipe pins the pattern + the surface so you can copy-paste it confidently. The doc page that explains the underlying feature in depth is linked from the recipes index.
See also
- Demo 25-column-pinning source
- Demo 25-column-pinning prompt sidecar - drop into an LLM context window
- Recipes index
Related articles
- Multi-Level (Grouped) Column Headers in SvGrid - Band related columns under a shared parent header using SvGrid's nested column definition - how to nest, pin, combine with sorting and filtering, and when NOT to use grouping.
- First Light - Pointing SvGrid at 100,000 Rows - When we first fed SvGrid a hundred thousand rows, we were testing more than performance - we were testing whether building native on Svelte 5 runes was the right call from the start.
- A Custom Column Header Menu in SvGrid - Build a per-column header menu for sort, hide, pin, and custom actions using header snippets and your own dropdown component.