Docs

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, like so:

<zing-grid zebra></zing-grid>

Default Zebra Striped Grid

Here is a complete grid styled with default zebra stripes:

Top

Custom Zebra Striping

To do a custom zebra color, set --theme-background-zebra in your CSS file to any color you want (see below). You’ll still need to have the zebra attribute on the <zing-grid> tag.

:root {
  --theme-background-zebra: #ef9a9a;
}

Custom Zebra Striped Grid

Here is a complete grid styled with custom zebra stripes:

Top

Multiple Colors

Traditional zebra striping consists of just two colors. To have multiple colors, pass a comma separated list to the zebra attribute (after defining those colors in your CSS file), like so:

<zing-grid zebra="red, orange, yellow"></zing-grid>

Multiple Zebra Stripes Grid

Here is a complete grid styled with 3 zebra stripes rather than the traditional 2 zebra stripes:

Top

Striping the Editor Controls in Card Mode

In card mode, the default background of a "striped" card is two-part: header and body (see Default Striped Card Grid below). This is a result of setting the generic --theme-background-zebra variable. If you need the header portion of the card to also have the zebra color, set --zg-row-card-background_editor_even, like so:

:root {
    --theme-background-zebra: #ef9a9a;
    --zg-row-card-background_editor_even: #ef9a9a;
}

You can see the result of this in the following Adjusted Striped Card Grid example.

If you are setting the styling with inline CSS instead of CSS variables, you only need to set the background color to avoid the two-toned appearance.

Default Striped Card Grid

Here is a complete grid in card mode styled with default stripes:

Adjusted Striped Card Grid

Here is a complete grid in card mode styled wit

Top

CSS Variables

As an alternative to adding the zebra attribute to the <zing-grid> tag, you can add zebra striping with CSS variables, like so:

:root {
  /* even/odd styling */
  --zg-row-body-background_odd:#ef9a9a;
  --zg-row-body-background_even:#fff59d;
}

CSS Variables Zebra Stripes Grid

Here is a complete grid styled with zebra stripes via CSS variables:

Top

CSS Selectors

As an alternative to adding the zebra attribute to the <zing-grid> tag, you can add zebra striping with CSS selectors, like so:

/* even/odd styling */
zg-body zg-row:nth-child(odd){
  background:#ef9a9a;
}
zg-body zg-row:nth-child(even) {
  background:#fff59d;
}

CSS Selectors Zebra Stripes Grid

Here is a complete grid styled with zebra stripes via CSS selectors:

Top

Related Resources

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

[features: zebra striping]