How to extend the width of a column header

How to extend the width of a column header to fit the headline? Now I have very narrow column and filter button doesn’t work. .
I use “stretchH: ‘all’” but it’s not good enough.

You can set them via colWidths option.

Example:
if you would like your table to have always 100px columns then you should type:

colWidths: 100

if you would like to have each column different in size you should pass the array of widths

colWidths: [100, 50, 300, 50]

When I use this solution and go to last column I get something like this:

Shift column and something weird at the end.

Can you create a demo (for example in the JSFiddle) when I’d be able to reproduce this behavior?

I’d love to but unfortunately the code is generated by the “asp” so I can not move it to JSFiddle

I see.

The first thing that came to mind mind was the styling. Are you using Bootstrap or any other CSS structure that can overwrite the main Handsontable settings?

Yes, I use Bootstrap and other CSS. I’m checking now if those solution have a influence on this.

If you have the AutoColumnSize plugin enabled (AutoColumnSize: true in your HOT settings), then in the AfterInit callback you can call

hot.getPlugin('AutoColumnSize').recalculateAllColumnsWidth();

where hot is the handsontable instance object.

Hope it helps!

It doesn’t change anything. If I apply this solution I get situation like on the first image which I attached.

Hi @pranosz
Have you already had time to check the styling?

No, I didn’t do this yet

Ok, when I delete the bootstrap, columns are stop moving.
Is it possible to move the text to a new line? Now if the column has a width smaller than the text, text is hidden. Or It is possibility to put text vertical in headers?

Hi @pranosz
You can treat your column headers as a html, like in this example:

code: Handsontable example - JSFiddle - Code Playground
image

Thank you

You’re welcome :smile:

I forgot to mention that you must call hot.render() to see the changes