React Data GridDevelopment Validation

AG Grid can validate your configuration during development and report problems that are otherwise easy to miss in the console. Enable these diagnostics in development builds only — they are not part of the AllCommunityModule / AllEnterpriseModule bundles, so production stays small.

Enabling Validation Copy Link

Call enableDevValidations once, before any grid is created:

import { enableDevValidations } from 'ag-grid-community';

if (process.env.NODE_ENV !== 'production') {
    enableDevValidations();
}

This is equivalent to registering the module directly with ModuleRegistry.registerModules([ValidationModule]).

Without the module, console messages are reduced to an error code and a documentation link rather than the full text.

Options Copy Link

Pass options to enableDevValidations to configure:

import { enableDevValidations } from 'ag-grid-community';

enableDevValidations({
    showOverlayOn: ['deprecation', 'warning', 'error'],
    throwOn: ['warning', 'error'],
    suppress: [],
});

If you register the module explicitly (instead of using enableDevValidations), then pass the same options via ValidationModule.with({ showOverlayOn: ['deprecation', 'warning', 'error'], throwOn: ['warning', 'error'], suppress: [] })

Configuration is global and applies to every grid on the page, with the options from the last call being used.

Overlay Copy Link

The overlay lists the diagnostics captured for a grid on top of that grid, with controls to copy them or dismiss the overlay. It is shown by default.

Diagnostics have one of three severities:

• 'deprecation' — use of a deprecated option or feature
• 'warning' — a likely misconfiguration the grid can recover from
• 'error' — an invalid configuration

Set showOverlayOn to an array of the severities to show. For example, to show warnings and errors but not deprecations:

enableDevValidations({ showOverlayOn: ['warning', 'error'] });

Defaults to ['deprecation', 'warning', 'error'] (every severity). Pass [] to hide the overlay.

In the example below, a column definition includes a property the grid does not recognise, so the resulting warnings surface in the overlay:

Each grid shows only its own diagnostics. A nested grid (such as a detail grid in a Master / Detail grid) surfaces its diagnostics on its own overlay, not the parent's. When grid creation fails before the grid exists (for example, a row model with no row-model module registered) there is no grid to overlay. A standalone panel is shown in its place.

Throwing on Problems Copy Link

throwOn turns matching diagnostics into thrown errors instead of console messages, so problems fail fast rather than scrolling past unnoticed. This suits automated workflows (for example, end-to-end test runs or AI-assisted development) where a hard failure is surfaced to be acted on immediately.

Set throwOn to an array of the severities to throw on. For example, to throw on errors only:

enableDevValidations({ throwOn: ['error'] });

Defaults to [] (never throws).

throwOn throws synchronously wherever a matching diagnostic is raised. That is not only at start-up, it also happens during API calls, data updates, and rendering. A throw can interrupt an operation part-way and leave the grid in an inconsistent state. Use throwOn with harnesses that recreate the grid on failure rather than carrying on with the same instance, and never in production.

Suppressing Diagnostics Copy Link

suppress takes the error ids to ignore, for diagnostics you have reviewed and accepted. A suppressed id is kept out of the overlay and is never thrown by throwOn, but is still logged to the console once. Suppression is by id, so it silences every diagnostic with that number — not one specific occurrence.

For example, a third-party wrapper you cannot change spreads unrelated props onto your column definitions, so the grid reports properties it does not recognise — a per-property warning (307) and a summary (310). Suppress both while the source is out of your control:

enableDevValidations({
    suppress: [
        307, // "did you mean …" raised for each unrecognised property
        310, // the "one or more properties are not recognised" summary
    ],
});

The id is the number shown in the console message and the overlay, for example #310.