Expand All

  Getting Started

  Reference

  Features

  Row Models

  Themes new

  Components

  Examples

  Third Party

Misc

Github stars make projects look great. Please help, donate a star, it's free.
Read about ag-Grid's Partnership with webpack.
Get informed on releases and other ag-Grid news only - never spam.
Follow on Twitter

Themes

Legacy Themes

The 14.2.0 release (October 2017) included remakes of the themes with more consistent whitespace and easier customization through Sass variables. The previous ones are still shipped, but deprecated and likely to be removed after several releases. If you are using any of the themes below, give the new counterpart a try.

Old ThemeNew Theme
ag-freshag-theme-fresh
ag-darkag-theme-dark
ag-blueag-theme-blue
ag-materialag-theme-material
ag-bootstrapag-theme-bootstrap

If you move to a new theme you will notice the spacing is larger. Customising the new theme to have less spacing (so it looks more like an old theme) see the Github example ag-grid-customise-theme.

ag-Grid is designed to have its look and feel derived from a theme.

Out of the box, five themes are provided:

ag-theme-fresh
The light / grey theme which is used in most of the examples in the documentation.
ag-theme-dark
The dark grey / inverted theme with light text, used in some of the enterprise examples.
ag-theme-blue
A light theme with blue headers.
ag-theme-material
A theme designed according to the Google Material Language Specs
ag-theme-bootstrap
Neutral / white theme that fits well in the context of bootstrap components. Notice: the theme does not have a bootstrap dependency.

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 fresh theme:
<div id="myGrid" class="ag-theme-fresh"></div>

The following is an example of using the dark theme:
<div id="myGrid" class="ag-theme-dark"></div>

When to Create a Theme

You have the following options when choosing a theme:

  1. Use one of the provided themes e.g. ag-theme-fresh.
  2. Use one of the provided themes and tweak using the provided Sass variables.
  3. Create your own theme from scratch. This is the most complex approach and you are more exposed to breaking changes in ag-Grid releases.

You should only create your own theme when options 1 and 2 above don't suit, as it is the most difficult. If you do decide to create your own theme, then you can use one of the provided themes and use that as a template. They can be found on GitHub here: https://github.com/ceolter/ag-grid/tree/master/src/styles.

This section does not provide an example of building a theme as a number of themes are already provided with ag-Grid - these can be used as a basis for any additional themes you may wish to create.

When to Style via Themes

Themes are intended to change the overall look and feel of a grid. If you want to style a particular column, or a particular header, consider using either cell and header renderers, or applying CSS classes or styles at the column definition level.

Sometimes it is possible to achieve the same effect using custom renderers as it is with themes. If so, use whichever one makes more sense for you, there isn't a hard and fast rule.

What to Style via Themes

Any of the CSS classes described below can have style associated with them. However you should be cautious about overriding style that is associated outside of the theme. For example, the ag-pinned-cols-viewport, has the following style: .ag-pinned-cols-viewport { float: left; position: absolute; overflow: hidden; } The style attributes float, position and overflow are intrinsic to how the grid works. Changing these values will change how the grid operates. If unsure, take a look at the styles associated with an element using your browsers developer tools. If still unsure, try it out, if the style you want to apply breaks the grid, then it's not a good style to apply!

Structure Example

The exact structure of the DOM within ag-Grid is dependent on its configuration and what data is present. This page takes the below basic example grid, with one pinned column, as an example to demonstrate the DOM structure. The reader is encouraged to inspect the DOM (using your browsers developer tools) to dig deeper.

High Level Overview

The diagram below shows the hierarchy of the core div elements which form the four quadrants of the table. The four quadrants are as follows:

  • ag-pinned-header: Contains the pinned header cells. This container does not scroll.
  • ag-header-container: Contains the non-pinned header cells. This container is within a viewport (ag-header-viewport) that scrolls horizontally to match the position of the ag-body-viewport. This container does not scroll vertically.
  • ag-pinned-cols-container: Contains the pinned rows. This container is within a viewport (ag-pinned-cols-viewport) that scrolls vertically to match the position of the ag-body-viewport. This container does not scroll horizontally.
  • ag-body-container: Contains the non-pinned rows. This container is within a viewport (ag-body-viewport) that scrolls both vertically and horizontally.
Note: Both the ag-header-viewport and ag-pinned-cols-viewport do not have scrollbars. They only scroll in response to changes to the ag-body-viewport.

