AG Grid Hide Column: APIs, Menus, and Visibility Rules

To hide a column in AG Grid, set hide: true in its column definition when creating the grid, or call api.setColumnVisible('fieldName', false) after the grid is ready. The column is removed from the displayed grid, but its data is not deleted; you can show it again by setting visibility to true.

What hiding a column means

AG Grid treats visibility as a column setting. A hidden column is not rendered as a normal grid column, so it does not take up space in the displayed rows. The column definition and its field remain part of the grid, however, and the underlying row objects are unchanged. Hiding a column is therefore different from removing a column definition, deleting a field from row data, or restricting access to information.

This distinction is useful when a grid needs optional detail. For example, a customer table can show name and status by default while keeping an internal account number available to users who need it. Hiding that identifier improves the default view, but it does not make the value confidential. If users must not receive or inspect a field, do not send it to the browser in the first place.

Hide a column in its definition

For a column that should start hidden every time the grid is created, add hide: true to its column definition. In this example, the account number starts hidden while the customer name remains visible:

const columnDefs = [
  { field: 'customerName' },
  { field: 'accountNumber', hide: true }
];

Use the column’s field when it is unique and suitable as its identifier. If the definition does not have a field, or if you want a stable identifier independent of the data property, give it a colId and use that identifier with the API. AG Grid can derive an ID in some cases, but an explicit ID makes visibility code easier to read and maintain.

There is an important distinction between hide and initialHide in versions that support the latter. hide is a stateful column-definition property and can be applied when column definitions are updated. initialHide supplies an initial visibility setting when the column is created; it is often a better fit when later user changes should not be overwritten just because definitions are refreshed. Check the documentation for the AG Grid version in use before relying on version-specific properties.

Change visibility with the Grid API

When visibility depends on user actions, permissions, screen size, or application logic, use the Grid API after the grid is initialized. The API provides methods for one column or several columns:

api.setColumnVisible('accountNumber', false);
api.setColumnVisible('accountNumber', true);
api.setColumnsVisible(['internalCode', 'auditNote'], false);

The first argument identifies a column by its column ID or, where applicable, its field. The final boolean specifies whether it should be visible. Keep the grid API reference available from the grid-ready callback or the relevant framework integration, rather than attempting to call it before the grid has initialized.

For a user-selected set of columns, build the list deliberately. For instance, a “Basic view” control could hide fields used mainly for troubleshooting, while an “Operations view” restores them. Avoid toggling every column indiscriminately: row-selection, grouping, action, or utility columns may need to remain visible for the grid to be usable.

Use column state for several changes

Column visibility is also represented in column state. This is useful when restoring a saved layout or applying a group of column preferences together. A state entry uses a column ID and a hide value:

api.applyColumnState({
  state: [
    { colId: 'accountNumber', hide: true },
    { colId: 'customerName', hide: false }
  ]
});

To save the current arrangement, retrieve it with api.getColumnState() and store it using your application’s normal persistence mechanism. Later, pass the saved state to api.applyColumnState({ state: savedState }). This can preserve more than visibility, including other column settings represented in column state, so inspect what you save and decide whether restoring the whole layout is appropriate.

Saved state can become outdated when columns are renamed or removed. AG Grid’s applyColumnState returns a boolean indicating whether the requested state could be applied to the columns currently present. Handle a failed or partial match sensibly, such as by falling back to the grid’s defaults. If you only want to restore visibility, store and apply the visibility choices you need rather than unintentionally replacing unrelated user preferences.

Let users control columns

Applications can give users visibility controls instead of hiding columns only through code. AG Grid’s Columns Tool Panel lets users inspect columns and change which are displayed. The tool panel is an AG Grid Enterprise feature; it must be enabled and made available in the grid configuration. Its exact setup can depend on the AG Grid version and the framework being used.

Some configurations also offer column-menu or context-menu actions for hiding a column. These controls depend on the menu features enabled in the application, so do not assume every grid has a hide command in the same place. If users need a simple, predictable control, a custom checkbox list can call setColumnVisible for each selected column. Give each checkbox a clear label and reflect the current grid state when the user changes layouts.

Consider which columns should be changeable. A required action column, for example, may be hidden accidentally if included in a generic selector. You can keep it out of user-facing visibility controls even if the API could change its visibility. For larger grids, group related choices and provide a reset-to-default action so users are not left searching for a column they hid earlier.

What happens to data, filtering, and exports

Hiding affects presentation, not the row model. The grid still has the column definition and the row data value. Sorting, filtering, grouping, aggregation, and other features can interact with hidden columns, but the exact behavior depends on the feature and its configuration. For example, a filter may remain active after its column is hidden, which can make the displayed rows seem unexpectedly incomplete. If a view-changing action also changes filters, make that behavior explicit to users.

Exports deserve particular attention. AG Grid export options commonly export displayed columns by default; export parameters such as allColumns can include hidden columns. Check the settings for the specific CSV or Excel export you use. A column hidden in the on-screen grid may still appear in a file if the export is configured to include all columns. Conversely, a hidden field may be absent from an export that includes only displayed columns. Test the actual export path rather than inferring its contents from the screen.

These details also explain why hiding is not a security measure. A user may still access data delivered to the client through browser tools, application state, or an export configuration. Enforce authorization on the server and omit unauthorized fields from the response. Use column visibility to tailor a view, not to protect sensitive information.

Groups, responsive layouts, and changing definitions

For grouped columns, hiding one child generally leaves other visible children in the group. If every child is hidden, the group header has no visible child column to display. A group definition itself is not a substitute for setting visibility on the child columns. When building a custom show-hide control, map the choice to the actual leaf columns that should change.

Responsive behavior is another common reason to hide columns. An application may hide lower-priority detail on a narrow screen and restore it when more space is available. Prefer a deliberate priority policy over repeatedly hiding whichever column happens to overflow. Also consider users who rely on keyboard navigation, exports, or saved layouts: a responsive change should not silently erase a preference that the user expects to persist.

When an application replaces column definitions dynamically, decide whether visibility is a default or current user state. Reapplying definitions that specify hide can affect stateful properties. If a user may have changed visibility, use an initial-only setting where supported, or update definitions and restore the saved column state in a controlled order. Stable column IDs are especially important in this situation because they let AG Grid match columns across definition updates.

Common problems and practical checks

The column will not hide: Confirm that the API call runs after grid initialization and targets the correct column ID. A field name and a custom colId are not interchangeable if the definition uses a different identifier.
The column reappears: Check whether updated column definitions, saved state, or a grid recreation is restoring the default layout. Decide which source should take precedence and apply it consistently.
The column is hidden but its values still appear: Check custom cell renderers, detail panels, tooltips, exports, and application code. Hiding a grid column does not remove the value from row data or from every other presentation of it.
A filter still changes the results: Look for an active filter on the hidden column. Clear or preserve it intentionally when changing views.
Users cannot find a way to show it again: Provide a visible column chooser, reset option, or clear explanation of the available menu or tool-panel controls.

A useful debugging sequence is to inspect the column definition and its ID, confirm the API call’s timing, check the current column state, and then test any definition updates or saved-state restoration. Finally, examine exports separately from the on-screen grid. These checks usually identify whether the issue is an incorrect target, a later state update, or a difference between display and export behavior.

Frequently Asked Questions

How do I hide a column by default in AG Grid?
Set hide: true in that column’s definition. If the grid updates definitions and should preserve a user’s later visibility choice, consider an initial-only visibility property supported by your AG Grid version or manage the saved column state explicitly.

How do I show a hidden AG Grid column again?
Call api.setColumnVisible('columnId', true), use the Columns Tool Panel if enabled, or provide an application control that restores the column. The identifier must match the column’s ID or applicable field.

Does hiding a column delete its data?
No. Hiding changes what the grid displays; it does not delete the field from row data or secure it from the client. Remove or protect sensitive data at the source and on the server.

Can hidden columns still be included in an export?
Yes, depending on the export configuration. Many exports default to displayed columns, but options such as allColumns can include hidden columns. Verify the parameters for the CSV or Excel export in your application.

Why does my column become visible again?
A grid recreation, updated column definitions, or restored column state may be applying a different visibility value. Check the order in which those operations run and whether the column has a stable ID.

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.