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):
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:
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.
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.
$ag-mat-icons-pathvariable 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
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 icon classes follow the
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.