Provided Themes

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 .

Themes Summary

The themes are as follows:

Theme Name Description
ag-theme-balham
ag-theme-balham-dark

Flat themes for professional applications. ag-theme-balham-dark is a dark version of ag-theme-balham.

Recommendation: These are great themes to use.

ag-theme-material

A theme designed according to the Google Material Language Specs.

Recommendation: This theme looks great for simple grids, however the Google Material spec doesn't cater for complex parts of a grid such as grouped columns and tool panels. For grids that use these advanced parts of the grid, the result may not look great. Google Material is great for simpler customer facing applications that use a lot of white space, but not as great for business applications where more functions get included over cleanness of design.

ag-theme-fresh
ag-theme-dark
ag-theme-blue

Older flat themes that were part of the grid before we had a proper CSS person join the team.

Recommendation: These themes look old. Prefer the ag-theme-balham theme and use SASS variables to change the colors if required.

ag-theme-bootstrap

Neutral / white theme that fits well in the context of bootstrap components.

Recommendation: Bootstrap is not as popular these days, overcome by Material Design. This theme gets little attention from grid users or the grid team.

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:

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

The following is an example of using the dark balham theme:

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

Balham Themes

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 '$active' that determines the color of the selected checkboxes, selected rows and icons in the column menu.

// Set the colors to blue and amber $active: #E91E63; // pink-500 from https://www.materialui.co/colors // Import the ag-Grid balham theme @import '~ag-grid-community/src/styles/ag-theme-balham/sass/ag-theme-balham';

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:

<link href="https://fonts.googleapis.com/css?family=Roboto" 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 $primary-color: #2196F3; // blue-500 $accent-color: #FFD740; // amber-A200 // Import the ag-Grid material theme @import '~ag-grid-community/src/styles/ag-theme-material/sass/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.

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 $grid-size and $icon-size. 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, Dark and Blue Themes

The fresh, dark and blue themes were the original themes provided by the grid. You should consider using the Balham themes instead of these. However they are kept for backwards compatibility.

Example Fresh (ag-theme-fresh)

Example Dark (ag-theme-dark)

Example Blue (ag-theme-blue)

Bootstrap Theme

The following is an example of the bootstrap theme:

Customizing Themes

The provided themes are build 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*
* If you are going to change the row or header height, you should also modify the respective options in the JavaScript grid configuration. This is a redundant step we are looking into removing in the future.

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.

Base Variables
Balham Theme
Material Theme
Variable Name Default Value Description
foreground-opacity 1 The foreground opacity.
secondary-foreground-color-opacity 1 The header font color opacity.
disabled-foreground-color-opacity 0.5 The opacity of the disabled / empty text elements.
icon-color <no default> The icon color.
alt-icon-color <no default> The secondary icon, used on icons with two colors (eg. checkbox background).
foreground-color <no default> The default color of the text.
secondary-foreground-color <no default> The header font color.
disabled-foreground-color <no default> The color of the disabled / empty text elements.
menu-option-active-color <no default> The background color of the context / column menu items when hovered.
input-disabled-background-color #ebebeb The color of disabled input field
card-background-color <no default> The background color for the context menu and the column menu.
border-color <no default> The color used for all borders.
scroll-spacer-border 1px solid border-color The border that separates the pinned columns from the scrollable area within the horizontal scrollbar
primary-color <no default> The main color associated with selected cells and other items (eg. cell border color, sidbar selected tab border).
accent-color <no default> The color for the checked checkboxes.
background-color <no default> The default background color.
odd-row-background-color <no default> The odd row background color.
editor-background-color <no default> The background color of cells being edited.
header-background-color <no default> The header background color.
header-cell-hover-background-color $header-background-color The header background color while hovering
header-cell-moving-background-color #bebebe The header background color while being moved.
header-foreground-color <no default> The header text color.
header-background-image <no default> The header background gradient - you can also refer to an an image with `url(...)`.
panel-background-color <no default> The background color of the column menu.
tool-panel-background-color <no default> The tool panel background color
chip-background-color <no default> The background color of the column labels used in the grouping / pivoting.
range-selection-background-color <no default> The background color of the selected cells.
hover-color <no default> The background color of the row when hovered.
selected-color <no default> The background color of selected rows.
cell-data-changed-color <no default> The background color used when the cell flashes when data is changed.
focused-cell-border-color <no default> The border color of the focused cell.
tab-background-color <no default> The background color of the tab in the column menu
cell-highlight-border <no default> The border used to mark cells as being copied.
cell-horizontal-border <no default> The border delimiter between cells.
ag-range-selected-color-1 <no default> The selection background color.
ag-range-selected-color-2 <no default> The selection background color when it overlaps with another selection (range) 1 level.
ag-range-selected-color-3 <no default> The selection background color when it overlaps with another selection (range) 2 levels.
ag-range-selected-color-4 <no default> The selection background color when it overlaps with another selection (range) 3 levels.
value-change-delta-up-color <no default> The color used when the cell value increases.
value-change-delta-down-color <no default> The color used when the cell value decreases.
value-change-value-highlight-background-color <no default> The background color used when the cell value changes.
row-floating-background-color <no default> The background color of the pinned rows.
row-stub-background-color <no default> The color of row stub background (see: Row Node)
grid-size 4px The basic unit used for the grid spacing and dimensions. Changing this makes the grid UI more / less compact.
icon-size 12px The icon width and height (icons are square).
header-height grid-size * 6 + 1 The header row height - if you change this, you also have to change the value of the `headerHeight` in the grid options. We are looking into removing this redundant step in the future.
row-height grid-size * 6 + 1 The row height - if you change this, you also have to change the value of the `rowHeight` in the grid options. We are looking into removing this redundant step in the future.
cell-horizontal-padding grid-size * 3 The cell horizontal padding.
virtual-item-height grid-size * 5 The height of virtual items (eg. Set Filter items).
header-icon-size 14px The header icon height.
font-family 'Helvetica Neue', sans-serif The grid font family.
font-size 14px The grid font size.
font-weight 400 The grid font weight
secondary-font-family font-family The font family used in the header.
secondary-font-size 14px The header font size.
secondary-font-weight 400 The header font weight.
card-shadow none Box shadow value for the context menu and the column menu.
card-radius 0 Border radius for the context menu and the column menu.
row-border-width 0 the row border width.
toolpanel-indent-size grid-size * icon-size The indent used for the tool panel hierarchy.
tooltip-background-color #535353 The tooltip background color.
tooltip-foreground-color #ffffff The tooltip foreground color.
tooltip-border-radius 2px The tooltip boder radius.
tooltip-padding 5px The tooltip padding.
tooltip-border-width 1px The tooltip border width.
tooltip-border-style solid The tooltip border style.
tooltip-border-color #ebebeb The tooltip border color