Vue Data GridThemes
The grid is styled with CSS, and a theme is simply a CSS class that applies styles to the grid. Most users choose a provided theme and then customise it to meet their needs. It is also possible to create your own themes.
The grid comes with several provided themes which act as a great starting point for any application-specific customisations. Click the theme name to see a demo.
| Theme Name | Description |
|---|---|
| ag-theme-alpine ag-theme-alpine-dark File name ag-theme-alpine[.min].css | Modern looking themes with high contrast, and generous padding. Recommendation: This is the recommended grid theme and an excellent choice for most applications. |
| ag-theme-balham ag-theme-balham-dark File name ag-theme-balham[.min].css | Themes for professional data-heavy applications. Recommendation: Balham was the recommended theme before Alpine was developed. It is still an excellent choice for applications that need to fit more data onto each page. |
| ag-theme-material File name ag-theme-material[.min].css | A theme designed according to the Google Material Language Specs. Recommendation: This theme looks great for simple applications with lots of white space, and is the obvious choice if the rest of your application follows the Google Material Design spec. However, the Material spec doesn't cater for advanced grid features such as grouped columns and tool panels. If your application uses these features, consider using ag-theme-alpine instead. |
To use a theme, add the theme class name to the div element that contains your grid. The following is an example of using the Alpine theme:
<div id="myGrid" class="ag-theme-alpine"></div>The grid must always have a theme class set on its container, whether this is a provided theme or your own.
In order for the above code to work, the correct stylesheets must be loaded in the correct order. There are two kinds of stylesheet that need to be loaded when using provided themes:
ag-grid.css- structural styles containing CSS rules that are essential to the functioning of the grid and must be loaded first.ag-theme-{theme-name}.css- theme styles that add design look and feel on top of the structural styles.
The correct files to load are located in ag-grid-community/styles or @ag-grid-community/styles if you're using modules.
This path has changed in v28, and the old files are still there as part of the Legacy Styles but will be removed in v29.
Double-check that you are importing files from the new paths. If you have /src/ or /dist/ in your path then you're using the old paths.
There are various ways to load these stylesheets, as described in the sections below:
If you are using a JavaScript bundler like webpack or Rollup and it is configured to load styles, you can require() the correct CSS file from node_modules. This is the recommended approach as webpack will take care of minifying your CSS in production:
// CommonJS:
require("ag-grid-community/styles/ag-grid.css");
// ECMAScript Modules:
import "ag-grid-community/styles/ag-grid.css";You can copy, either manually or as part of your app's build, the required CSS files (ag-grid.css and ag-theme-{theme-name}.css) from node_modules and serve it with your app.
If you're using the Sass Styling API then the right CSS files will be automatically included for your chosen theme. For projects that are already using Sass this is the recommended approach.
You can load the structural styles and theme from a free CDN by adding this code to your page.
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/ag-grid-community@29.3.5/styles/ag-grid.css" />
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/ag-grid-community@29.3.5/styles/ag-theme-alpine.css" />Change the theme name in the URL to the one that you're using, and ensure that the version number in the URL matches the JS version you're using. This is useful for testing and prototyping but not recommended for production as your app will be unavailable if the jsdelivr servers are down.
The Material theme requires the Roboto font, and this is not bundled in the material CSS. The easiest way to load Roboto is through Google's CDN:
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet" />
<div id="myGrid" class="ag-theme-material"></div>The majority of users select a provided theme and make customisations using CSS. If your chosen provided theme has elements that you don't want, you will need to add CSS rules to remove them. If your desired look and feel is very different from the provided theme, at some point it becomes easier to start from scratch. To do this, you can define your own theme.
A theme is simply a CSS class name matching the pattern ag-theme-*, along with CSS rules that target this class name.
Ensure that ag-grid.css is loaded, choose a theme name and apply it to the grid:
<div id="myGrid" class="ag-theme-mycustomtheme"></div>That's it! You've created a theme. You haven't added any styles to it so what you will see is a nearly blank slate - basic customisable borders and padding but no opinionated design elements. You can then add customisations using CSS:
.ag-theme-mycustomtheme {
/* customise with CSS variables */
--ag-grid-size: 8px;
--ag-border-color: red;
}
.ag-theme-mycustomtheme .ag-header {
/* or with CSS selectors targeting grid DOM elements */
font-style: italic;
}