I am encountering an issue with a React table (Using AntD), where I want cells in a specific column to render text inputs. The problem arises when the td element only contains text, as the HTML table automatically adjusts the width of the column based on the longest value in the table. However, when an input element is rendered, the auto-width feature does not function properly.
I do not wish to set a fixed width for the column using pixels or percentages; rather, I would like the column with the inputs to dynamically adjust its width based on the longest value within the cells.
Here is the code:
https://codesandbox.io/s/keen-browser-v54fh?file=/src/columnsRender.js
This is a screenshot:
https://i.sstatic.net/ebHVd.png
Another example can be seen here:
https://i.sstatic.net/d4kJ2.png
In the first example, it appears almost perfect... However, in the second example, there is too much space in the first column and the second column adjusts perfectly based on the data or header.
Is there a way for a td element to recognize the width of an input element and automatically adjust the width of the column in the table? Or is there any workaround available?