angular / angular/components

Dynamic viewport height

Open
#14,037 6 comments 19 reactions 0 assignees View on GitHub
area: cdk/scrolling area: material/table feature P3
Dominant language
TypeScript
Stars
25k
Forks
6.8k
Avg merge
1d 8h
Merged PRs (30d)
91

Description

#### Bug, feature request, or proposal:
Dynamically adjust the size of the table according to its content

#### What is the expected behavior?
It would be interesting to be able to define only the maxheight of the table and to adjust it dynamically according to the amount of data it contains until it reaches the maxheight. When the size is max height the virtualscrolling is available.

#### What is the current behavior?
When the cdk-virtual-scroll-viewport has no defined height it does not display all available values. If the height is defined the viewport displays all lines but when it is undefined just a few lines are displayed.

#### What are the steps to reproduce?
[Stackblitz](https://stackblitz.com/edit/angular-cdk-demo-virtual-scroll-jqpazr?embed=1&file=app/app.component.ts)

#### What is the use-case or motivation for changing an existing behavior?

#### Which versions of Angular, Material, OS, TypeScript, browsers are affected?
latest cdk-experimental

#### Is there anything else we should know?

Contributor guide

Open the contributing guide

Research direction

Start by running the linked StackBlitz reproduction and inspect the cdk-virtual-scroll-viewport behavior when its height is undefined. The work is done when the table grows with its content up to a configured max height, while virtual scrolling remains available at that limit.

Written by the indexing model from the issue text.

Assessment

Tech stack
angular, typescript
Domain
frontend
Issue type
Feature
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.