Search

JavaScript Data GridBuilt-in themes

Built-in themes provide a starting point for theming your application.

Themes are objects imported from the ag-grid-community package and provided to grid instances using the theme grid option.

import { themeBalham } from 'ag-grid-community';

Built-in Themes

  • Quartz - Our default theme, with high contrast and generous padding.
  • Balham - A more traditional theme modelled after a spreadsheet application.
  • Alpine - The default theme before Quartz. We recommend quartz for new projects; this theme is intended to ease migration to the Theming API for applications already using Alpine.

Changing the Default Theme 

import { themeBalham } from 'ag-grid-community';

const gridOptions = {
    theme: themeBalham,
    ...
}

This is a minimal example of importing a theme from ag-grid-community and applying it to a grid instance.

Customising Built-in Themes

Themes are simply preset configurations of parts and parameters. After choosing a theme as a starting point, you can:

  1. Choose a different Color Scheme if required.
  2. Use Theme Parameters to customise borders, compactness, fonts and more.
  3. Use Theme Parts mix and match elements from different themes, for example the icons from Quartz with the text inputs from Material.
  4. Write your own CSS for unlimited control over grid appearance.