So, I am working on a feature where I need to build a table which has some fixed and some dynamic columns. As the question indicates, I am using the Ant design table component.

In short, I have a column for the actions, within this column, I am conditionally populating its cells with either 2 or 3 buttons, each triggering a process.

Now, these buttons, by default only show the icon, however, when hovering over one of them they expand and thus take more space. My objective is to find a solution where the column`s width adjusts itself (i.e. expands to the right) such that all the content fits in on the same line. Furthermore, it is a requirement that the space of the column from both left and right should be kept to a minimum as much as possible, hence, the width adjustment.

Attempts:

• use the className property and attempt to use min/max-width, width with all the properties and combinations - If we use the "auto" than, unfortunately, the width will be handled by ant design
• use the width property on the column object

Here are some additional imgs the first one (1) represents the column object while the second one (2) represents the table with its properties

• (1)
• (2)

If there is anything else you think I could provide to further clarify this issue, please let me know, also, thank you in advance for taking the time solving this issue 👩‍💻👩‍💻