adobe / adobe/spectrum-web-components

[Bug]: sp-table virtualization miscalculates visible rows with variable row heights at certain viewport sizes

Open
#6,398 4 comments 0 reactions 0 assignees View on GitHub
bug Component:Table SEV 3 triage
Dominant language
TypeScript
Stars
1.5k
Forks
262
Avg merge
3d 10h
Merged PRs (30d)
68

Description

### Code of conduct

- [x] I agree to follow this project's code of conduct.

### Impacted component(s)

sp-table

### Library version

@spectrum-web-components/table: 1.9.0

### Expected behavior

All table rows should render correctly regardless of viewport size when rows have variable heights (e.g., cells containing lists of different lengths).

### Actual behavior

When using sp-table with virtualization (scroller enabled) and rows have variable heights:
1. At certain viewport sizes (e.g., split screen ~50% width), some rows fail to render
2. The row count is correct, but not all rows are visible
3. Resizing the window triggers recalculation and all rows appear correctly

### Screenshots

_No response_

### What browsers are you seeing the problem in?

Chrome

### How can we reproduce this issue?

1. Go to Horizon Portal > Teams & Components registry (https://portal.hz.adobe.com/team-component-registry)
2. Filter by a System Pillar that has teams with varying component counts (e.g., AI Foundations)
3. Resize browser to ~50% width (split screen)
4. Observe that some rows at the bottom don't render, even though the row count shows correct total
5. Manually resize the window slightly - missing rows appear

### Sample code or abstract reproduction which illustrates the problem

_No response_

### Severity

SEV 3

### Logs taken while reproducing problem

_No response_

### Would you like to track this issue in Jira?

- [x] Yes, please tell me the ticket number!

Contributor guide

Open the contributing guide

Research direction

Start by reproducing the issue in @spectrum-web-components/table: 1.9.0 using the Horizon Portal Teams & Components registry with scroller enabled, variable-height rows, and a split-screen viewport. Compare the rows before and after a slight window resize; done means all rows remain visible at the original viewport size without requiring a resize.

Written by the indexing model from the issue text.

Assessment

Tech stack
typescript
Domain
frontend, performance
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Quiet
Clarity
Mostly clear
Newbie friendliness
48/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.