Docs

Styling

Style ZingGrid the way you want through CSS selectors or with ZingGrid's CSS variables. Use our built-in themes or create custom themes to easily switch up the look of your grid.

CSS Variables

Easily style ZingGrid with CSS variables, like so:

:root {
  --zing-grid-font-family: cursive;
}

CSS Variables Styled Grid

Here is a complete grid that has been styled via ZingGrid's CSS variables:

Top

Component Selectors

You can also use native CSS selectors to style your grid, like so:

zing-grid {
  font-family: cursive;
}

CSS Selectors Styled Grid

Here is a complete grid that has been styled via CSS selectors:

Top

CSS Shadow Parts

Use CSS shadow parts to style shadow elements within the grid:

zg-dialog::part(header) { 
  background-color: red; 
}

CSS Shadow Parts Styled Grid

Here is a complete grid that has ZGDialog styled via CSS shadow parts:

Top

Themes

Easily change the theme of your ZingGrid by applying the theme attribute on <zing-grid> (see below). Choose from these built-in themes: Android , Black, Dark, or iOS or check out the Custom Theme section below to create your own. For the default theme, just omit the attribute (or set the value to default).

<zing-grid theme="...">...</zing-grid>

Default Theme

Here is a complete grid styled with the default theme:

Android Theme

Here is a complete grid styled with the Android theme:

iOS Theme

Here is a complete grid styled with the iOS theme:

Black Theme

Here is a complete grid styled with the black theme:

Dark Theme

Here is a complete grid styled with the dark theme:

Top

Custom Theme

You can also create your own theme (with optional custom icons) and use the built-in CSS variables to customize your grid's colors, fonts, borders, and spacing.

To create a new theme, start a new .css file and add the following code:

:host([theme="mytheme"]) {
  /* Add css vars here */
}

Then, change the theme value to a name of your choosing. For example: [theme="mytheme"].

You must name the .css file the same as you set in the :host attribute value. ZingGrid replaces the file path with the name of the file so that the selector inside the CSS file matches. For example, to enable your custom theme, you would call ZingGrid as <zing-grid theme="path/to/mytheme.css">. When the grid is rendered, the library changes that path to <zing-grid theme="mytheme"> so that the selector :host([theme="mytheme"]) matches.

Custom Theme Grid

Here is a complete grid styled with a custom theme:

Top

Custom SVG File (Optional)

When you create a custom theme, you can optionally provide a matching SVG file (mytheme.svg) in the same location as the .css file to load your own icons. In your new SVG file, just add new symbols for the icons you wish to replace (see below). Any icons not replaced will show the default icon instead.

<svg id="mytheme" xmlns="http://www.w3.org/2000/svg">
  <!-- checked -->
  <symbol id="checked" viewBox="0 0 24 24">
    <path .../>
  </symbol>
  <!-- Edit -->
  <symbol id="edit" viewBox="0 0 24 24">
    <path .../>
  </symbol>
</svg>

Remember to set the id attribute to your theme name

Top

Related Resources

Here are some extra resources related to this feature to help with creating your grid:

[features: styling]