<zg-no-data>

Interactive Storybook Playground

The <zg-no-data> tag is a web component that controls the styling and display of the message that appears to let the user know when no data has been loaded into a grid.

Image of the DOM relationship for the zg-no-data web component tag

Related Web Components

Usage

A <zg-no-data> tag can be manually inserted inside the grid as slotted content or automatically inserted when enabled via the nodata attribute. The message is styleable via CSS variables or the zg-no-data CSS selector.

You can insert <zg-no-data> via the no-data attribute, like so:

<zing-grid no-data="Hello No Data"></zing-grid>

You can slot the <zg-no-data> tag as well:

<zing-grid>
  <zg-no-data>Hello No Data!</zg-no-data>
</zing-grid>

Attributes

There are no attributes available for the <zg-no-data> web component.

CSS Variables

<zg-no-data> can be styled with CSS variables, like so:

:root {
  --zg-no-data-background: red;
}

Below is a list of all the associated --zg-no-data CSS variables. Check out the full list of CSS variables or our Styling Basics guide to learn more about styling the grid.

CSS Selector

<zg-no-data> can be styled by common CSS selectors, like so:

zg-no-data {
  background: red;
}

CSS Shadow Parts

<zg-no-data> exposed elements within the shadow can be styled by CSS shadow parts, like so:

zg-no-data::part(status) {
  background-color: red;
}

Below is a list of all the associated ZGNoData shadow parts. Check out the full list of CSS shadow parts or our Styling Basics guide to learn more about styling the grid.

Slots

<zg-no-data> contains placeholders to allow adding markup inside the component.

<zg-no-data>Slotted Content</zg-no-data>

Below is a list of all the associated ZGNoData slots. Check out the full list of slots.