Styling Basics

At its simplest, the grid components are DOM elements, so you can style them as you would a native tag: with CSS selectors, pseudo-selectors, and CSS variables. Our goal for ZingGrid is to make showing data in grids easy, so the same should apply for styling them. In this guide, we'll walk you through how simple it is to style your grids.

Component Selectors

The majority of the grid styling can be applied directly to the grid components themselves. This is the suggested method to style your grids. This includes elements like the main <zing-grid> tag, the <zg-caption> tag, the <zg-cell> tag, etc.

Common Component Selectors

All native CSS selectors apply to ZingGrid. Pseudo-classes like :hover and :nth-child work as expected and can be used in conjunction with CSS transitions.

Each ZingGrid component available in the Light DOM can be directly targeted in CSS. For a list of available components, view the API Elements page.

CSS Variables

Of course, you'll need CSS variables with your selectors in order to style your grid. Using CSS variables in ZingGrid is just like using any CSS variable.

If you don't know much about CSS variables, you can check out our CSS variables usage doc.

Sample CSS

Check out the CSS below to see the most commonly used CSS selectors and variables for grid styling:

zing-grid {
  background: #eeeeee;
  font-size: 1.2rem;
  padding: 10px;
  box-shadow: 0 0 9px rgba(0, 0, 0, .15);
}

zg-caption {
  background-color: darkorange;
  color: white;
  font-weight: bold;
  opacity: 0.6;
  text-align: center;
  transition: 0.3s opacity;
  font-size: 2rem;
}

zg-caption:hover {
  opacity: 1;
}

zg-head {
  color: orange;
}

zg-cell {
  color: blue;
  transition: 1s background-color;
}

zg-cell:hover {
  background-color: orange;
}

zg-body zg-row:nth-child(odd) {
  background-color: lightblue;
}

CSS Styled Grid

Now, check out the demo below to see those CSS selectors and variables in action:

CSS Shadow Parts

When dealing with an element within a shadow tree, use CSS shadow parts to style an exposed element (has [part] attribute) within the component's shadow tree.

If you don't know much about CSS Shadow Parts, you can check out our CSS shadow parts usage doc.

Sample CSS

Check out the example CSS below on how to use CSS shadow parts:

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

Moving Forward

There are several ways to style the grid, and they can be used in conjunction with each other. However, if you don't want to make your own style changes, we offer a few built-in themes. For a list of all the CSS variables, view the CSS Variables API Reference.