Need to combine the nestedHeader cell

Tags: #<Tag:0x00007f8b19e3ca50> #<Tag:0x00007f8b19e3c910>
#1

Hi
I want to achieve the following header
image

How can i do that

#2

Hi @sauravhunny

You would need to use nestedHeaders, you can read more about it and find examples here: https://handsontable.com/docs/javascript-data-grid/column-groups/

#3

yes I saw this example but I need to combine nestedHeaders as mentioned above image I shared, like “A” have colSpan = “2”, rowSpan=“2”

#4

That would require to merge column headers from two rows, but something like this isn’t currently possible. Nested headers can only be set to span horizontally, not vertically.

#5

okay got it, thanks.
I have one more problem where I need to add a custom class for example for nestedHeader “A”, is it possible?

#6

Yes, you can attach custom class with help of afterGetColHeader hook: https://handsontable.com/docs/javascript-data-grid/api/hooks/#aftergetcolheader

Here’s an example: https://jsfiddle.net/aszymanski/9pxfcjay/

1 Like
#7

great it’s working, also how to handle the column widths, while I am using nestedColumns? we can pass an array to columnWidhts props but as we have a dynamic headers there is no point of generating “columnWidhts” array to pass.

#8

You can do this by using manualColumnResize option: https://jsfiddle.net/aszymanski/dL6nch1o/

Its functionality is limited while using with nested headers, but it still allows you to resize columns manually.

#9