Search

Vue Data GridTheme Parts

Parts contain the CSS styles for a single feature like icons or text inputs.

Using parts you can, for example, select a text input style that matches you application, or disable our provided text input styles so that you can write your own.

Configuring Theme Parts

To add a part to a theme, call the theme.withPart(...) method which returns a new theme using that part. A theme can only have one part for a given feature, so for example because all color scheme parts have feature: "colorScheme", adding a new color scheme to a theme will remove any existing part.

import { themeQuartz, colorSchemeDark, iconSetMaterial } from 'ag-grid-community';

// withPart() returns a new theme and calls can be chained
const myTheme = themeQuartz
    .withPart(iconSetMaterial)
    .withPart(colorSchemeDark);

This example demonstrates mixing and matching any built-in theme, icon set, and color scheme:

Parts Reference

The following parts are available:

  • colorScheme feature:
    • colorSchemeLight - neutral light scheme
    • colorSchemeLightCold - light scheme with subtle cold tint used by Balham theme
    • colorSchemeLightWarm - light scheme with subtle warm tint
    • colorSchemeDark - neutral dark scheme
    • colorSchemeDarkBlue - our preferred dark scheme used on this website
    • colorSchemeDarkWarm - dark scheme with subtle warm tint
  • iconSet feature:
    • iconSetQuartz - our default icon set
      • iconSetQuartz({strokeWidth: number}) you can call iconSetQuartz as a function to provide a custom stroke width in pixels (the default is 1.5)
      • iconSetQuartzLight and iconSetQuartzBold preset lighter and bolder versions of the Quartz icons with 1px and 2px stroke widths respectively.
    • iconSetMaterial - the Material Design icon set
    • iconSetAlpine - the icon set used by the Alpine theme
    • iconSetBalham - the icon set used by the Balham theme
  • buttonStyle feature:
    • buttonStyleBase - unstyled buttons with many parameters to configure their appearance
    • buttonStyleQuartz - buttons styled as per the Quartz theme
    • buttonStyleAlpine - buttons styled as per the Alpine theme
    • buttonStyleBalham - buttons styled as per the Balham theme
  • columnDropStyle feature - controls the styling of column drop zone in the columns tool panel:
    • columnDropStylePlain - undecorated drop zone as used by Balham and Material themes
    • columnDropStyleBordered - drop zone with a dashed border around it as used by the Quartz and Alpine themes.
  • checkboxStyle feature:
    • checkboxStyleDefault - checkbox style used by our themes. There is only one style provided which is configurable through parameters. It being a part allows you to replace it with your own checkbox styles if desired.
  • inputStyle feature:
    • inputStyleBase - unstyled inputs with many parameters to configure their appearance
    • inputStyleBordered - inputs with a border around them
    • inputStyleUnderlined - inputs with a line underneath them as used in Material Design
  • tabStyle feature:
    • tabStyleBase - unstyled tabs with many parameters to configure their appearance
    • tabStyleQuartz - tabs styled as per the Quartz theme
    • tabStyleMaterial - tabs styled as per the Material theme
    • tabStyleAlpine - tabs styled as per the Alpine theme
    • tabStyleRolodex - tabs designed to imitate paper cards, as used by the Balham theme
  • styleMaterial feature (used by the Material theme):
    • styleMaterial - Adds the primaryColor parameter defined by Material Design v2 and uses this color instead of the accentColor for most colored elements. accentColor is still used for checked checkboxes and to highlight active filters. This part also applies some adjustments to appearance of elements to match the Material Design specification, e.g. making all button text uppercase.

Removing a Part

To remove a part from a theme, call theme.withoutPart(featureName), which returns a new theme without the specified part:

const myCustomTheme = themeQuartz.withoutPart('checkboxStyle');

After removing the built-in part, this example uses CSS in a separate style sheet to style the checkboxes:

The above example uses an empty part to disable the default checkbox styles and adds its own checkbox styles in the application style sheet. If you want to distribute the checkbox style as a library, you can add the new styles to the part itself, see Distributing Shared Themes & Parts.