React Data GridAG Grid React Error #9

Grid Styles Not Applied When Measured Copy Link

Some sizes come from CSS rather than from grid options — row height, header height, border widths. The grid reads them by measuring a hidden element styled with the CSS variable named in the message. This warning means that variable had no value when the measurement was taken, so the grid fell back to the default shown.

The grid stays silent when it cannot be measured at all — a grid inside a display: none container reads as detached rather than unstyled. So this is a message about CSS not being in effect, not about the grid being hidden.

Check the grid's CSS reaches the page Copy Link

What has to be loaded depends on how the grid is themed:

• With the Theming API, the default since v33, the grid injects its own CSS as it initialises and the variables come with it. If they are missing, something is stopping that stylesheet from applying.
• With legacy themes (theme: 'legacy'), you load the CSS yourself: ag-grid.css plus a theme file such as ag-theme-quartz.css. Both files scope their variables to an element whose class begins ag-theme-, so the class matters as much as the files: without it on the grid or an ancestor, the variables are undefined even though the CSS loaded.

Check when the grid is created Copy Link

With the CSS present, the remaining cause is the grid initialising before the browser has applied it. The usual shapes are:

• A stylesheet that loads asynchronously, so the first measurement happens before it arrives.
• A build that injects the CSS after the application's own JavaScript has run.
• A grid created during server-side rendering or hydration, ahead of the page's styles.

The measurement corrects itself in each case, so this is only worth chasing if the first render is visibly wrong — a row briefly at the default height, say. The fix is to have the grid's CSS applied before the code that creates the grid runs.