Hide nested headers

Tags: #<Tag:0x00007efc609f8fb8>
#1

How can I hide nested headers?

#2

Hi @pranosz
Sure you can. Here is an example on how to collapse some headers: http://jsfiddle.net/budnix/rcj9s04t/1/ and here http://jsfiddle.net/m3vsk0fm/ is an example how to hide them.

#3

This example shows how to hide columns. I need hide headers row. In second example (http://jsfiddle.net/m3vsk0fm/) you have four rows of headers. How to hide first three rows?

#4

You can just change the nestedHeaders option via updateSettings like in this example: http://jsfiddle.net/4myxqcLL/
If you have some draft on how you would like your headers to look like I’d be happy to take a look and help you with the settings.

#5

I try to put some information in headers and hide them because I want to export this information to excel and I don’t want show this information on a screen.

#6

Is there any solution for this problem?

#7

Hi @pranosz
You can just set to do not show the headers in the .csv file by adding columnHeaders: false (docs: https://docs.handsontable.com/pro/1.5.1/demo-export-file.html)

#8

:slight_smile: But I want something opposite – I want show headers in csv but hide them on a screen.

#9

Ohh…
Maybe it would be better to treat the first row as a header, hide it and use the exportHiddenRows in your export plugin

#10

Yes, it would be great, but how to do this? How to hide headers row???

#11

This

hiddenRows: {
      rows: [0],
      indicators: true
    }

will hide the first row of data.

Then you can pass there anything you want via

instanceName.setDataAtCell(row, col, 'value')

and the data will be hidden for users and available to you in your new .csv file.

For hiding row headers just add the

rowHeaders: false

you can also overwrite row headers providing an array or a result of a function. By doing this you can pretend that the 2nd row is actually a 1st row, like here: http://jsfiddle.net/vf7h288q/
The only case is that the top border of the 2nd row header is missing.

#12

OK… I explain again what I mean.
In export (excel file) I want to have something like this:

excel_export.png671×515 21.7 KB

Green mark – table which we can see on the screen in web service.
Red mark – additional information which we can’t see in web service, but this information are related with the table.

“hidden Rows” hide rows, not headers. If I add “row Headers: false” nothing will change. Either I’m doing something wrong.

#13

There’s no option to push something above the headers of the Handsontable so the only way is to fake headers for users. What is important: in this example the sorting won’t work. The same for moving and resizing.

Here’s an example: http://jsfiddle.net/4bgr3b4z/

After commenting the:

hiddenRows: {
          rows: [0, 1, 2, 3, 4],
          indicators: false
        }

you’ll see that the table is actually like this:

#14

That’s why I want to use nested headers and hide them.

#15

Unfortunately export plugin wasn’t planned to work with nestedHeaders.

#16