feat(core): add variable row height support

[ghiscoding]

port the PR first opened in 6pac/SlickGrid:
6pac/SlickGrid#1235

What

Opt-in variable row height support. Supplying a rowHeightProvider grid option enables it or via item metadata.height — no separate flag:

const grid = new Slick.Grid('#myGrid', data, columns, {
  rowHeight: 25,                                   // default / fallback height
  rowHeightProvider: (grid, row, item) => item.tall ? 50 : undefined,
});

The provider receives the grid instance first, so it can consult any grid state.

Height resolution per row: rowHeightProvider → ItemMetadata.height (when the data provider has getItemMetadata) → the default rowHeight. Heights are cached in a prefix-sum index (rowPos[i] = top of row i), rebuilt when the row count changes, rows are invalidated, or the new grid.invalidateRowHeights() is called. Row→pixel is an O(1) array read; pixel→row is an O(log n) binary search with a last-hit hint (O(1) while scrolling). Row indexes are ≥ 0 by core guarantee; the index carries no negative-row handling.

Design: why no duplicated render path

The render loop never used rowHeight directly — it already funnelled through getRowTop / getRowBottom / getRowFromPosition. This PR first routes the remaining inlined row * rowHeight call sites (scrollRowIntoView, scrollRowToTop, scrollPage, getCellNodeBox, getFrozenRowOffset, frozen-rows height, updateRowCount, autoHeight viewport) through three geometry primitives, then branches once inside those primitives on the mode. With no provider configured, every path executes the exact pre-existing fixed-height arithmetic — fixed-mode behaviour and performance are preserved by construction.

Measured at 1M rows: variable-mode pixel→row lookups are ~0.3–0.4µs and run only tens of times per frame — noise against DOM row construction. A full index rebuild at 1M rows is ~10ms and only happens on data-shape changes.

Notable non-changes:

• The > maxSupportedCssHeight paging machinery (th/ph/n/cj/offset) is untouched — it is pixel-space and only consumes total height.
• enableCellRowSpan cell heights generalize automatically (already computed as getRowBottom(bottom) - getRowTop(row)).

Changes

• New: src/slick.rowpositionindex.ts (RowPositionIndexer, registered on the Slick namespace; for iife/script-tag usage it must load before slick.grid.js — a clear error is thrown otherwise).

• slick.grid.ts: geometry primitives + branching, lazy index rebuild via dirty flag, invalidateRowHeights(), public getRowHeight(row?), frozen-rows heights from the index (top & bottom variants), variable-mode CSS: the default .slick-row { height } rule is kept, rows get an inline height only when it differs from the default (mostly-uniform grids carry no per-row style attributes), plus one calc() cell rule.

• Frozen×variable fix: frozen pane/canvas sizes are re-applied when an index rebuild changes frozenRowsHeight (previously they kept the pre-index fixed-math size) — a change-flag plus one guarded resizeCanvas(), mirroring the existing autoHeight recursion pattern.

• gridOption.interface.ts (rowHeightProvider) and itemMetadata.interface.ts (height), documented.

• scripts/builds.mjs: bug fix — the iife skip-regex /index.[j|t]s/i matched any file ending in index.ts and silently excluded the new file from dist/browser; now anchored to the basename.

• Three new examples, each with in-page geometry self-checks, an examples-index entry, and a 6-test Cypress spec:

  • example-variable-row-height.html — 10k rows, mixed 25/32/70px, scroll-into-view / live height growth;
  • example-variable-row-height-spans.html — combined with enableCellRowSpan: span heads sized to the sum of their covered rows, covered cells not rendered, growing a covered row stretches its span head;
  • example-variable-row-height-frozen.html — combined with frozenColumn and frozenColumn+frozenRow (four panes): left/right panes agree per row, the frozen pane equals the sum of its rows' heights, and growing a frozen row resizes the pane live.

Core footprint: ~181 non-comment lines across src/ (a code-size pass removed an unused method, merged two numerically-identical accessors, and reverted a speculative interpolation-search optimisation).

Verification

