AG-Grid: How to remove the Column Menu

Question

I would like to remove the column menu. I can simply display: none it, but it seems a waste to process and render it in the first place. I can only find options on how to edit items inside the menu in the docs. Thanks

Ralleigh

Answer 1

Either setting menuTabs: [] or suppressMenu: true in the columnDefs. In this plunker the silver column demonstrates the first, while the bronze column demonstrates the second

Patronizing

Ah thanks I was trying to put it under the grid props rather than column def for each. Just verifying.. – Ralleigh

Is there any way to apply this dynamically, after the grid has been rendered? It seems that setting the property after the grid is ready doesn't do anything. – Nicolette

I was able to get it working with this.gridOptions.columnApi.getAllColumns().forEach((c) => { this.gridOptions.api.getColumnDef(c.colId).menuTabs = []; }); – Nicolette

Instead of looping through all the columns, you might try adding suppressMenu = true to the defaultColDef of the grid. – Forward

Answer 2

In defaultColDef property by adding suppressMenu: true column header menu will removed.

<Grid
    columnDefs={[
        {
            field: 'shortName',
            headerName: 'Short Name'
        },
        {
            field: 'entityStatus.code',
            headerName: 'Status'
        },
    ]}
    defaultColDef={{ resizable: true, sortable: true, suppressMenu: true }} // by adding suppressMenu: true munu will be disabled
    licenseKey={'abc-123'}
    onGridReady={event => event.api.sizeColumnsToFit()}
    onRowClicked={rowDataSelection}
    rowData={otherClients}
    overlayNoRowsTemplate={'No results found. Please refine your search criteria.'}
/>

Boron