Setting column width for Nested Headers

Tags: #<Tag:0x00007fd2c71082a8>

Hi there! I am wondering if there is a way to set a fixed column width when you have nested headers. In the screenshot below, I want the underlined header to be 70px wide, and for the text in the header to wrap.

This works fine for non-nested headers using the colWidths, or modifyColWidths callbacks, but these don’t seem to work when you have nested headers. Thanks in advance for your help!

The colWidths will work if you’d like to set up a width for columns. But it won’t make a column narrower than the title. Here’s is an example https://jsfiddle.net/handsoncode/t1ed5kfs/

ps. how long is that column now? How much it has to have to fit the title?

Hi Aleksandra, thanks for the prompt rely! Yes, what you describe is exactly what I noticed. I am actually trying to make the column narrower than the title, such that the title can wrap.

I have certain columns with very long column titles, maybe 120px wide, but my input is just a simple number. Therefore, I’d like to fix the column width to say, 50, and have the title wrap. This does work if I don’t have a nested header, and just use the modifyColWidths callback, as below:

However, it doesn’t look like it’s possible with Nested headers?

Thanks!
Wen

You can use HTML directly in the nestedRows labels https://jsfiddle.net/handsoncode/hckrsdno/ to break the lines.
Would that work in your project?