• Full Cypress suite (44 pre-existing specs + the three new ones), run after rebasing onto master with fix(core): Initial Bug Fix 2: compute scrollTo page before deriving the paging offset #1231/fix(core): Initial Bug Fix 1: probe positioned-child limit in getMaxSupportedCssHeight #1232 merged: 617 passing, 0 failing.
• In-browser geometry checks: rendered row tops/heights equal provider prefix sums at rest, after scrollRowIntoView(5000), PageDown navigation, and after invalidateRowHeights() (canvas grows by exactly the delta, following rows reflow).
• Frozen×variable: a 3-frozen-row grid with a 40px first row sizes its frozen pane to 90px, and growing a frozen row via invalidateRowHeights() resizes it live (90 → 105px) with the first scrolling row staying at canvas top 0.
• 1M-row variable grid (33.5M px content, paging engaged): positions correct through page switches, scrollbar jumps, and return-to-top; no gaps/overlaps between consecutive rows.
• Fixed-mode regression probes: uniform grids and frozen-rows examples render byte-identical geometry (CSS-rule heights, no inline styles).
• Exhaustive per-pixel rowAt round-trip unit tests (uniform, random, and skewed height distributions; empty grid; metadata/provider fallback chain).

Notes

• Rebased onto master after fix(core): Initial Bug Fix 2: compute scrollTo page before deriving the paging offset #1231 (scrollTo page/offset order) and fix(core): Initial Bug Fix 1: probe positioned-child limit in getMaxSupportedCssHeight #1232 (positioned-child height probe) merged — both were found during this work; the rebase was conflict-free.
• v1 scope: heights are app-supplied and stable between invalidations (no auto-measure of rendered content). Plugins that do their own rowHeight math (row-move managers, menus, RowDetailView) are unchanged — exact in fixed mode, approximate in variable mode — and can be migrated to getRowFromPosition/getRowHeight(row) in a follow-up.

🤖 Generated with Claude Code

Demo

[pkg-pr-new]

angular-slickgrid

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

aurelia-slickgrid

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

slickgrid-react

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

slickgrid-vue

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

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

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

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

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

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

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

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

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

@slickgrid-universal/binding

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

@slickgrid-universal/common

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

@slickgrid-universal/composite-editor-component

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

@slickgrid-universal/custom-footer-component

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

@slickgrid-universal/custom-tooltip-plugin

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

@slickgrid-universal/empty-warning-component

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

@slickgrid-universal/event-pub-sub

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

@slickgrid-universal/excel-export

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

@slickgrid-universal/graphql

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

@slickgrid-universal/odata

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

@slickgrid-universal/pagination-component

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

@slickgrid-universal/pdf-export

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

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

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

@slickgrid-universal/rxjs-observable

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

@slickgrid-universal/sql

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

@slickgrid-universal/text-export

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

@slickgrid-universal/utils

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

@slickgrid-universal/vanilla-bundle

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

@slickgrid-universal/vanilla-force-bundle

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

@slickgrid-universal/web-mcp

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

commit: 506b389

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 100.0%. Comparing base (9688df2) to head (506b389).
⚠️ Report is 7 commits behind head on master.

Additional details and impacted files

@@           Coverage Diff            @@
##           master    #2650    +/-   ##
========================================
  Coverage   100.0%   100.0%            
========================================
  Files         200      200            
  Lines       25325    25436   +111     
  Branches     8954     8987    +33     
========================================
+ Hits        25325    25436   +111     

Flag	Coverage Δ
angular	100.0% <ø> (ø)
universal	100.0% <100.0%> (ø)

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:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[ghiscoding]

cc @zewa666 variable row height in Slickgrid-Universal 😄

Ben added a row height provider that can be added via grid option, but we also have the fallback to item metadata.height available as well. So we have 2 ways to do it... also codecov reports 106 loc, which isn't too bad I guess to get this great new feature 🚀

[zewa666]

hell yeah, looking forward to this release

[ghiscoding]

probably next week, I'll wait to see if Ben (6pac) update his PR to include my asks and fixes (I guess he will pretty soon since his Claude Fable 90% promo is about to end) 😆

so your own PR fix will have to wait few more days, but I guess it's worth the wait 😉