Core DIV Elements

ag-root
ag-header
ag-pinned-header
ag-header-viewport
ag-header-container
ag-body
ag-pinned-cols-viewport
ag-pinned-cols-container
ag-body-viewport-wrapper
ag-body-viewport
ag-body-container

Detailed Breakdown

Below gives a detailed breakdown of the DOM for the example. In the example, the following is highlighted:

  • Classes: These CSS classes can have style associated with them in a theme.
  • Row & Col Attributes: These attributes can be used to identify rows and columns using CSS selectors.
  • Position Attributes: Nothing to do with style, however they stick out below, so worth mentioning. These are set by ag-Grid to position the rows within the containers. Because rows are virtualised, and widths are dynamic, these attributes cannot be set as classes, they are set as dynamic styles by ag-Grid.
<div class='ag-root ag-layout-normal'> <!-- header --> <div class="ag-header"> <div class="ag-pinned-header"> <!-- pinned header cell --> <div class="ag-header-cell"> <div class="ag-header-label">Athlete</div> </div> <div class="ag-header-cell"> <div class="ag-header-label">Age</div> </div> </div> <div class="ag-header-viewport"> <div class="ag-header-container"> <!-- main header cell --> <div class="ag-header-cell"> <div class="ag-header-label">County</div> </div> <!-- main header cell --> <div class="ag-header-cell"> <div class="ag-header-label">Year</div> </div> <!-- the other header cells... --> </div> </div> </div> <!-- body --> <div class="ag-body"> <div class="ag-pinned-cols-viewport"> <div class="ag-pinned-cols-container"> <div class="ag-row ag-row-even" row="0" style="top: 0px; height: 30px;"> <div class="ag-cell cell-col-0" col="0" style="width: 150px;">Michael Phelps</div> <div class="ag-cell cell-col-1" col="1" style="width: 90px;">23</div> </div> <div class="ag-row ag-row-odd" row="1" style="top: 30px; height: 30px;"> <div class="ag-cell cell-col-0" col="0" style="width: 150px;">Michael Phelps</div> <div class="ag-cell cell-col-1" col="1" style="width: 90px;">19</div> </div> <!-- the other pinned rows... --> </div> </div> <div class="ag-body-viewport-wrapper"> <div class="ag-body-viewport"> <div class="ag-body-container"> <div class="ag-row ag-row-even" row="0" style="top: 0px; height: 30px; width: 830px;"> <div class="ag-cell cell-col-2" col="2" style="width: 120px;">United States</div> <div class="ag-cell cell-col-3" col="3" style="width: 90px;">2008</div> <div class="ag-cell cell-col-4" col="4" style="width: 110px;">24/08/2008</div> <!-- the other row cells... --> </div> <div class="ag-row ag-row-odd" row="1" style="top: 30px; height: 30px; width: 830px;"> <div class="ag-cell cell-col-2" col="2" style="width: 120px;">United States</div> <div class="ag-cell cell-col-3" col="3" style="width: 90px;">2004</div> <div class="ag-cell cell-col-4" col="4" style="width: 110px;">29/08/2004</div> <!-- the other row cells... --> </div> <!-- the other body rows... --> </div> </div> </div> </div> </div>

Styling with For Print

Styling with the option domLayout=forPrint is similar to styling as normal, however the dom layout is much simpler. When laying out for printing, there are no pinned columns and no viewports for scrolling.

<div class="ag-root ag-layout-for-print"> <!-- header --> <div class="ag-header-container"> <div class="ag-header-cell" style="width: 120px;"> <span>Athlete</span> </div> <div class="ag-header-cell" style="width: 90px;"> <span>Age</span> </div> <!-- the other headers... --> </div> <div class="ag-body-container"> <div class="ag-row ag-row-even" row="0" style="height: 30px; width: 830px;"> <div class="ag-cell cell-col-0" col="0" style="width: 120px;">Michael Phelps</div> <div class="ag-cell cell-col-1" col="1" style="width: 90px;">United States</div> <!-- the other row cells... --> </div> <div class="ag-row ag-row-odd" row="1" style="height: 30px; width: 830px;"> <div class="ag-cell cell-col-0" col="0" style="width: 120px;">Michael Phelps</div> <div class="ag-cell cell-col-1" col="1" style="width: 90px;">United States</div> <!-- the other row cells... --> </div> <!-- the other rows... --> </div> </div>

