features
Menu
Menu

Zebra Striping

ZingGrid has default behaviors for displaying zebra striping. You can achieve this through one simple attribute or CSS styling.

Default Zebra Striping

Display default striping by adding the zebra attribute to the <zing-grid> tag.
CloseCopy Copied
<zing-grid zebra></zing-grid>
Edit
Download
CloseCopy Copied
CloseCopy Copied
CloseCopy Copied

Custom Zebra Striping

To do a custom zebra color, set --theme-background-zebra in your CSS file to any color you want (Note that you’ll still need to have the zebra attribute on the <zing-grid> tag).
CloseCopy Copied
:root {
  --theme-background-zebra: #ef9a9a;
}
Edit
Download
CloseCopy Copied
CloseCopy Copied
CloseCopy Copied

Multiple Colors

Add multiple colors by passing a comma separated list to the zebra attribute, then defining those colors in your CSS file.
CloseCopy Copied
<zing-grid zebra="red, orange, yellow"></zing-grid>
Edit
Download
CloseCopy Copied
CloseCopy Copied
CloseCopy Copied

Striping the Editor Controls in Card Mode

If you’re using editor controls in your grid, this is what zebra striping looks like in card mode:
Edit
Download
CloseCopy Copied
CloseCopy Copied
CloseCopy Copied
To add the zebra stripe color to the editor controls in card mode, set it on the variable --zg-row-card-head-background_editor_even.
CloseCopy Copied
:root {
    --theme-background-zebra: #ef9a9a;
    --zg-row-card-head-background_editor_even: #ef9a9a;
}
Edit
Download
CloseCopy Copied
CloseCopy Copied
CloseCopy Copied

CSS Variables

Instead of adding the zebra attribute to the <zing-grid> tag, you can add zebra striping with CSS variables.
CloseCopy Copied
:root {
  /* even/odd styling */
  --zg-row-body-background_odd:#ef9a9a;
  --zg-row-body-background_even:#fff59d;
}
Edit
Download
CloseCopy Copied
CloseCopy Copied
CloseCopy Copied

CSS Selectors

Instead of adding the zebra attribute to the <zing-grid> tag, you can add zebra striping with CSS selectors.
CloseCopy Copied
/* even/odd styling */
zg-body zg-row:nth-child(odd){
  background:#ef9a9a;
}
zg-body zg-row:nth-child(even) {
  background:#fff59d;
}
Edit
Download
CloseCopy Copied
CloseCopy Copied
CloseCopy Copied
loadingloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloading