AG Grid Hide Column Menu: How to Use and Customize It

To hide a column in AG Grid, open the column’s header menu and choose its hide option, if available; the exact menu layout depends on your AG Grid version and configuration. To hide the menu button itself, set suppressHeaderMenuButton: true on that column definition. These are different actions: one hides data from the grid, while the other removes a way to open the menu.

What the AG Grid hide-column menu does

AG Grid’s column menu is a set of actions associated with a column header. Depending on the version and enabled features, it can provide options for sorting, filtering, resizing, pinning, choosing columns, or other grid operations. A hide action changes the column’s visibility; it does not delete the column, erase its values, or remove the column definition from your application.

When a column is hidden, the grid stops displaying that column in the viewport. Its data can still exist in the row objects, and the column can usually be shown again through a column chooser, the Columns tool panel, application controls, or the grid API. Hiding a column is therefore a presentation choice, not a data-security measure. Do not rely on it to protect sensitive fields from users who can inspect the application or its data.

AG Grid’s menu features and the way they are presented have changed across releases. Some installations show a direct Hide command; others make visibility easier to control through a column chooser or panel. The installed AG Grid version, theme, enabled modules, and custom menu configuration can all affect what a user sees.

Hide a column from the user interface

For a grid that provides the column menu, a user can normally open the menu from the target column’s header and select the hide command. In some versions or configurations, the header menu button is a three-dot icon; in others, the menu can be opened through a different header interaction. If there is no direct hide command, look for a Columns or column-chooser interface and clear the checkbox beside the column name.

Find the header for the column you want to hide.
Open that header’s menu, or open the grid’s column chooser or Columns panel.
Choose Hide, or clear the visibility checkbox for the column.
Check the result in the grid. The column should no longer occupy space in the displayed columns.

Menu availability is not identical in every edition or setup. AG Grid’s column menu and the Columns tool panel are Enterprise features, and the relevant modules must be included in applications that use modular builds. If a project uses Community features only, a missing menu or panel may be an edition limitation rather than a setting that has been overlooked. The grid API and column definitions offer other ways for an application to set visibility.

Hide the menu button instead

If your question is how to remove the menu button from a header, hiding a column is not the solution. Set suppressHeaderMenuButton: true in the column definition for the column whose button should be removed. For example, a column definition can include { field: 'internalCode', suppressHeaderMenuButton: true }. This suppresses the header menu button; it does not hide the column itself.

This setting is useful when users should see a field but should not open its header menu, or when the application offers its own controls. It is a presentation control, not an authorization boundary. If users must not access a field or its values, do not send those values to the browser in the first place.

Suppressing the button may also remove convenient access to other menu actions for that column, not just the hide command. Consider the consequences for sorting, filtering, pinning, and other actions your users rely on. A button-free header can make a grid look simpler, but it may make expected features harder to discover.

Hide columns in code

Applications can control visibility without asking a user to use the menu. To hide a column when the grid is first created, set hide: true in its column definition. For example, { field: 'internalCode', hide: true } starts that column hidden. This is appropriate when the initial view should omit a field, while still allowing the application to make it visible later.

To change visibility after the grid is running, use the grid API. With a grid API available as api, this call hides a column identified by its column ID or field key: api.setColumnsVisible(['internalCode'], false). To show it again, pass true instead of false. The API call changes the grid’s current state; it does not permanently rewrite the source column definition.

Column state is another option when an application needs to apply several layout properties together or save and restore a user’s arrangement. For example, api.applyColumnState({ state: [{ colId: 'internalCode', hide: true }] }) applies a hidden state to the column with that ID. Use the column’s actual colId; if you have not set one explicitly, AG Grid may derive it from the field or column definition. Check the IDs in your grid configuration rather than assuming every column uses its displayed header text.

Customize which menu actions appear

Applications that provide the column menu can customize its main menu items through the getMainMenuItems callback. This lets an application keep the standard actions, remove selected actions, or return a tailored list. The callback receives the default menu items for the relevant column, so customization can be based on the column rather than applying the same menu to every field.

