tbaro
commented
9 months ago A workaround for this is to set the frozen row heights to the heights of the scrollable body rows whenever the scrollable body row heights change. This is not ideal, as it means doing this in ngAfterViewChecked, as well as in the onNodeExpand and onNodeCollapse events and also whenever the viewport is resized., but at least it works. Example code attached:
IMHO, the tree table component would benefit from having a simpler more performant mechanism for handling this use case.
Describe the bug
With variable row heights, there is a mismatch between the frozen column row heights and the scrollable column row heights. More specifically:
When the height of the rows of scrollable columns are not all equal, the height of the corresponding frozen column does not match the height of the row of scrollable columns. In other words, row height of (pTemplate="frozenbody") does not match row height of (pTemplate="body".), when body row height is not a constant. There is no clear way to make these variable row heights match, which is strange because this should obviously be the default behaviour. Applying a fixed row height to both does not work as all rows would need to be set to the largest row height in the data set, which is not the desired behaviour,.
Environment
Issue occurs in all browsers on all operating systems. My specific O/S is Linux (Fedora 38) but same issue appears on Windows.
Reproducer
No response
Angular version
16.2.0
PrimeNG version
16.4.1
Build / Runtime
Angular CLI App
Language
TypeScript
Node version (for AoT issues node --version)
18.18.0
Browser(s)
All
Steps to reproduce the behavior
Example code attached:
example.zip
Run the attached simple example component - frozen column row heights do not align with scrollable column row heights.
Expected behavior
Height of frozen column rows should match height of scrollable body rows. If there is some use case where this may not be the desired behaviour (I can't imagine one), then a property could be made available (e.g. rowHeightMatching: boolean).