TreeTable with scrollHeight="flex" shrinks the header as the table rows are expanded.

[mconner]

Describe the bug

When using a TreeTable with scrollHeight="flex", as the table nodes are expanded the header shrinks.

This appears to be caused by the fact that the styling for .p-treetable-scrollable-header (and .p-treetable-scrollable-footer) has overflow: hidden, its flex-shrink defaults to 1, and its parent element (p-treetable-scrollable-view) has display: flex and flex-direction: column. As such, when expanding the table nodes, the header shrinks.

Environment

Windows 10, using either:

• Edge (Microsoft Edge for Business, Version 120.0.2210.121 (Official build) (64-bit))
• Chrome: Version 120.0.6099.216 (Official Build) (64-bit)
• PrimeNG 17.3.1
• Angular 17.0.8

Reproducer

https://stackblitz.com/edit/54vzpp-lc5spd?file=src%2Fapp%2Fdemo%2Ftree-table-scroll-vertical-demo.html

Angular version

17.0.8

PrimeNG version

17.3.1

Build / Runtime

Angular CLI App

Language

TypeScript

Node version (for AoT issues node --version)

20.10.0

Browser(s)

Edge (Microsoft Edge for Business, Version 120.0.2210.121 (Official build) (64-bit)) Chrome: Version 120.0.6099.216 (Official Build) (64-bit)

Steps to reproduce the behavior

The Reproducer link is a clone of the example provided in the Vertical scroll example in the documentation, where the card style has been modified to limit the available size (and provide an obvious border, so you can see that.)

1. Expand the table nodes
2. Note that the header is cut off.

Workaround:

1. Uncomment the ng-deep scss to set the table header to not shrink.

Expected behavior

The header should not be cut off as the as the table grows.

[mertsincan]

Thanks a lot for your report! We'll check it before the milestone is released.