perf(slickgrid): stabilize paged scrolling edges and clarify paging path

[ghiscoding]

Summary

This PR improves SlickGrid virtual paging to reduce boundary jank on very large datasets while preserving variable row height behavior and existing scroll semantics.

Technical Changes

• Updated virtual page offset mapping in slickGrid.ts:
  • First page pinned to offset 0
  • Last page pinned to end offset
  • Interior pages evenly distributed between first and last
• Updated large-scroll page selection in slickGrid.ts:
  • Explicit first/last page handling near boundaries
  • Interior scaling only within interior range
• Integrated the new helpers into existing vertical scroll flow:
  • Used by scroll-to logic
  • Used by large scroll-delta branch in scroll handling
• Kept compatibility fallback paths for small/degenerate page regimes:
  • Small page count and non-interior scenarios still use stable fallback calculations
  • This is intentional to avoid edge-case regressions
• Minor readability/minimal-code cleanup:
  • Merged equivalent early-return guards
  • Removed redundant temporary variable usage
  • Renamed helper for clarity:
    • getPageFromLargeScrollPosition -> getPageFromLargeScrollDelta

Test Coverage ✅

• Added regression tests in slickGrid.spec.ts:
  • Boundary page mapping with variable row height enabled
  • Variable row position accumulation remains correct
  • Explicit branch coverage for fallback and interior mapping paths in paging helpers

What Was Reused From the Blog Posts

• Reused from Modern React Virtual Scroll Grid 9:
  • Pin first/last pages to container edges
  • Distribute interior pages between them
  • Separate boundary handling from interior scaling during large-scroll page selection
  • Source: https://www.thecandidstartup.org/2024/04/29/modern-react-virtual-scroll-grid-9.html
• Validated against Modern React Virtual Scroll Grid 8:
  • Original linear page spacing near boundaries can cause sticky/janky behavior at scale
  • Source: https://www.thecandidstartup.org/2024/04/22/modern-react-virtual-scroll-grid-8.html
• Confirmed compatibility with Modern React Virtual Scroll Grid 3:
  • Variable row height row-index/row-offset mapping remains owned by row position indexing
  • Paging remap is orthogonal and does not replace variable row offset mapping
  • Source: https://www.thecandidstartup.org/2024/02/12/modern-react-virtual-scroll-grid-3.html

Other References 🔗

GitHub project related to the same blog post

• https://github.com/TheCandidStartup/infinisheet/tree/main/packages/react-virtual-scroll

Performance Improvements 🚀

• Reduced large-dataset boundary jank by replacing linear virtual-page spacing with pinned-edge mapping:
  • first page pinned to 0
  • last page pinned to end offset
  • interior pages distributed across interior space
• Improved large-scroll page resolution by separating boundary and interior logic:
  • fast boundary routing near top and bottom
  • interior scaling only in interior range
• Wired both changes into active scroll paths:
  • getPageOffset now used by scrollTo page-to-offset mapping
  • getPageFromLargeScrollDelta now used by large scroll-delta page selection
• Preserved low-risk behavior in small/degenerate regimes through compatibility fallbacks, avoiding regressions while improving smoothness at scale.

LLM model attribution

This PR was assisted by GitHub Copilot using GPT-5.3-Codex.

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 100.0%. Comparing base (144cc05) to head (3da852a).
⚠️ Report is 1 commits behind head on master.
✅ All tests successful. No failed tests found.

Additional details and impacted files

@@           Coverage Diff           @@
##           master    #2721   +/-   ##
=======================================
  Coverage   100.0%   100.0%           
=======================================
  Files         200      200           
  Lines       25542    25557   +15     
  Branches     9030     9034    +4     
=======================================
+ Hits        25542    25557   +15     

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:

• 📦 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@2721

aurelia-slickgrid

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

slickgrid-react

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

slickgrid-vue

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

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

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

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

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

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

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

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

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

@slickgrid-universal/binding

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

@slickgrid-universal/common

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

@slickgrid-universal/composite-editor-component

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

@slickgrid-universal/custom-footer-component

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

@slickgrid-universal/custom-tooltip-plugin

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

@slickgrid-universal/empty-warning-component

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

@slickgrid-universal/event-pub-sub

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

@slickgrid-universal/excel-export

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

@slickgrid-universal/graphql

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

@slickgrid-universal/odata

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

@slickgrid-universal/pagination-component

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

@slickgrid-universal/pdf-export

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

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

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

@slickgrid-universal/rxjs-observable

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

@slickgrid-universal/sql

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

@slickgrid-universal/text-export

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

@slickgrid-universal/utils

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

@slickgrid-universal/vanilla-bundle

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

@slickgrid-universal/vanilla-force-bundle

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

@slickgrid-universal/web-mcp

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

commit: 3da852a