How to hide column in AG-Grid?

Question

How to hide the column in AG-Grid and also it should not be displayed in Tool Panel...

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

Answer 1

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
    }
]

Answer 2

hide: should get the value true, not the string "true" (like width: gets 100, not "100")

Answer 3

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

Answer 4

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));

Answer 5

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

Answer 6

hide column on load { headerName: 'ROE', field: 'roe', width: 100, hide: true },

based on selection you can show/hide it using example this.gridColumnApi.setColumnVisible('roe',true);

Answer 7

{
  ...,
  hide: true,
  suppressColumnsToolPanel: true
}

In the package.json:

"dependencies": {
    "@ag-grid-community/angular": "^24.1.0",
    "@ag-grid-enterprise/all-modules": "^24.1.0",
    ...
} 

Answer 8

Posting late but It may helpful for others with some extra details:

If you want to hide your column on the grid you can use hide property to hide that column from the grid.

Only hide from grid colDef example:

colMainDef = [
    {
      headerName: 'Approved',
      field: 'status',
      hide: true
    }]

But the same column will still be accessible on the side menu panel if you want to hide it from the side menu you can use one more property suppressColumnsToolPanel by making this true it will hide the column from the side menu.

Hide column from the grid as well as from side panel colDef example:

colMainDef = [
    {
      headerName: 'Approved',
      field: 'status',
      suppressColumnsToolPanel: true,
      hide: true,
    }]

Hope this will helps to hide/show columns as per your requirements.

Answer 9

Just add "hide: true" in your column definition.

Ex:

var columnDefs = [{ headerName: "ABC", field: "XYZ", hide: true }]

Answer 10

We can hide column dynamically in the following way using onColumnVisible listen event

const onColumnVisible = useCallback(params => {
    if (params.source === 'toolPanelUi') {
        const colId = params.column ? [ params.column.colId ] : params.columns.map(col => col.colId)
        const value = columns.map(v => {
            if (v.colId === colId.find(c => c === v.colId)) {
                params.visible ? v.hide = false : v.hide = true
            }
            return v
        })
        if (value) {
            setColumns(value)
        }
    }
}, [ gridParams, setColumns ])

<Grid onColumnVisible={onColumnVisible } />

Answer 11

HTML code

  <div>
    <label *ngFor="let col of columnDefs">
      <input type="checkbox" [checked]="!col.hide" (change)="toggleColumnVisibility(col)" /> {{col.headerName}}
    </label>
  </div>

The event function looks like this

  toggleColumnVisibility(column: any) {
    column.hide = !column.hide;
    this.agGrid.columnApi.setColumnVisible(column.field, !column.hide);
  }