JavaScript Data GridThemes
javascript logo

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.

Provided 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 NameDescription
ag-theme-quartz
ag-theme-quartz-dark
ag-theme-quartz-auto-dark *

File name ag-theme-quartz[.min].css
Modern looking themes with high contrast and generous padding.

This is the recommended grid theme and an excellent choice for most applications.
ag-theme-balham
ag-theme-balham-dark
ag-theme-balham-auto-dark *

File name ag-theme-balham[.min].css
Balham has a more traditional look modelled after a spreadsheet application. It is appropriate 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.

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-quartz instead.
ag-theme-alpine
ag-theme-alpine-dark
ag-theme-alpine-auto-dark *

File name ag-theme-alpine[.min].css
Alpine was the default theme before Quartz was released. It is still supported, but we recommend Quartz for new applications.

* The 'auto' versions of each theme use the prefers-color-scheme CSS media feature to switch between dark and light variants depending on whether the user has enabled dark mode on their operating system.

Applying a Theme to an App

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 Quartz theme:

<div id="myGrid" class="ag-theme-quartz"></div>

The grid must always have a theme class set on its container, whether this is a provided theme or your own.

Loading CSS files and fonts

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:

Pre-built Bundles

Some pre-built bundles, whether downloaded from our website or included in the ag-grid-community NPM package, already embed the structural styles and all provided themes. If you are using one of these files, you do not need to load separately CSS.

Loading 3rd party fonts

Some themes have a recommended 3rd party font, which is not bundled with the theme CSS. If the font is not available at runtime, the OS default UI font will be used instead - Segoe UI on Windows and SF Pro on Mac.

Loading IBM Plex Sans for the Quartz theme

Plex Sans is a font that gives excellent readability on both regular and high DPI screens. It features a tall x-height to aid in readability of mixed-case and lower-case text.

You can download Plex Sans from Google Fonts (you need weights 400/Regular and 500/Medium)and use it in your application, or load it from the Google Fonts API:

<!-- in HTML -->
<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;700&display=swap" rel="stylesheet" />
/* in css */
@import "https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;700&display=swap";

Loading Roboto for the Material theme

Roboto is the font recommended by the Material Design specification.

You can download Roboto from Google Fonts and use it in your application, or load it from the Google Fonts API:

<!-- in html -->
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet" />
/* is css */
@import "https://fonts.googleapis.com/css?family=Roboto";

JavaScript Bundlers

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";

App Hosted

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.

Sass Styling API

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.

CDN

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@31.1.1/styles/ag-grid.css" />

<link
        rel="stylesheet"
        href="https://cdn.jsdelivr.net/npm/ag-grid-community@31.1.1/styles/ag-theme-quartz.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.

Creating your own theme

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.

If you create your own theme, its name must start with ag-theme-.

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;
}

Creating Themes with the AG Grid Design System

Figma users can now download the AG Grid design system and extend the Quartz or Alpine themes to create custom CSS themes. For more information on how to create themes with the AG Grid design system please see our AG Grid Design System page.