feat(grid)!: replace frozen panes with pinning and sticky docking

[ghiscoding]

Summary

Introduce a single-viewport docking architecture for pinned and sticky columns/rows.

This is an intentional major-version breaking change. It replaces the previous
multi-pane frozen UX with one native horizontal scrollbar, one native vertical
scrollbar, and per-row left/center/right cell regions.

Why

The legacy frozen-pane implementation required multiple synchronized panes and
scroll containers, making scrolling, resizing, virtualization, and maintenance
more complex. The new model follows the more predictable pinning structure used
by grids such as AG Grid.

The legacy approach had multiple scrollbars (one for each freezed panes), however with the new approach we now use single horizontal/vertical scrollbars which gives us better UI/UX. Also the legacy frozen approach was to freeze until x row/column, but the pinning is single column/row based, so the user could pin columns 0 and 2 but leave column 1 as unpinned (that wasn't possible before)

Changes

• Added unified GridOption.pinning support for:
  • left/right pinned columns;
  • top/bottom pinned rows.
• Added per-column pinning and CurrentColumn.pinning state support.
• Added sticky column/row docking through the shared DockingController.
• Added stable left/center/right DOM regions for rows, headers, header rows, and footers.
• Added right-column pinning support.
• Updated Example 04 to demonstrate pinned columns and rows.
• Added Example 47 as a financial sticky columns/rows demonstration.
• Updated Header Menu actions:
  • migration-friendly bulk “Freeze Columns” action;
  • single-column “Pin Column” / “Unpin Column” actions.
• Preserved column sizing, auto-size behavior, editing, filtering, state/preset
  handling, and virtualization paths where possible.
• Removed temporary pinnedColumn and pinnedRows grid-option aliases in favor of
  the unified pinning option.
• Removed the legacy header 1000px coordinate workaround from the docking renderer.
• Applied initial behavior-preserving LOC cleanup and Cypress command typing fixes.

Validation

• Common package TypeScript validation passes.
• Vanilla type-check passes.
• Oxlint passes for the changed SlickGrid source.
• Prettier and git diff --check pass.
• Framework Cypress TypeScript configurations pass after the custom command typing fix.

The full Cypress matrix and unit-test pass remain follow-up work. In the current
agent environment, Cypress exits with code 132 before browser startup.

Comments

This PR is the POC checkpoint. The old frozen-pane implementation is still present
temporarily so the new architecture can be reviewed in isolation. Immediately after
this PR is created, the remaining legacy frozen options, pane fields, synchronized
scroll branches, frozen SCSS, and related framework/state plumbing should be removed
as a dedicated cleanup pass.

The final production LOC will be recalculated after that legacy deletion pass.

AI / LLM assistance

• AI / LLM assistance used:
  • No
  • Yes
• If Yes:
  • which tool/model: OpenAI Codex 5.6 Sol and Luna
  • how was it used: Architecture analysis, implementation, refactoring,
    debugging, demo updates, and validation support.

Checklist

• The changes are limited to the pinning/sticky docking rewrite and required demos.
• Tests were added or updated where appropriate.
• Documentation was updated where appropriate.

TODOs

• remove or uncomment skipped unit tests
• in v11 migration guide, mention that pinning is independent but a legacy approach to pin up to index x is available.
• make sure we have best perf for sticky horizontal scrolling
• replicate new example47 to all frameworks
• fix Angular-Slickgrid unit tests
• we might be able to fix pinning 1 column and have its group title spread wider than its column
• search and remove any "frozen" and "freeze" keywords, rename any interface names leftovers.
• change merge branch to next-v11
• Ag-Grid also has a lockPinned and we should probably add it as well (If you do not want the user to be able to pin using the UI)
• horizontal scrolling, using mousewheel, is way too slow compared to Ag-Grid
• found a bug in pinning grid, can no longer widen columns more than a few pixels (need new Cypress tests to cover that)
• need to change "Freeze Columns" in Header Menu to "Pin Column" and add another one for "Pin Columns" or something similar for pinning up to column X. Same for "Unpin Column" and "Unpin All Columns"
• fix unit tests warning: "jsdom was created 215 times"

[codecov]

Codecov Report

❌ Patch coverage is 99.38080% with 2 lines in your changes missing coverage. Please review.
✅ Project coverage is 98.2%. Comparing base (29dd3db) to head (ef7197f).
⚠️ Report is 1 commits behind head on master.
✅ All tests successful. No failed tests found.

Files with missing lines	Patch %	Lines
packages/common/src/extensions/menuBaseClass.ts	85.8%	2 Missing ⚠️

Additional details and impacted files

@@           Coverage Diff            @@
##           master   #2782     +/-   ##
========================================
- Coverage   100.0%   98.2%   -1.8%     
========================================
  Files         199     195      -4     
  Lines       25814   25888     +74     
  Branches     9144    9170     +26     
========================================
- Hits        25814   25413    -401     
- Misses          0     363    +363     
- Partials        0     112    +112     

Flag	Coverage Δ
angular	?
universal	98.2% <99.4%> (-1.8%)	⬇️

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Harness.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[pkg-pr-new]

angular-slickgrid

npm i https://pkg.pr.new/angular-slickgrid@2782

aurelia-slickgrid

npm i https://pkg.pr.new/aurelia-slickgrid@2782

slickgrid-react

npm i https://pkg.pr.new/slickgrid-react@2782

slickgrid-vue

npm i https://pkg.pr.new/slickgrid-vue@2782

@slickgrid-universal/angular-row-detail-plugin

npm i https://pkg.pr.new/@slickgrid-universal/angular-row-detail-plugin@2782

@slickgrid-universal/aurelia-row-detail-plugin

npm i https://pkg.pr.new/@slickgrid-universal/aurelia-row-detail-plugin@2782

@slickgrid-universal/react-row-detail-plugin

npm i https://pkg.pr.new/@slickgrid-universal/react-row-detail-plugin@2782

@slickgrid-universal/vue-row-detail-plugin

npm i https://pkg.pr.new/@slickgrid-universal/vue-row-detail-plugin@2782

@slickgrid-universal/binding

npm i https://pkg.pr.new/@slickgrid-universal/binding@2782

@slickgrid-universal/common

npm i https://pkg.pr.new/@slickgrid-universal/common@2782

@slickgrid-universal/composite-editor-component

npm i https://pkg.pr.new/@slickgrid-universal/composite-editor-component@2782

@slickgrid-universal/custom-footer-component

npm i https://pkg.pr.new/@slickgrid-universal/custom-footer-component@2782

@slickgrid-universal/custom-tooltip-plugin

npm i https://pkg.pr.new/@slickgrid-universal/custom-tooltip-plugin@2782

@slickgrid-universal/empty-warning-component

npm i https://pkg.pr.new/@slickgrid-universal/empty-warning-component@2782

@slickgrid-universal/event-pub-sub

npm i https://pkg.pr.new/@slickgrid-universal/event-pub-sub@2782

@slickgrid-universal/excel-export

npm i https://pkg.pr.new/@slickgrid-universal/excel-export@2782

@slickgrid-universal/graphql

npm i https://pkg.pr.new/@slickgrid-universal/graphql@2782

@slickgrid-universal/odata

npm i https://pkg.pr.new/@slickgrid-universal/odata@2782

@slickgrid-universal/pagination-component

npm i https://pkg.pr.new/@slickgrid-universal/pagination-component@2782

@slickgrid-universal/pdf-export

npm i https://pkg.pr.new/@slickgrid-universal/pdf-export@2782

@slickgrid-universal/row-detail-view-plugin

npm i https://pkg.pr.new/@slickgrid-universal/row-detail-view-plugin@2782

@slickgrid-universal/rxjs-observable

npm i https://pkg.pr.new/@slickgrid-universal/rxjs-observable@2782

@slickgrid-universal/sql

npm i https://pkg.pr.new/@slickgrid-universal/sql@2782

@slickgrid-universal/text-export

npm i https://pkg.pr.new/@slickgrid-universal/text-export@2782

@slickgrid-universal/utils

npm i https://pkg.pr.new/@slickgrid-universal/utils@2782

@slickgrid-universal/vanilla-bundle

npm i https://pkg.pr.new/@slickgrid-universal/vanilla-bundle@2782

@slickgrid-universal/vanilla-force-bundle

npm i https://pkg.pr.new/@slickgrid-universal/vanilla-force-bundle@2782

@slickgrid-universal/web-mcp

npm i https://pkg.pr.new/@slickgrid-universal/web-mcp@2782

commit: ef7197f

[ghiscoding]

Sticky Columns / Rows

Screencast_20260903_184235.webm

Pinning Columns / Rows

Screencast_20260903_005128-2.webm