Styling Basics

At its simplest, the grid components are DOM elements, so you can style them as you would a native tag: CSS selectors, pseudo-selectors, and CSS variables. Our goal for ZingGrid is to make showing data in grids easy. The same should apply for styling them.

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. Psuedo-classes like :hover and :nth-child work as expected and can be used in conjunction with CSS transitions.

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

CloseCopy Copied
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;
}

Result

Edit
Download
CloseCopy Copied
CloseCopy Copied
CloseCopy Copied

CSS Variables

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

Sample CSS

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

  /* CSS variables */
  --zg-head-cell-icon-color_sorted: red;
  --zg-head-cell-color_sorted: red;
  --zg-head-cell-background_sorted: #424242;
  --zg-cell-background_sorted: #ccc;
}

Result

Edit
Download
CloseCopy Copied
CloseCopy Copied
CloseCopy Copied

Moving Forward

There are several ways to style the grid, and they can be used in conjunction with each other. 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.


loadingloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloading