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 the vanilla JS / TS data grid landscape and shows the simple-table-core setup with strict TypeScript.
If you also need virtualization, grouping with aggregations, and inline editing alongside pinning, simple-table-core is the focused MIT pick—~70 kB gzipped, framework-agnostic.
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.
Vanilla JS / TypeScript library comparison
| Library | Support | Notes |
|---|---|---|
| simple-table-core | Built-in (left + right) | pinned: 'left' | 'right' on HeaderObject; sticky on horizontal scroll. |
| Tabulator | Built-in | frozen: true on column defs; sticky to left or right via column position. |
| Grid.js | Manual | No native pinning—use position: sticky CSS on column cells. |
| Handsontable | Built-in (commercial) | Pinning built-in but commercial license required. |
| jSpreadsheet | Built-in | freezeColumns option; spreadsheet-style. |
Implementation: simple-table-core
Set pinned: 'left' or pinned: 'right' on individual HeaderObjects. simple-table-core 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-core does this automatically.
Z-index battles in shadow DOM
Problem: Editors / popovers render below the pinned column inside a shadow root.
Solution: Render popovers into the document body via slot-based portals, or use a high z-index inside the shadow tree.
Mobile horizontal scroll feels broken
Problem: Pinned columns over-fill the viewport on small screens.
Solution: Use a window matchMedia listener and call setHeaders to clear pinning at < 768px.
Frequently asked questions
- Can users reorder pinned columns?
- Yes—simple-table-core supports column reordering, including across the pinned/unpinned boundary. Set columnReordering: true.
- Does it work in a web component?
- Yes. Mount inside the shadow root: pass shadowRoot.querySelector('#host') as the element.
- 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 vanilla JS / TS is a single property on simple-table-core. Tabulator supports it natively too; Grid.js requires DIY sticky CSS; Handsontable is commercial.
Cap the number of pinned columns and disable pinning on small viewports to keep the scrolling area usable.