htmlcssreactjsantd

Ant Design Table with vertical and horizontal scroll


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:

Without setting height for the table

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

Setting height the table

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!


Solution

  • 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:

    Edit wonderful-tree-ukyy5