How to set and persist collapsed nested header sections by default in Handsontable?

Hi,
I’m using Handsontable with nested headers and have enabled collapsibleColumns: true to allow users to collapse header sections. My table has over 50 columns and a single header row. I want certain header sections to be collapsed by default when the page loads.
What I’ve tried so far:

- I tried using the collapseSection hook to programmatically collapse sections, but it doesn’t seem to work as expected on initialization.
- I’ve searched the documentation and forums but haven’t found a way to set the initial collapsed state for header sections.

Additional issue:

I’ve also noticed that when I collapse a header section and then switch to another application or browser tab, the headers reset and all sections expand again. Similarly, when a user revisits the page, the collapsed state is lost and everything is expanded by default.
My questions:

- Is there a built-in state, prop, or configuration option to specify which header sections should be collapsed by default?
- Is there a way to persist the collapsed/expanded state of header sections across navigation, tab switches, or page reloads (for example, using local storage or another method)?

Hi @rocking00star

Thank you for contacting us. I checked with the collapseSectionmethod, and it works correctly: Handsontable example - JSFiddle - Code Playground

However, I can’t reproduce the issue with resetting the state while switching between the browser tabs. Please, share a code demo where that problem can be replicated.

Hi @adrian.szymanski
Thanks for the response.
My parent component was rerendering one extra time due to which my component was rendering and my table structure was getting disturbed.
Refactored my component fixed the issue.

1 Like