HOw to hide and Show ag-grid columns based on Header name rather than field name

I am trying to hide/show column based on headername using ag-grid. As you can see below, I have used setColumnsVisible to achieve the same. But I need to this based on headername amd not field.

{ headerName: 'Rating Name', field: 'newRatingName', filter: true} this.gridColumnApi.setColumnsVisible(['newRatingName', 'newRatingReleaseDate'], false);true } 

Is some other way to achieve it?

2 Answers

If you have access to the columnApi, then I'd suggest you get the column using the columnApi and the headerName, and then use that to set the visibility.

For example:

const ratingNameColumn = this.gridColumnApi.getAllColumns().find(x => x.colDef.headerName == 'Rating Name'); this.gridColumnApi.setColumnVisible(ratingNameColumn, false); 

Here's a StackBlitz for you.

You can use hide property in the column definition to conditionally hide your column. This is a boolean property that can be set to true/false. For example:

{ headerName: 'Rating Name', field: 'newRatingName', filter: true, hide: this.shouldHide(), } shouldHide = () => (true); 

ncG1vNJzZmirpJawrLvVnqmfpJ%2Bse6S7zGiorp2jqbawutJobWtxYm6Ad4OOoaawZaSkeqm1w55kmqaUYsCpu9ZmmKBll6e2pXnCqKOupZ6oeqOt0p6bZqeeYrWmrcOeqWamkaKybr7ArZ%2Beql2ptaK6jJ%2BgnqSUYruiucQ%3D