Add virtual scrolling support to tables #32487
Open
+646
−59
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Revives the changes from angular#21708 and brings the up to date with the current repo. Note that this is the initial step, we still need some fixes an cleanups. Co-Authored-By: Michael-James Parsons <MichaelJamesParsons@users.noreply.github.com>
Fixes an issue where the table virtual scroller was jumping back to the top whenever it needs to re-render.
The table virtual scroller had a proxy class to work around a circular DI error. These changes rework the usage site so the workaround isn't required anymore.
We can put the factory in-line, instead of having to export it.
Combines the logic from the `CdkTableVirtualScroll` with the existing `CdkTable`. This allows us to remove the following steps from the virtual scrolling setup: 1. Having to import `CdkTableVirtualScroll`. 2. Having to set `fixedLayout` on the table. 3. Having to set `virtualScroll` on the table.
Exposes the `renderedContentOffset` stream on the virtual scroll viewport since it can be useful for users outside of the CDK table.
Implements the `measureRangeSize` method so the CDK table is compatible with auto-sizing.
angular-robot
bot
added
detected: feature
crisbeto
added
the
merge: preserve commits
Adds examples of virtual scrolling to the CDK and Material tables.
Sets up some tests for the virtual scrolling logic.
crisbeto
force-pushed
the
table-virtual-scroll
branch
from
e426476 to
3140223
Compare
crisbeto
commented
Dec 5, 2025
| @@ -0,0 +1,37 @@ | |||
| <p>Showing {{dataSource.length}} rows</p> | |||
|
|
|||
Member
Author
There was a problem hiding this comment.
Note that there's a slight jump in this example when the column width changes. It's because the fixedLayout option is broken on the Material table. I'll send a separate PR since it may require some client fixes.
10 tasks
andrewseguin
added
dev-app preview
|
Deployed dev-app for 3140223 to: https://ng-dev-previews-comp--pr-angular-components-32487-dev-ocum18z8.web.app Note: As new commits are pushed to this pull request, this link is updated after the preview is rebuilt. |
|
Deployed docs-preview for 3140223 to: https://ng-dev-previews-comp--pr-angular-components-32487-docs-9to7g8zs.web.app Note: As new commits are pushed to this pull request, this link is updated after the preview is rebuilt. |
andrewseguin
approved these changes
Dec 5, 2025
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Updates the CDK and Material tables to add support for virtual scrolling. This is based on the initial work in #21708 that I've productionized, made more ergonomic, fixed a few bugs, added tests and documentation.
To enable virtual scrolling for the table, you need to do two things.
<cdk-virtual-scroll-viewport/>around it:Related to #10122.