Theming refers to the process of adjusting design elements such as colours, borders and spacing to match your applications' design.
The grid is styled using CSS. It ships with built-in styles that can create a range of designs. You can then use CSS to create more advanced customisations.
We currently support two methods of applying built-in styles:
Global Styles
Global Styles - CSS stylesheets imported from out packages - are the standard way of styling the grid.
The grid's Global Style is highly customisable:
The first step is to select a theme from one of our provided themes.
Next you can apply customisations to the theme using CSS variables and rules.
If you are using Sass, check out the Sass API which provides additional validation.
Theming API
The Theming API is the new Javascript API for styling the grid. It is more flexible and easier to use than the Global Styles. It is also the only way to use a theme that you have designed using the theme builder.
In a future release the Theming API will become the primary way to style the grid, so adopting it now for new applications will avoid the need to migrate later.
Programmatically changing row and cell appearance
Separately from theming, the grid supports using code to customise the appearance of individual columns, headers or cells by using row styles, cell styles or custom renderers. Unlike theming, these methods allow you to change the appearance of elements depending on the data that they contain.