Theming refers to the process of adjusting design elements such as colours, borders and spacing to match your applications' design.
We provide a range of methods for customising the appearance of the grid so that you can create any look that your designer can imagine. From the quick and easy to the most advanced, they are:
- Select a Built-in Theme as a starting point.
- Choose a different Color Scheme if required.
- Use Theme Parameters to customise borders, compactness, fonts and more.
- Use Theme Parts to change the appearance of components like the icon set and text inputs.
- Write your own CSS for unlimited control over grid appearance.
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.
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.
Legacy Themes
Before v33, themes were applied by importing CSS files from our NPM packages, see Legacy Themes for more information.