How to hide particular column from 'columnsMenuTab' in AG Grid individual column's menu (Angular)?

Question

Suppose we have some columns say Athlete, Age, Country, Year etc. in Angular AG Grid as shown below:

enter image description here

Now, if column menu is enabled then we will have 3 menu options in each column header that is 'filterMenuTab', 'generalMenuTab' and 'columnsMenuTab' as shown below:

enter image description here

In the last menu option that is 'columnsMenuTab' if we want to hide 'Athlete' column then how we can do it?

Please note, 'Athlete' column itself will be displayed in table. Only it will be hidden from 'columnsMenuTab' option.

Your help in this regard would be appreciated. Thank you!

I checked in documentation but no luck. Maybe I missed something.

Answer 1

Add suppressColumnsToolPanel on columnDefs.

On document: suppressColumnsToolPanel

// Demo: https://plnkr.co/edit/Q1HYmLOZpmsmY7Om?open=app%2Fapp.component.ts&preview

  const columnDefs: ColDef[] = [
    { field: 'athlete', minWidth: 170, suppressColumnsToolPanel: true },
    { field: 'age' },
    { field: 'country' },
    { field: 'year' },
    { field: 'date' },
    { field: 'sport' },
    { field: 'gold' },
    { field: 'silver' },
    { field: 'bronze' },
    { field: 'total' },
  ];

Hope it helps 👍