How to set width for columns?

Tags: #<Tag:0x00007f8b23f7c438>
#1

Hi,

Having a table which looks like this
Capture
I think by default, it takes the text size’s as width so, in order to save more space for larger texts, we have made text to be displayed as vertical(as displayed in the image) but then also it takes the width as ordinary text in colgroup how can we fix this?
I also set the width by using this colWidths: [100, 80. 90] but it seems this is fixed-width not getting increased(auto) when we have more content entered in the cell

How can we fix this? to save more space and as well as auto width adjust when entering them on the cell.

Thanks in advance!

#2

Hey @subashdbc

there is no built-in functioality to rotate headers.

You can try to use transform in afterGetColHeader and the set new height for the header with columnHeaderHeight.

However the filters are a bit off
https://jsfiddle.net/handsoncode/17dts0bo/

So this should be tested further.
It might be a fact that we need to exclude something from td.innerHTML and dig deeper to get only the SPAN of header.

#3

Thanks for the response,
I have written style to rotate the text(there is no problem there), the problem is

If I set column’s width like this colWidths: [100, 80. 90] column width is not auto-adjusting while I start to type in the cell it just wraps the text with available width
https://handsontable.com/docs/7.1.1/demo-resizing.html (This is just wrapping the text but want to auto-adjust width)
How to make the cell to be adjustable while start typing on the cell?

#4

Columns can have only two states

  • auto adjustable (when you do not set anything, default option)
  • fixed width (exmple colWidths: [100, 80, 90])

Once you set up a width for a column longer text wraps automatically creating a new row.
At this point there’s no way to set min- or max- widths. And once defined column cannot be reset.

#5

Thanks for the response.
I have attached a fiddle where I set colWidths: 60 to the table columns
But that doesn’t seem to be working, Can you help me to set a default width for columns?
https://jsfiddle.net/subashdbc/2n9a4s3z/31/

#6

@aleksandra_budnik can you help me on this?

#7

The issues comes from use of colspan: 0 in nestedHeaders.
As it doesn’t acually span the columns (as it set to 0) it should be removed.

#8

@aleksandra_budnik
Column doesn’t seem to be working properly when I remove colspan: 0, and also colWidths not working even if we remove colspan:0

Can you help me with that fiddle?

#9

@aleksandra_budnik is there anything that I miss? Or?

Thanks

#10

This is an interesting case. Tthe longer the title column is the wider is the column itself. It happens because Handsontable checks how long is the column and widens the width to fit it. It does not understand that the rotation is added.

#11

@aleksandra_budnik If I remove the style that I have added for text rotation, then also it doesn’t set the default width for the columns on the table,
https://jsfiddle.net/subashdbc/2n9a4s3z/48/

#12

@aleksandra_budnik Is there any solution for this?

#13

If I remove the style that I have added for text rotation, then also it doesn’t set the default width for the columns on the table,

Correct. You can see in the example that it is as long as the title.

If you’d like to ‘cheat’ that system you can use ::after CSS sub-class.

https://jsfiddle.net/handsoncode/sv80yotk/

image

But please consider this as a workaround, as officially we do not support this behavior.

#14

Thanks for the reply,

The problem is default colWidths is not getting applied in the below table (just please forget about rotating text)
https://jsfiddle.net/subashdbc/2n9a4s3z/56/

As you mentioned in the

‘6th comment removing’ colspan: 0 should work

but if I remove colspan: 0 also it doesn’t seem to be working.

I am looking for the solution for almost 1.5 days.
Can you please help on this fiddle itself and can suggest me the solution, it would too great.

#15

Hey colWidths: 60 works perfectly in this example https://jsfiddle.net/handsoncode/sv80yotk/

You just need to cut the header if it is too long and paste the rest via content in ::after

#16

Hey Subash,

hope the last demo helped but if not please let me know.

#17

Yeah thanks

#18

Great. Thank you.

#19