Skip to content

feat: add table virtualization (v0, opt-in windowed scrolling) [WIP]#4821

Draft
ernst-dev wants to merge 1 commit into
mainfrom
feat/table-virtualization-wip
Draft

feat: add table virtualization (v0, opt-in windowed scrolling) [WIP]#4821
ernst-dev wants to merge 1 commit into
mainfrom
feat/table-virtualization-wip

Conversation

@ernst-dev

Copy link
Copy Markdown
Member

Description

[WIP] First-cut (v0) of opt-in windowed / virtual scrolling for Table — tracking Epic AWSUI-39656 ("Add virtualisation to table component").

This is an epic-scale, multi-week effort. This PR is an intentionally-scoped v0 draft meant to establish the shape of the API and the row-windowing mechanism, not a finished feature. It is additive and fully opt-in — behaviour is unchanged unless the new virtualScroll prop is set.

What this does

When virtualScroll is enabled, the table body renders only the rows within (and near) the visible viewport instead of the whole dataset, keeping very large tables performant. Total scroll height is preserved with lightweight top/bottom spacer rows.

v0 scope (done in this PR)

  • New experimental public prop virtualScroll?: boolean | TableProps.VirtualScrollConfig (tagged @awsuiSystem core), with VirtualScrollConfig (rowHeight, overscan). Full JSDoc.
  • New useVirtualScroll hook (src/table/use-virtual-scroll.ts): computes the visible row window from the scroll container's scrollTop / clientHeight, with overscan and uniform estimated row height.
  • Wired into src/table/internal.tsx: reuses the existing allRows pipeline and wrapper scroll container; slices the rendered rows and emits aria-hidden spacer rows. Absolute row indices preserved so selection / prev-next / role props are unaffected.
  • Dev page: pages/table/virtual-scroll.page.tsx (10k-row table in a bounded-height scroll container, toggle).
  • Unit tests: hook (use-virtual-scroll.test.tsx, 5 cases) + component (virtual-scroll.test.tsx, 4 cases).
  • Documenter snapshot regenerated for the new public API.

Remaining work (follow-ups — NOT in this PR)

  • Variable / measured row heights (v0 assumes a uniform rowHeight). Consider leveraging the already-vendored src/internal/vendor/react-virtual.js.
  • Window/page-level scrolling (v0 requires a bounded-height scroll container) and interaction with stickyHeader.
  • Accessibility correctness: aria-rowindex / aria-rowcount with GridNavigationProvider when only a window is rendered; keyboard navigation into off-screen rows; screen-reader verification.
  • Interaction with sticky columns, expandable rows, progressive loading, inline edit, resizable columns while windowed.
  • Integration tests, visual regression, and perf benchmarks; scroll-anchoring / jump-free fast scrolling.
  • API review before any stabilization (currently experimental / core).

Ticket note

The referenced SIM AWSUI-39656 resolves correctly to "Add virtualisation to table component" — it matches this task. No ticket mismatch.

How has this been tested?

  • eslint (Node v24) — clean on all changed files.
  • stylelint — clean.
  • gulp quick-build and full gulp build (incl. docs) — green.
  • New unit tests — 9/9 pass. Existing Table suites (table, progressive-loading, expandable-rows, selection) — 103/103 pass (no regressions).
  • Manual: dev page #/light/table/virtual-scroll renders a 10k-row table; only a window of rows is in the DOM.
Review checklist

The following items are to be evaluated by the author(s) and the reviewer(s).

Correctness

  • Changes include appropriate documentation updates. — JSDoc + documenter snapshot; customer-facing docs are follow-up.
  • Changes are backward-compatible if not indicated. — Yes, additive and opt-in.
  • Changes do not include unsupported browser features. — Yes.
  • Changes were manually tested for accessibility.Not yet (tracked as follow-up; WIP).

Security

  • If the code handles URLs... — N/A.

Testing

  • Changes are covered with new/existing unit tests? — Yes.
  • Changes are covered with new/existing integration tests?Not yet (follow-up).

By submitting this pull request, I confirm that you can use, modify, copy, and redistribute this contribution, under the terms of your choice.

@codecov

codecov Bot commented Jul 23, 2026

Copy link
Copy Markdown

Codecov Report

❌ Patch coverage is 99.00990% with 1 line in your changes missing coverage. Please review.
✅ Project coverage is 97.61%. Comparing base (f97729a) to head (2401d85).
⚠️ Report is 1 commits behind head on main.

Files with missing lines Patch % Lines
src/table/internal.tsx 98.63% 1 Missing ⚠️
Additional details and impacted files
@@           Coverage Diff           @@
##             main    #4821   +/-   ##
=======================================
  Coverage   97.61%   97.61%           
=======================================
  Files         952      953    +1     
  Lines       30816    30858   +42     
  Branches    11318    11334   +16     
=======================================
+ Hits        30081    30122   +41     
- Misses        688      689    +1     
  Partials       47       47           

☔ 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.

@ernst-dev ernst-dev changed the title [WIP] feat: add table virtualization (v0, opt-in windowed scrolling) feat: add table virtualization (v0, opt-in windowed scrolling) [WIP] Jul 23, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant