Themes

The grid is styled using CSS. A set of CSS rules styling the grid is referred to as a theme. The grid comes bundled with Provided Themes or you can create you own theme by applying your own style to the grid.

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-balham.
  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 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.

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

Important

If you create your own theme, it's name has to follow the ag-theme-<theme name> naming convention, otherwise styles will not be applied to floating elements (eg. context menus) properly.

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.