Ant Design Table with vertical and horizontal scroll

Question

I'm using Ant Design Table to show dynamic data from an internal API here in the company.

This means that I don't know what kind of data I will receive to fill each cell. It can be a large text, a number, an empty value, a short string, image, url, anything.

I need to apply horizontal and vertical scroll, but as described on Ant Design docs:

Specify the width of columns if header and cell do not align properly. (Leave one column at least without width to fit fluid layout) A fixed value which is greater than table width for scroll.x is recommended. The sum of unfixed columns should not greater than scroll.x.

Right now, the width is fine, Ant Design Table could figure out the best proportion for each column. See the image bellow:

The problem is when I set the y scroll. Bellow an example:

The major issue here is that I don't know the size of the data for each column. Speaking of columns, I have to extract the key from the table source in order to generate the columns dynamically.

Is it possible to go around this behavior?

Thanks!

Answer 1

So this is a known issue at Ant Design check here, here, here and here

there is not a proper fix, I faced the same issue, I tried setting the width for each column, Set "width" property in the column works, but it breaks for sticky header.

another simple way around to this is using horizontal scroll and removing vertical scroll somewhat like this

scroll={{ x: 400 }}

Answer 2

I came up with a workaround for my problem. In order to set a width for the entire table based on the width of my columns, I had to go through all the table data calculating each cell width based on the length of its own content.

After that, I can sum the total width and set it to the table.

Here an example using this approach: