Callapsing Row

Tags: #<Tag:0x00007efc64e79908> #<Tag:0x00007efc64e797c8>

I was implementing collapsible rows like this

that collapsing like this

any idea how to implement it on handsontable.

Thank you

Hi @creativeteam

Thank you for contacting us. Did you try to do your implementation with our row parent-child feature? Here you can find more information about it along with the examples: https://handsontable.com/docs/javascript-data-grid/row-parent-child/

but my array data not suppose to have children. its a fixed data row.

In this case you would need to do a custom implementation that would require to modify rowHeaders to add the buttons. This can be done with this hook: https://handsontable.com/docs/javascript-data-grid/api/hooks/#aftergetrowheader

You would also need to use hiddenRows plugin methods to show/hide chosen rows: https://handsontable.com/docs/javascript-data-grid/api/hidden-rows/

1 Like

Thank you for the reply i did what you said but im having a problem. its not hiding or showing nothing happens when i click the button.

see the button here are changing everytime i clicked it


i also tried the hideRows([array]) and showRos([array])
https://handsontable.com/docs/javascript-data-grid/api/hidden-rows/

but nothing is happening maybe can you help me again.

Thank you

Hi @creativeteam

Looking at your code your implementation looks correct. Do you get any errors in the console? Can you also try to log the plugin itself to see if it’s defined?


Its fixed now thanks i just need to add the render function.

Thank you so much

Thank you for the update @creativeteam

I am closing this thread as solved.