<zg-no-data>

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

<zing-grid nodata="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.

ZGNoData CSS Variables and Default Values
NameDefaultDescriptionDemoCSS Ref
--zg-no-data-backgroundvar(--theme-color-light)Styles the background of empty message when in ``
--zg-no-data-border1px solid var(--theme-border-color)Styles the border of empty message when in ``
--zg-no-data-border-bottomvar(--zg-no-data-border, 0)Styles the bottom border of empty message when in ``
--zg-no-data-border-leftvar(--zg-no-data-border, 0)Styles the left border of empty message when in ``
--zg-no-data-border-radius0Styles the border radius of empty message
--zg-no-data-border-rightvar(--zg-no-data-border, 0)Styles the right border of empty message when in ``
--zg-no-data-border-topvar(--zg-no-data-border, 1px solid var(--theme-border-color)Styles the top border of empty message when in ``
--zg-no-data-colorvar(--theme-font-size)Sets the font color content inside of empty message when in ``
--zg-no-data-font-sizeinheritSets the font size of empty message
--zg-no-data-font-styleinheritSets the font style of empty message
--zg-no-data-font-weightinheritSets the font weight of empty message
--zg-no-data-line-heightinheritSetes the line height of empty message
--zg-no-data-min-heightautoSets the min-height of empty message
--zg-no-data-paddingvar(--zg-cell-height, var(--theme-padding_x, auto))) var(--theme-padding_x)Sets the padding of empty message
--zg-no-data-text-alignleftSets text alignment of content inside of empty message

CSS Selector

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

zg-no-data {
  background: red;
}

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
NameDescriptionDemo
No data content.

[api: <zg-no-data>]