Search

JavaScript Data GridUpgrading from the Legacy CSS files

The Legacy CSS files are deprecated and will be removed from the Grid in a future major release. The new CSS files are 100% backwards compatible and upgrading should be as simple as changing an import path.

If you upgrade an app from v27 to v29+ without changing the import paths for CSS and Sass (.scss) files then the paths will be invalid and the themes won't work.

Follow the instructions in this document to upgrade.

Updating the CSS import paths

There are many ways to import CSS, but however you are doing this in your app you need to delete the /dist part from the path. For example if you're using the jsdelivr CDN:

Packages 

<!-- old path -->
<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/ag-grid-community@32.2.0/dist/styles/ag-grid.css" />

<!-- new path -->
<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/ag-grid-community@32.2.0/styles/ag-grid.css" />

Modules

If you are using Grid Modules then you will need to use the new @ag-grid-community/styles module.

<!-- old path -->
<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/@ag-grid-community/core@32.2.0/dist/styles/ag-grid.css" />

<!-- new path -->
<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/@ag-grid-community/styles@32.2.0/ag-grid.css" />

Bundled Files

If you are using an AG Grid Bundle where the themes are included in the .js file, all CSS Variables need to be set after the bundle has been imported, as follows:

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>AG Grid</title>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
    </head>
    <body>
    <div id="myGrid" class="ag-theme-alpine"></div>
    <script src="//https://cdn.jsdelivr.net/npm/browse/ag-grid-community@32.2.0/dist/ag-grid-community.min.js"></script>
    <!-- Style added after AG Grid bundle -->
    <style>
        .ag-theme-alpine {
            --ag-foreground-color: deeppink;
            --ag-header-column-separator-color: orange;
         }
    </style>
    <script src="main.js"></script>
    </body>
</html>

Dark themes

In v27 there were separate CSS files for the light and dark versions of provided themes, e.g. ag-theme-alpine.css and ag-theme-alpine-dark.css.

In v28 both light and dark versions of themes are included in one file, so if you were previously including ag-theme-alpine-dark.css, change it to ag-theme-alpine.css. If you were previously including both files, remove the dark file.