Provided Themes are themes that come provided with the grid. The quickest way to get a nice style onto a grid is to apply a provided theme.
The themes can be used without any modification, or can tweaked by altering the SASS variables .
The themes are as follows:
Flat themes for professional applications.
Recommendation: This is the default theme for the grid and a great choice for most applications.
A theme designed according to the Google Material Language Specs.
This theme looks great for simple applications with lots of white space. However the Google
Material spec doesn't cater for advanced grid features such as grouped columns
and tool panels. For applications that use these advanced features,
or need to pack a lot of data into a small space,
Older flat themes that were part of the grid before we designed the Balham and Material themes. These themes are deprecated and will be removed in the next major release.
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 balham theme:
The following is an example of using the dark balham theme:
The Balham theme comes in two versions: 1) light and 2) dark. Below shows examples of each type.
Example Balham Light (ag-theme-balham)
Example Balham Dark (ag-theme-balham-dark)
Change the Theme Accent Color
In addition to the finer grained Scss color variables available for the rest of the themes, the Balham theme has a 'catch all' Sass variable named '$ag-active' that determines the color of the selected checkboxes, selected rows and icons in the column menu.
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.
Material Design Theme
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.
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.
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.
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.
Fresh Theme (ag-theme-fresh)
Dark Theme (ag-theme-dark)
Blue Theme (ag-theme-blue)
Bootstrap Theme (ag-theme-bootstrap)
The provided themes are built using Sass. This means that you can change the looks of the theme you use using Sass, by overriding the theme variables value and referencing the Sass source files afterwards.
Some of the things you can change in the theme include:
- Changing the text / header / tool panel foreground and background colors
- Changing the icons size and color
- Changing the cell / row spacing*
For a live example, see: Theme Customization Example Repository.
Following is a list of Sass variables, their default values, and a short explanation of their purpose.