Styling Basics

Our goal for ZingGrid is to make showing data in grids easy. The same should apply for styling them. 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.

Component Selectors

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

For example, to style <zing-grid> and 'even' grid-body cells:

CloseCopy Copied
zing-grid {
  border: 10px solid #003749;
  font-size: 1.3rem;
}
zg-cell:nth-of-type(even) {
  background: #f17b7b;
}

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

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.

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

Try hovering over the grid cells!

Edit
Download
CloseCopy Copied
CloseCopy Copied
CloseCopy Copied

CSS Variables

While most styling can be done on the component element itself, ZingGrid is at the end of the day a web component utilizing ShadowDom. We designed the grid to expose as much of the structure to the lightDom as possible to make styling easy. However, there is functionality hidden away in the shadows that you might want to style.

To navigate this light/shadowDom interplay, we developed a system of CSS variables that allowed us to easily create the various themes that ZingGrid ships with. By default, within the shadowDom, you have limited controls to target elements: :host, :host-context, and ::slotted(), with the added limitation that you can only target the slotted element, not its child elements.

CSS variables, on the other hand, expose any element at any depth. They also have the added benefit of acting as a public api; expose the public css properties while keeping critical system properties locked away.

The good news for you is all of these variables we used to create the built-in themes are available for you to use! There are many uses to these that you'll discover, but an example of a helpful way to use them is the family of --theme-xxxx-style variables. Instead of setting the same background color on a few elements manually, you can instead set the --theme-background-color variable directly and all elements associated with that will show the new color.

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

Sample CSS

CloseCopy Copied
:root {
  --zing-grid-background: black;

  /* zing-grid selectors */
  --zing-grid-background: #eeeeee; /* overrides root variable */
  --zing-grid-font-size: 1.2rem;
  --zing-grid-padding: 10px;
  --zing-grid-box-shadow: 0 0 9px rgba(0, 0, 0, .15);

  /* zg-caption selectors */
  --zg-caption-background: darkorange;
  --zg-caption-color: white;
  --zg-caption-font-weight: bold;
  --zg-caption-title-text-align: center;
  --zg-caption-transition: 0.3s opacity;
  --zg-caption-opacity: 0.7;
  --zg-caption-font-size: 2rem;

  /* zg-head selectors */
  --zg-head-cell-color: orange;

  /* zg-cell selectors */
  --zg-cell-color: blue;
  --zg-cell-transition: 1s background;
}

/* you can set CSS variables based on psuedo selectors */
zg-caption:hover {
  --zg-caption-opacity: 1;
}

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

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

Result

Edit
Download
CloseCopy Copied
CloseCopy Copied
CloseCopy Copied

Custom Variables

Echoing the Component Selectors section, the grid is just markup elements, so you can easily incorporate your own variables to make your life easier. Consider the following:

CloseCopy Copied
:root {
  --my-background: #f17b7b;
}
zing-grid {
  /* Or add here instead of :root: --my-background: #f17b7b; */
  border: 5px solid var(--my-background);
}
zg-caption {
  /* You can even set internal variables to your variables! */
  --zg-caption-color: var(--my-background);
}
zg-head-cell {
  color: var(--my-background);
}
zg-cell:nth-of-type(even),
zg-foot {
  background: var(--my-background);
}

Next Steps

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