How to hide column in AG-Grid?

You can set the column property of suppressToolPanel to true to achieve that.

var columnDefs = [
    {
       headerName: "Stone_ID",
       field: "Stone_ID",
       width: 100,
       hide: true,
       suppressToolPanel: true
    }
]

To do this programatically you can use:

Hide columns:

this.agGrid.columnApi.setColumnsVisible(["COL_ID_1", "COL_ID_2"], false);

Show columns:

this.agGrid.columnApi.setColumnsVisible(["COL_ID_1", "COL_ID_2"], true);

To do this for a whole column group you can use:

  const group = this.columnApi.getColumnGroup("MY_GROUP");
  group.children.forEach(child => this.columnApi.setColumnsVisible(child, false));

If you are looking for dynamically show/hide columns follow below:

You can use either setColumnVisible or setColumnsVisible.

NOTE: those functions expect a colKey(s) which is related to the field you set in columnDefs.

columnDefs = [
    {
       headerName: "Name", 
       field: "name", // => that!
       width: 150
    },
    {
       headerName: "Last Name", 
       field: "last_name", // => that!
       width: 150
    },
    // ...
];

When using setColumnVisible you can show/hide a single column

gridOptions.columnApi.setColumnVisible('name', false) //In that case we hide it

When using setColumnsVisible you can show/hide multiple columns

gridOptions.columnApi.setColumnsVisible(['name', 'last_name'], true) //In that case we show them