Customizing the themes with Sass variables

ag-Grid 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.

The example below is taken from Theme Customization Example Repository:

// Customize the look and feel of the grid with Sass variables // Up-to-date list of variables is available in the source code: https://github.com/ag-grid/ag-grid/blob/latest/src/styles/theme-fresh.scss $icons-path: "~ag-grid/src/styles/icons/"; // changes the border color $border-color: #FF0000; // Changes the font size // $font-size: 12px; // Changes the font family // $font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; // Reverts the cell horizontal padding change between ag-fresh and ag-theme-fresh // $cell-horizontal-padding: 2px; // changes the icon color $icon-color: red; @import '~ag-grid/src/styles/ag-grid.scss'; @import '~ag-grid/src/styles/ag-theme-fresh.scss';

A runnable version of the example above is available in the ag-Grid Customize Theme repository.

Following is a list of the most common Sass variables used, their default values for the fresh theme, and a short explanation of their purpose.

$accent-colorblack
The color for the checked checkboxes.
$ag-range-selected-color-1rgba(120, 120, 120, 0.4)
The selection background color.
$background-colorwhite
The default background color.
$border-colordarkgrey
The color used for all borders.
$card-background-color#f6f6f6
The background color for the context menu and the column menu.
$cell-data-changed-colorwhite
The background color used when the cell flashes when data is changed.
$cell-highlight-border2px solid darkgreen
The border used to mark cells as being copied.
$cell-horizontal-border1px dotted silver
The border delimiter between cells.
$cell-horizontal-padding$grid-size * 3
The cell horizontal padding.
$chip-background-color#ecf0f1
The background color of the column labels used in the grouping / pivoting.
$disabled-foreground-color-opacity0.5
The opacity of the disabled / empty text elements.
$disabled-foreground-colorrgba(black, $disabled-foreground-color-opacity)
The color of the disabled / empty text elements.
$focused-cell-border-colordarkgrey
The border color of the focused cell.
$font-family'Helvetica Neue', sans-serif
The grid font family.
$font-size14px
The grid font size.
$font-weight400
The grid font weight (400 equals 'normal').
$foreground-opacity1
The foreground opacity.
$foreground-colorrgba(black, $foreground-opacity)
The default color of the text.
$grid-size4px
The basic unit used for the grid spacing and dimensions. Changing this makes the grid UI more / less compact.
$header-background-colortransparent
The header background color.
$header-background-imagelinear-gradient(white, lightgrey)
The header background gradient - you can also refer to an an image with `url(...)`.
$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.
$header-icon-size14px
The header icon height.
$hover-colorinherit
The background color of the row when hovered.
$icon-color#333
The icon color.
$icon-size12px
The icon width and height (icons are square).
$icons-path'./icons/'
The path to the icon svg files. If you are to change that, make sure that the directory you point to contains the complete set of icons.
$menu-option-active-color#bde2e5
The background color of the context / column menu items when hovered.
$odd-row-background-color#f6f6f6
The odd row background color.
$panel-background-color#f6f6f6
The background color of the column menu.
$range-selection-background-colorrgba(120, 120, 120, 0.4)
The background color of the selected cells.
$range-selection-highlight-colorrgba(255, 255, 255, 0.4)
The background color for the copied cells.
$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.
$secondary-font-family$font-family
The font family used in the header.
$secondary-font-size14px
The header font size.
$secondary-font-weight400
The header font weight.
$secondary-foreground-color-opacity1
The header font color opacity.
$secondary-foreground-colorrgba(#333, $secondary-foreground-color-opacity)
The header font color.
$tab-background-color#e6e6e6
The background color of the tab in the column menu
$tool-panel-background-color#f6f6f6
The tool panel background color
$value-change-delta-down-colordarkred
The color used when the cell value decreases.
$value-change-delta-up-colordarkgreen
The color used when the cell value increases.
$value-change-value-highlight-background-color#cec
The background color used when the cell value changes.
$row-group-indent-size$grid-size * 3 + $icon-size
The indent used for the row groups.
$toolpanel-indent-size$grid-size + $icon-size
The indent used for the tool panel hierarchy.

You can examine the full, up-to-date list of the Sass variables and their usage in the source code of the themes. The _ag-theme-common.scss file contains the actual implementation, while the ag-theme-*.scss contain the default variable values for each theme.