Diaan
commented
1 month ago Presumably the issue is that the calculation of the height of the table is based on the default row height, either by looking at the first # rows, or just the rows that are in view. When the filtering is then applied it uses incorrect "children sizes" to calculate the required height of the table.
Adding this.#virtualizer?._layout?._metricsCache?.clear(); and/or this.#virtualizer?._measureChildren();
doesn't fix the problem.
In a certain combination:
The rows are placed too far from each other (
transform: translate(0px, 200px);), but only when the height of the page (or container) is way bigger than the newly filtered rows. In a smaller window the calculation seems to be correct. But when there is only one row left the height is incorrect.
In the case of incorrect placement of the rows and the incorrect height when there's only one row it uses row heights of 100px.
It feels like the 100px is some sort of default; when it can get or read any values it just calculates with that value...
jpzwarte
Provide a general summary of the issue here
If a grid cell has a very long text, the row is not high enough to show all text. Please see the example below.
🤔 Expected Behavior?
The cell should show all text
😯 Current Behavior
💁 Possible Solution
No response
🖥️ Steps to Reproduce
clone the latest version of the example project
git clone https://github.com/fransdeboer/grid-poc.gitinstall dependencies
npm irun the project
npm run devopen a browser at http://localhost:5173/
filter the Profession column to check the option "This is a really long description of a profession"
only one row should be displayed, but the row is not high enough to show all text
What browsers are you seeing the problem on? (only for bugs in code)
Chrome
If other, please specify.
No response
What operating system are you using?
WSL
👤 Your name
Frans de Boer
🧢 Your product/team
Magister
🎨 Your Theme(s)
Magister