[GH #7604] Nested Header default values

Tags: #<Tag:0x00007efc6552e7a8> #<Tag:0x00007efc6552e528>

I’m trying to add a 2 row header via nestedHeaders.

I would like the default headers for the first row (i.e., A, B, C, D, …) and blank for the second row. Is there a way to force handsontable instance to use the default header values? or a function to get a string given a minCols?

Something like

nestedHeaders: [someFunction(200), [ ]]

Hi @gofactr

the colHeaders helper attaches the A, B, C… values to headers but here https://jsfiddle.net/mor6L8cp/ I’ve made an example that returns filled and empty headers.

Would that help? It works well with no data and minCols https://jsfiddle.net/mor6L8cp/1/

Thanks
It looks like all updating to header values now has to go through
hot.updateSettings({nestedHeaders: []})

What is the equivalent to hot.getColHeaders() for nested headers? I don’t see it in the documenation.

Is there a built-in function to return the default header strings (‘A’, ‘B’ etc…)

getColHeader() (without arguments to call it for all) gives all the levels of headers

image

The https://jsfiddle.net/6xz7psuf/

Is there a built-in function to return the default header strings (‘A’, ‘B’ etc…)

We use an internal method to achieve it https://github.com/handsontable/handsontable/blob/8b6e9c404ac0aa4fb211a6bedbd68b7fbd81c658/src/helpers/data.js#L13. I recommend building a self method to do so like https://jsfiddle.net/p16grswy/

When I use getColHeader() it doesn’t return all the levels, it only returns the single level header of something else? In your example, it seems to be printing out something completely different? You have two print statements in someFunction and the afterRender is a different length and null? Am I missing something?

I found this from the github issues
hot.getSettings().nestedHeaders
is this the preferred method?

That’s right. Sorry, I was printing the method array, not the getColHeader.

Yes, the getSettings().nestedHeaders is the right one. In the example we just need to pass the same parameter to someFunction2 as it was for someFunction. Cause without it your null array will contain only 10 elements. Updated demo https://jsfiddle.net/s3og91ha/1/

Thanks. Is there a way to force the nested headers to resize to the appropriate width, I notice if I update the nested headers then the column widths become extremely small?

Nested Headers

Single Header

It the JSFiddle both colums (with/without nestedHeaders) are 50px-wide (and extend with content)

Could you show me how to replicate those narrow columns? Are you using stretchH maybe?

https://codepen.io/Eribean/pen/YzpLBGd

Thank you for sharing the demo. I have simplified the setting so we have only the colWidths that change https://codepen.io/aleksandra-budnik/pen/dyOKRYB

I’m in a middle of a conversation with my colleague. However, I do not see full support for ‘undefined’ value for nestedHeaders. It also results in a situation when provided data is cut.

image

We have checked the way those columns are calculated and the mechanism itself is correct. However, to get the same effect as with the colWidths we’d need to expand those columns with content.

I’m not sure if this is an answer or not? What do I need to add to updateSettings when using nested headers?

A workaround I’ve identified is to use updateSettings twice:

hot.updateSettings({colWidths: Array.from({length: numCols}, (_, ndx) => hot.getPlugin('autoColumnSize').getColumnWidth(ndx))})

but rendering twice with lots of data is not ideal.

Hey @gofactr

I have reported this behavior as a ug for nestedHeaders https://github.com/handsontable/handsontable/issues/7604 and will update you as soon as we get it solved.