0

I have a table on React (Using AntD); but it doesn't matter for the question...

The issue is, that I want that cells of a specific column render text inputs... that this it's fine.

But, if I render only text inside the td element, the HTML table auto-width the column based on the longest value in the table... but if I render an input the auto-width doesn't work. I don't want to fix the column width (using px or %); I want the column with the inputs auto-growth depending on the longest value in the cells.

Here is the code:

https://codesandbox.io/s/keen-browser-v54fh?file=/src/columnsRender.js

This is a screenshot:

Example 1

This is another example:

Example 2

In the first example; looks almost good... In the second; it's so much space in the first column (The second column fits perfectly based on the data or in the header).

So, it's possible that a td element understand the width of an input element and automatically fixes the width of the column in the table? Or exists any workaround?

MiBol
  • 1,985
  • 10
  • 37
  • 64

2 Answers2

1

So, it's possible that a td element understand the width of an input element and automatically fixes the width of the column in the table?

It's actually that the input element doesn't understand the width of its content. The table doesn't know how wide to be, because the input doesn't know how wide to be. Check out these answers.

georgedum
  • 491
  • 3
  • 10
  • Seems I need extra logic to evaluate and change the width with code. Thanks for the reference! – MiBol Jun 05 '20 at 21:12
1

After checking out the possibilities, in a short answer. Just with CSS we cannot achieve something like this scenario.

But, as a workaround that almost works perfectly, I read each change and take the length of the string, and change the style not using px or %... instead of, I use ch to change the width of the input.

An additional setting, I put the style in all inputs of the same column with a min-width of 100%.

Here is an example:Example

The full example you can find it here: https://codesandbox.io/s/kind-thunder-z9qfb?file=/src/columnsRender.js

Using react, I made a custom hook to manipulate some events and keep all centralized.

MiBol
  • 1,985
  • 10
  • 37
  • 64