Hiding rows with the hiddenRows Plugin in React

Tags: #<Tag:0x00007fa999931440>

Hi again :]

I am trying to get the hidden rows plugin to work in React to collapse / expand rows using a button in the table. I wasn’t able to get the hiddenRows table prop to work in the table settings like <HotTable hiddenRows={{rows: [3, 4, 5]}} /> (even though it worked in jsfiddle) so I was trying to experiment with hiding / showing rows with calling the hideRow and showRow plugin functions like shown here (https://handsontable.com/docs/7.3.0/demo-hiding-rows.html#examples <- go to ‘api examples’), but it doesn’t seem to work like described in the docs. Any ideas what I’m doing wrong?

https://jsfiddle.net/7w52mkgd/1/

Thanks for looking,
Marc

Hello Marc!

You have to enable the plugin first hiddenRows={true} and then remember to cal render() after using plugin API.

Kind regards
Wojciech

Hi Wojciech,

Any idea what I’m doing wrong here? tried enabling the plugin and calling this.forceRender() after the plugin call to hide the row

https://jsfiddle.net/w8chzn7f/

Best,
Marc

Hey Marc,

there are multiple red dots that insidate where the issues are

If you hover over them you get some hints.

Looks like valid ES6 React to me but I’m not sure if I set up the fiddle correctly. On another note, I didn’t realize that this plugin was a pro feature. I will update with the css solution of hiding the tr using display: hidden once I get it working

@eastmanmarcusc

I can recommend codepen https://codepen.io/anon/pen/QgQmLX?editors=0010 here’s a demo in React that works well.

Hey @eastmanmarcusc

how’s the progress?

Hi @aleksandra_budnik,

I was able to hide certain rows using the parent selector on the td in the renderer to access the tr that needs to be hidden, and applied display:none to the tr. My problem now is that I need to put a button in the table with an onclick event to alter the state, but I’m not sure how to do that at the moment. Was not able to get a codepen working atm will try next week