Hide or Collapse a single specific row in ag-grid using Javascript

Question

After a lot of search in SO without any particular solution, I am compelled to ask this question. In Simple words - I want to collapse or hide a specific row using Javascript in ag-grid. I have tried several methods explained in ag-grid documentation and also in SO, but none has worked till now.

All the following methods have been tried and none of the codes worked.

Let rowNode = gridOptions.api.getRowNode(params.value);

Method #1. params.api.getDisplayedRowAtIndex(2).setExpanded(false);
Method #2. params.api.getRowNode(params.value).setExpanded(false);
Method #3. gridOptions.api.setRowNodeExpanded(rowNode,false);
Method #4. gridOptions.api.getRowNode(rowId).style.visibility = "collapse";

I have also tried using plain CSS, like this - Data has disappeared but the white blank row is visible

rowNode.setDataValue('class', 'hidden'); //Where “class” is a field

const gridOptions = {
    //Other grid options...
  getRowClass: params => {
        if (params.data.class === "hidden") {
            return 'hidden';
        }
},

https://stackblitz.com/edit/js-nvtqhz?file=infoCellRenderer.js

Answer 1

setExpand / setRowNode Expanded only works on collapsible rows, ie it will collapse an expanded row. it will not hide it. I edited your stackblitz , I made a couple of changes to make it work.

1. Selectable Rows So, when you click a row, I'm marking it as selected. There is a property on ag-grid rowSelection: 'single' | 'multiple rowSelection: 'single' | 'multiple . If you want to hide only one row at a time, use 'single' if you can hide multiple rows use 'multiple'
2. External filtering So, ag grid can filters rows if we provide a criteria.It can be a check on any of data property as well. For your problem, I have added a filter that says if any row is selected, remove it from the grid. Following are the changes

/// method called on clicking the button
function hideRow(params) {
  let rowNode = gridOptions.api.getRowNode(params.value); // get the clicked row
  rowNode.setSelected(true); //mark as selected
  gridOptions.api.onFilterChanged(); // trigger filter change
}

Triggering the filter change will call this method for each row

function doesExternalFilterPass(node) {
  return !node.selected; // if row node is selected dont show it on grid.
}

You can access the rows hidden any time using gridOptions.api.getSelectedRows() //Returns an array of data from the selected rows. OR gridOptions.api.getSelectedNodes() //Returns an array of the selected nodes. And, if you want to show a row again, just filter from this above mentioned method and do these steps

rowNode.setSelected(false); //mark as unselected
gridOptions.api.onFilterChanged(); // trigger filter change

This will automatically show the row on grid. Hope this helps: :)