How to hide column in AG-Grid?

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

9 Answers

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

6

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

1

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

1

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

2

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.

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

In the package.json:

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

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

Ex:

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

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

1

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

1

Your Answer

Sign up or log in

Sign up using Google Sign up using Facebook Sign up using Email and Password Submit

Post as a guest

Post Your Answer Discard

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy