Docs

<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

ZGNoData Relationships
Component Relationship Type Ancestor
ZingGrid Parent Generated, Manual n/a
ZGButton Child Generated, Manual n/a
ZGCheckbox Child Manual n/a
ZGIcon Child Manual n/a
ZGInput Child Manual n/a
ZGSelect Child Manual n/a
ZGText Child Manual n/a

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

Attributes

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

Top

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.

ZGNoData CSS Variables and Default Values
Name Default Description Demo CSS Ref
--zg-no-data-background var(--theme-color-light) Styles the background of empty message when in ``
--zg-no-data-border 1px solid var(--theme-border-color) Styles the border of empty message when in ``
--zg-no-data-border-bottom var(--zg-no-data-border, 0) Styles the bottom border of empty message when in ``
--zg-no-data-border-left var(--zg-no-data-border, 0) Styles the left border of empty message when in ``
--zg-no-data-border-radius 0 Styles the border radius of empty message
--zg-no-data-border-right var(--zg-no-data-border, 0) Styles the right border of empty message when in ``
--zg-no-data-border-top var(--zg-no-data-border, 1px solid var(--theme-border-color) Styles the top border of empty message when in ``
--zg-no-data-color var(--theme-font-size) Sets the font color content inside of empty message when in ``
--zg-no-data-font-size inherit Sets the font size of empty message
--zg-no-data-font-style inherit Sets the font style of empty message
--zg-no-data-font-weight inherit Sets the font weight of empty message
--zg-no-data-line-height inherit Sets the line height of empty message
--zg-no-data-min-height auto Sets the min-height of empty message
--zg-no-data-padding var(--zg-cell-height, var(--theme-padding_x, auto))) var(--theme-padding_x) Sets the padding of empty message
--zg-no-data-text-align left Sets text alignment of content inside of empty message
Top

CSS Selector

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

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

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.

ZGNoData CSS Shadow Parts
Name Description
status The container for the no data status message
Top

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.

ZGNoData Slots
Name Description Demo
No data content.
Top

[api: <zg-no-data>]