If the goal is to prevent users from hiding a particular column, inspect the default items supplied for that column and omit the hide-related action where the installed version exposes it. The exact item identifiers and menu structure are version-sensitive, so use the documentation for the version installed in the project instead of copying an identifier from an unrelated example. Also consider whether a separate column chooser or tool panel would still allow the same column to be hidden.

For a column that must always remain visible, menu customization alone may not be enough. Users might change visibility through another interface, while application code can still update it. Set the desired state through the grid’s configuration and API, and design any custom controls to enforce the same rule. Be cautious about automatically reversing every user change: unexpected state resets can make the grid feel broken.

Restore a hidden column and preserve preferences

A hidden column can be shown again by selecting it in a column chooser or Columns panel, using the API to set it visible, or applying a column state with hide: false. If users cannot find the column, check whether the application has provided a way to manage visibility. A direct Hide command is easy to use, but it is also easy to forget how to reverse unless the grid offers a clear restore path.

To preserve a user’s layout between sessions, save the relevant column state and reapply it when the grid is initialized. AG Grid provides column-state APIs for reading and applying that state. Store only the preferences your application needs, and handle cases where the column set changes after a preference was saved. For example, a saved state may refer to a column that no longer exists, or a newly added column may need a sensible default visibility.

There is an important distinction between initial configuration and ongoing state. A column definition’s hide: true is useful for setting an initial layout, while user actions and API calls can change the live state afterward. If the application rebuilds column definitions or reapplies state, it can affect the user’s current visibility choices. Decide whether application defaults or saved user preferences should take priority, and apply them consistently.

Common reasons the hide option is missing

The menu is not enabled: The application may not include the Enterprise feature or required module, or the header menu button may have been suppressed.
The menu looks different: AG Grid versions and menu configurations can present visibility controls in different places. Check for a column chooser or Columns panel as well as a direct Hide item.
The menu was customized: A getMainMenuItems callback may replace or filter the standard actions.
The column appears again: Application code may reapply column definitions or saved state after the user hides it. Inspect the grid’s initialization and state-restoration logic.
The column cannot be restored: The application may not expose a chooser or another show-column control. Add a visible recovery path or provide an application-level reset.

When diagnosing the issue, confirm the AG Grid version, edition, and modules first. Then check the column definition for menu-button suppression and inspect any menu customization. Finally, determine whether another component or API call is resetting visibility after the menu action. This sequence separates a missing UI feature from a state-management problem.

Choosing the right approach

Use the menu when the choice belongs to the user and should be made quickly for the current grid view. Use hide: true when a column should start out hidden, and use the API when visibility needs to respond to an application event, such as switching between compact and detailed views. Use saved column state when users should return to their personal layout later.

For example, a report might initially hide an internal identifier but let analysts reveal it from a chooser. A compact dashboard might hide several low-priority fields through an application toggle. In both cases, hiding affects display only. If an export, calculation, or downstream operation should also omit a field, configure that behavior separately rather than assuming a hidden column is excluded automatically.

Frequently Asked Questions

How do I hide a column in AG Grid?
Open the column’s header menu and use its hide option if available. If the menu does not offer it, use a column chooser or Columns panel, or set visibility through the grid API.

How do I hide the AG Grid column menu button?
Set suppressHeaderMenuButton: true in that column’s definition. This removes the header menu button but leaves the column visible.

Can I hide a column by default?
Yes. Add hide: true to the column definition to make it initially hidden. Users or application code may change its visibility afterward.

Why can’t I see a Hide option?
The menu may differ by AG Grid version, the relevant Enterprise feature or module may not be enabled, the menu may be customized, or visibility may be managed in a column chooser instead.

Does hiding a column remove its data?
No. Hiding changes what the grid displays; it does not delete row data or secure it from browser access. Do not use column visibility to protect confidential information.

How do I show a hidden column again?
Use the column chooser or Columns panel if the application provides one, or set the column visible through the API or column state. A grid should provide a clear recovery route if users can hide columns.

Try it: the Date Difference Calculator: days, months, years and weekdays between two dates, with the DATEDIF formulas.

More in How-to basics

Sources: Function behaviour and menu paths: Microsoft Support documentation for Excel. Method & sources

Spotted an error in this guide? Let us know.