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

[ghiscoding]

Summary

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

This is an intentional v11 breaking change. The previous multi-pane frozen implementation has
been removed from the runtime and replaced with one virtualized body viewport, one vertical
scroll owner, one horizontal scroll owner, and stable per-row left/center/right cell regions.

Why

The legacy frozen-pane implementation required multiple synchronized panes and scroll
containers. This increased complexity around scrolling, resizing, virtualization, editing,
grouping, and framework integrations.

The new architecture provides a simpler and more predictable model:

• one live viewport and canvas;
• one horizontal scroll owner;
• one native vertical scrollbar;
• stable left/center/right regions within each rendered row;
• independent, non-contiguous column and row pinning;
• shared resolution logic for permanent pinning and scroll-activated sticky docking.

Unlike the previous freeze-until-column/row behavior, users can now pin individual columns or
rows independently. For example, columns 0 and 2 can be pinned while column 1 remains in the
center region.

Changes

• Added canonical GridOption.pinning support for:
  • columns.left / columns.right;
  • rows.top / rows.bottom.
• Added explicit per-column Column.pinned and CurrentColumn.pinning state support.
• Added Column.sticky and GridOption.stickyRows for scroll-activated docking.
• Added the shared internal DockingController for permanent and sticky column/row resolution.
• Added viewport-based sticky-row budgets, variable-height support, and conveyor/clamp
  overflow strategies.
• Added stable left/center/right DOM regions for:
  • body rows;
  • headers;
  • header rows;
  • footers;
  • pre-header/grouped header content.
• Added permanent right-column and bottom-row pinning.
• Added support for non-contiguous pinned columns and rows.
• Added cross-band colspan/rowspan rendering with one logical host cell and visual continuation
  fragments.
• Preserved virtualization, editing, selection, grouping, resizing, auto-sizing, RTL behavior,
  and framework integrations.
• Added sticky financial-report demonstrations:
  • Vanilla Example 47;
  • Angular, Aurelia, React, and Vue Example 58.
• Updated Example 04 to demonstrate permanent left/right column and top/bottom row pinning.
• Updated Header Menu pinning commands:
  • Pin Left;
  • Pin Right;
  • bulk directional pinning;
  • Unpin Column;
  • Unpin All Columns.
• Added Column.pinnable support for controlling Header Menu pinning commands.
• Added Grid State/Preset serialization for the nested pinning shape.
• Kept sticky configuration option-based because active sticky membership is scroll-dependent and
  is intentionally not serialized.
• Added stable .slick-horizontal-scroller and .slick-vertical-scroller selectors.
• Removed the legacy frozen options, interfaces, state fields, pane runtime branches, synchronized
  scroll branches, redundant viewport/canvas aliases, and old pane CSS classes.
• Removed the legacy -1000px header coordinate workaround and HEADER_WIDTH_SLACK.
• Updated the v11 migration guide and pinning/sticky documentation across the supported frameworks.
• Added the repository pinning-sticky skill as implementation and documentation guidance.

Breaking changes

• The old frozen-pane configuration and APIs are removed.

• The canonical configuration is now:

  {
    pinning: {
      columns: { left, right },
      rows: { top, bottom }
    }
  }

• Legacy flat pinning options and temporary aliases are no longer supported.

• Pinning-related state now uses GridState.pinning.

• Sticky state is not serialized because it changes with scrolling.

• The old multi-pane DOM structure and pane selectors are no longer available.

• Column reordering remains within each docking band; moving a column between pinned and center
  bands is an explicit pinning operation.

• Legacy names and theme variables are retained only as migration documentation references.

References

Ag-Grid Column Pinning was used as key concept reference for the idea of a single horizontal scroller and single vertical scroller, also for its declaration of left/center/right cell docking regions

Validation

The following checks pass:

• Common package TypeScript validation.
• Vanilla demo type-check.
• Angular, Aurelia, React, and Vue demo builds.
• Focused common pinning, docking, grouping, accessibility, span, and interaction tests.
• Changed-range coverage for the updated SlickGrid implementation.
• Oxlint.
• Prettier.
• Sass compilation for affected themes.
• git diff --check.
• User-confirmed Vanilla, Angular, Aurelia, React, and Vue Cypress CI workflows, including
  pinning/sticky, resizing, reordering, RTL, variable row heights, editing, selection,
  grouping, spans, and framework parity.

The accessibility audit found no pinning/sticky-specific semantic-tree or keyboard-navigation
regressions. Automated axe/WCAG integration and manual screen-reader validation are not included
in this PR.

Implementation status

The single-viewport rewrite and legacy runtime cleanup are complete. This is no longer a POC
that runs alongside the old frozen-pane implementation.

The approximate library-only production diff is:

• +3,989 / -1,550;
• approximately +2,439 net LOC relative to the base commit.

These figures exclude demos, tests, generated output, and framework-wrapper changes.

Follow-up work

The following items are intentionally separate from the v11 implementation:

• optional manual UX trials for sticky transitions and held-scroll performance;
• a separate investigation into fast vertical-scroll blanking;
• grouped sticky header bands, such as quarterly group headers;
• framework-specific migration guides if required for the release.

None of these requires restoring the legacy pane architecture or changing the current pinning/sticky
runtime design.

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 and
    documentation updates, test maintenance, and validation support.

Checklist

• The changes are limited to the pinning/sticky docking rewrite and required demos,
  documentation, tests, and cleanup.
• Tests were added or updated where appropriate.
• Documentation was updated where appropriate.
• Legacy frozen-pane runtime behavior and compatibility branches were removed.

TODOs

• Change merge branch to next-v11.
• change example04 pinkish column with grayish background like Ag-Grid and rename column to include the words "locked, not pinnable". See Ag-Grid: https://www.ag-grid.com/javascript-data-grid/column-pinning/

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 100.0%. Comparing base (014db0c) to head (078e7d2).
⚠️ Report is 9 commits behind head on master.
✅ All tests successful. No failed tests found.

Additional details and impacted files

@@            Coverage Diff            @@
##           master    #2782     +/-   ##
=========================================
- Coverage   100.0%   100.0%   -0.0%     
=========================================
  Files         199      200      +1     
  Lines       25867    27035   +1168     
  Branches     9176     9529    +353     
=========================================
+ Hits        25867    27029   +1162     
- Misses          0        5      +5     
- Partials        0        1      +1     

Flag	Coverage Δ
angular	100.0% <ø> (ø)
universal	100.0% <ø> (-<0.1%)	⬇️

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: 078e7d2

[ghiscoding]

Sticky Columns / Rows

Screencast_20260903_184235.webm

Pinning Columns / Rows

Screencast_20260910_223012-1.webm

Screencast_20260911_013813.webm