Material Design Theme

The New material theme is available from version 13.0 onwards. To comply with the material design data table guidelines, the theme uses different spacing and icon set compared to the other themes.

The example below shows the grid with a rich set of features enabled.

To use the theme, add ag-theme-material CSS class to the DIV element on which the ag-Grid instance is instantiated.

The following is an example of using the theme (using AngularJS 1.x):

<div ag-grid="gridOptions" class="ag-theme-material"></div>

Include the Roboto Font

The material design guidelines require the Roboto font to be used throughout the interface. The easiest way to include it in the document is by loading it from the Google CDN. Put the following code in the HEAD element of your document:

<link href="" rel="stylesheet">

Change the Theme Primary / Secondary Colors through Scss

The material theme uses Scss internally, exposing several variables which control its appearance. The ones you are likely looking into changing are the primary and secondary colors. The default ones are indigo-500 and pink-A200 from the Google color palette, which match the indigo-pink Angular Material theme.

To change the application colors, set the variables values to your colors of choice, and include the Scss theme file after that.

// Set the colors to blue and amber $ag-mat-primary: #2196F3; // blue-500 $ag-mat-accent: #FFD740; // amber-A200 // Import the ag-Grid material theme @import '~ag-grid/src/styles/ag-theme-material';

You can examine the full list of the variables that can be changed in the theme source file.

The recommended way to process your project's Scss files is through webpack, since it provides various loaders that optimize and reduce the final size of the bundle. A working example for Angular 2 based on angular-cli can be found in the ag-grid-material repository.

The ag grid icons path should be re-adjusted when importing the scss file. This is a common problem, described in the Sass(scss) loader project. The theme exposes the $ag-mat-icons-path variable to address that. The example from above showcases how to override the variable.

Change the row height / header height / icon size

The material design guidelines specify the size of the icons, height of the headers and the rows. We recommend keeping them to the default values for "true" material look. However, In case you wish to change the sizing, you should do that both in the grid configuration and by overriding the $ag-mat-grid-size and $ag-mat-icon-size. A working example that showcases this using webpack can be found ag-grid-material GitHub repository.

Change the Theme Icons

Replace the Entire Set

The easiest way to replace the entire icon set is to change the $ag-mat-icons-path Scss variable to point to a directory with your set of icons. The icons should be 18x18px sized SVG files. You can check the full list in the GitHub repository.

Change Individual Icons

You can also change individual icons by overriding the background images for the respective CSS selector. The following code snippet overrides the pin icon used in the drag hint when reordering columns:

/* * The override should be placed after the import of the theme. * Alternatively, you can aso increase the selector's specifcity */ .ag-theme-material .ag-icon-pin { background-image: url('path/to/my-pin-icon.svg'); }

The icon classes follow the .ag-icon-{icon-file-name} convention.

Integrate with Other Material Component Libraries

You can customize the various UI bits of the grid by providing custom cell renderers or editor components. A working example that integrates Angular Material's input, checkbox, select and datepicker can be found in the ag-grid-material GitHub repository.

DEPRECATED - Old Material Theme (legacy)

The Material Theme is one of the four original themes supplied with ag-Grid. It is deprecated in favor of the new material theme.

To use a theme, add the theme class name to the div element where the ag-Grid directive is attached.

The following is an example of using the ag-theme-material theme:
<div ag-grid="gridOptions" class="ag-theme-material"></div>

Note that to use the Material theme you'll need to override the default rowHeight gridOptions = { rowHeight: 48 } Additionally, to be consistent with Googles guidelines, you should override the default checkbox behaviour - in the example below we've overriden the selected checkbox state to be blue: gridOptions = { icons: { checkboxChecked: '<img src="data:image/png;base64,..."/>' } }
Material Theme Example
This grouped example demonstrates some of the different facets of a theme - full, part and no checkbox selection for example, as well as general look and feel