Handsontable - hide specific row ( by cell value)

Question

How to hide specific rows in Handsontable.

I have buttons in DOM, each of them should hide specific rows. For example: click button with class `alarm' should shide all rows which second column has value 'alarm'.

For now i do ugly thing. Every button click i loop overy my tableData and delete datas with 'alarm' then just load data and render table. But i can't do that becouse i have some dynamic datas so after render their disapear.

eveGrid.loadData(tableData);
eveGrid.render();

Answer 1

Dynamically hiding rows is quite a complex task which is not documented in the Handosntable documentation. However, there is plenty of functionality available to implement it ourselves. As a matter of fact, I had to do this just last week so I can share with you a potential approach. It's really quite simple and similar to your solution, which is not ugly by the way!

What you want to do is keep two copies of your data. The first we can call data , and the second activeData . Initially, they both equal each other. Now this part is tricky and not easy to grasp but what you have to make sure is that these two arrays are DIFFERENT OBJECTS, but have the SAME REFERENCED ELEMENTS. What this means is that the arrays themselves are not clones , so an equality test would fail. However, their elements are clones. Your activeData elements are just references to the elements on data .

Once we have this set up, it's simple to implement the hiding of rows. Your click should look through data and set a new activeData based on the matching rows you want to display. Then just update handsontable with something like:

hotInstance.updateSettings({data: activeData});

And that's it! Note that that updating method will automatically trigger a render() .

Let me know how it goes, I'm curious to see if other people can use this approach.