-
Goal: Get consistent resizing behavior for tables with
Height: Auto
andExpandable Rows
-
Steps: Use the JSON export below or create a new app, drag in a table (with demo data), enable expandable rows and set table height to auto.
-
Do the following sequence to break the calculation of height:
- Expand rows with ID's 99 & 98 (IDs are from demo data, order doesn't seem to matter)
- Collapse 99 (last row)
- Collapse 98 (penultimate row) which will cause a gap to exist as if 99 was still expanded (see screenshot)
-
Do the following to reset: Expand & Collapse the last row, and it recalculates correctly.
-
Details: Using Retool Cloud. To get it to reset after doing the procedure above, if you expand and collapse the last row, the table resizes correctly. Then if you repeat the procedure above, it reoccurs. What I suspect is happening is that when the last row is collapsed before the row directly before it, it results in
div[role="rowGroup"]
not recalculating the table height. It keeps the table height from when the last row was expanded. What I don't understand is that this seems to only happen if I expand and collapse the last and penultimate rows in that sequence I describe above. Please let me know if you can reproduce beyond the limited steps above. -
Screenshots:
-
App json export:
table-resizing-broken-with-expandable-rows.json (119.4 KB)
1 Like
Hi @Abhilash_Nair! Thanks for reaching out.
And thanks for such a detailed description. I was able to easily reproduce the behavior that you're seeing by following the instructions you provided. A few notes:
- this isn't limited to tables with
Height
set toAuto
- scrolling up and back down also causes the table to resize correctly
I've reported the issue to the team and will follow up here as soon as I have an update to share!