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:
- 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.cssandag-theme-{theme-name}.css. - For an existing application, remove the existing links to
ag-grid.cssandag-theme-{theme-name}.css.
- 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
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.
Download the
ag-grid-theme-builder.cssfile from the Theme Builder and save it to your application.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">
- Set the AG Grid theme name to
ag-theme-customby applying this CSS class name to the container element of the grid.
<div id="myGrid" class="ag-theme-custom" style="height: 100%"></div>
If you prefer a different theme name, edit the exported file name before applying the CSS file.
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.