Framework:Javascript Data GridAngular Data GridReact Data GridVue Data Grid

React Data Grid: Provided Themes

The grid comes with several provided themes which act as a great starting point for any application-specific customisations.

Themes Summary

The table below provides a summary of the themes provided with the grid. To see the themes in action, click on the theme name.

Theme NameDescription
ag-theme-alpine
ag-theme-alpine-dark
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
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-materialA 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.

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

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

In order for the above code to work, the correct stylesheets must be loaded:

Loading Provided Themes

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.
  • ag-theme-{theme-name}.css - theme styles that add design look and feel on top of the structural styles.

Both stylesheets need to be included with the structural styles (ag-grid.css) loaded before theme styles (ag-theme-{theme-name}.css).

There are various ways to load these stylesheets, as described in the sections below:

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.

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.

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://unpkg.com/@ag-grid-community/all-modules@26.0.1/dist/styles/ag-grid.css" />

<link
  rel="stylesheet"
  href="https://unpkg.com/@ag-grid-community/all-modules@26.0.1/dist/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 unpkg servers are down.

Loading the Roboto font for Material theme

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>