Table with enableVirtualization remains with expanded height when resizing columns with large values

[orlandoortegajr]

Describe the bug (actual behavior)

When you have a Table that has enableVirtualization and isResizable enabled and set pageSize (helps with visualizing the issue), if a column has a value that is large enough to significantly expand the table's height when that column is squished it will expand the table's height until its full value is visible within the new column's constraints. However, when you resize that column being squished back to accommodate for the larger value, the height does not reset, it still remains expanded.

Expected behavior

When a column with a large value is squished and re-expanded to allow for the largest value to have more space it should not have any additional height between the table body and the paginator.

Reproduction

Link to a minimal repro: https://codesandbox.io/s/thirsty-torvalds-l2tw0e?file=/src/App.tsx

Steps to reproduce

1. Create a table with multiple columns and data rows so that there are more than one page.
2. Add the isResizable and enableVirtualization to the table.
3. Add data to the table so that there is a large value in one of the columns.
4. Resize the columns to squish the column with the large value until it significantly expands the table's height.
5. Return that same column back to its original width
6. See how the height remains expanded.

Video link that is easier to follow:
https://user-images.githubusercontent.com/38387174/233438212-77f75ffd-3443-4bbe-871c-1e9957ebc059.mp4

[LostABike]

Thanks for reporting the issue. I think this issue might be related to #1107, and may be due to the instability in our virtual scroll behavior especially related to dynamic heights adjustment. I believe @gretanausedaite is working on getting the virtual scroll to behave correctly, which might fix this issue. We'll bring it up in our next team meeting on Monday.

[mayank99]

I also want to add that some height issues are totally expected with virtualization when relying on implicit height. For a more robust UI, consider these options:

• add a min-width to the column so it cannot be made too narrow
• add a max-width to the cell/row and truncate the overflowing text
• add a max-width on the table so it doesn't become too tall and instead starts scrolling

[orlandoortegajr]

@mayank99 I'll try to apply your suggestions when I got some time. Will report back with results hopefully by tomorrow.

[orlandoortegajr]

@LostABike After trying @mayank99 's suggestion's, setting a min-width for the columns that give problems when wrapped fix the issue so extra height is no longer seen.

Here is a repro of the fix applied to the original example: https://codesandbox.io/s/happy-water-nwg8lm?file=/src/App.tsx

I did try to truncate overflowing text, but for whatever reason couldn't figure it out, the usual "overflow: hidden; text-overflow: ellipsis; white-space: nowrap;" didn't work, only the style "white-space: nowrap;" seems to work, devtools pointed out that the styling was being applied, but somehow the cell cannot detect overflow, maybe I need to do something else because even setting a maxWidth for all of the cells in the column didn't work.

For our specific use case, we have tables of thousands of rows and one of the things we have struggled with is the CLS experienced by users when switching from page to page due to varying lengths of data within specific columns and it seems that the nowrap property really helps alot in reducing its effects. Let me know if y'all know how to truncate the text in these cells as that would be really helpful.

[mayank99]

@orlandoortegajr In your column object, you can use the Cell property to wrap your cell's value in a div and give it a custom classname to which you can apply the usual truncation behavior.

Cell: ({ value }) => <div className="my-name-cell">{value}</div>

.my-name-cell {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

You should also consider using line-clamp to display two lines of text instead of one, because two will not increase height or cause layout shift.

See sandbox: https://codesandbox.io/s/sleepy-pine-8xbwfo?file=/src/styles.css:155-273

(Side note: we are going to change all the iui- class names in the next major version, so you should try to avoid referencing them in your CSS.)

Let me know if you have any other questions, or if we can close this issue. Thanks.

[orlandoortegajr]

@mayank99 Yup, no more questions.

That is exactly what I need, looks pretty good, also yeah seems like line-clamp is a good option as well, will try it out and see.

Thanks for letting me know about the class name changes, will make sure to take that into account and look into other ways of targeting elements.