Search

Angular Data GridApplying Theme Builder Styling to AG Grid

This section shows how to apply custom themes generated by the Theme Builder to the grid.

The Theme Builder allows to easily build highly customised custom themes for AG Grid. It exports these customised styling configurations in a CSS file containing a custom AG Grid Theme which can then be applied to AG Grid.

Applying the Custom AG Grid Theme

Once you have downloaded the Theme Builder CSS, follow the below steps to apply the custom styling:

  1. Prepare an AG Grid application that does not use the built-in CSS files that come with the distribution.
    • If you have not already created an application, follow the Getting Started guide for your framework and skip the step where you are asked to link ag-grid.css and ag-theme-{theme-name}.css.
    • For an existing application, remove the existing links to ag-grid.css and ag-theme-{theme-name}.css.

We distribute a UMD bundle that automatically injects ag-grid.css into your page. Because of this, it is not possible to use the UMD bundle with a Theme Builder export. If you are loading AG Grid from a URL like https://cdn.jsdelivr.net/npm/ag-grid-community/dist/ag-grid-community.min.js then you are using the UMD bundle, and it will be necessary to switch to using our packages or modules from NPM.

  1. Download the ag-grid-theme-builder.css file from the Theme Builder and save it to your application.

  2. Arrange for the new CSS file to be included in the application page. If your application is configured to allow importing of CSS files from JavaScript, you can import the CSS file from your application's entry point:

import './path/to/ag-grid-theme-builder.css';

Otherwise, arrange for the CSS file to be served by your application and link it from your HTML file:

<link rel="stylesheet" href="/path/to/ag-grid-theme-builder.css">
  1. Set the AG Grid theme name to ag-theme-custom by applying this CSS class name to the container element of the grid.
<div id="myGrid" class="ag-theme-custom" style="height: 100%"></div>

You can edit the theme name in the exported file but ensure that it starts .ag-theme. For example you can rename .ag-theme-custom to .ag-theme-acme-corp.

Overriding Styles in the Custom Theme

If you want to make changes to the downloaded theme, we recommend that you avoid editing the downloaded CSS. Instead, override specific styles in your custom theme by adding the changes to a separate CSS file and including it in your application after the Theme Builder export.

Updating to New AG Grid Versions

Themes exported from the Theme Builder are intended for use with the current version of AG Grid at the time of download.

If you upgrade your application's grid version and experience issues, return to the Theme Builder to rebuild and reexport an updated version of your theme.