<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.
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.