zg-nodata

The <zg-nodata> tag is a web component that controls the styling and display of the grid caption.

Image of the DOM relationship for the zg-nodata web component tag

Related Web Components

Usage

A <zg-nodata> tag can is automatically inserted inside the grid and can be updated via the nodata attribute. The message is stylable via CSS variables or the zg-nodata CSS selector.

You can use the nodata attribute:

<zing-grid nodata="Hello No Data"></zing-grid>

Attributes

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

CSS Variables

All the associated --zg-nodata CSS variables. You can find the full list of css variables or check out our styling basics to learn more about styling the grid.

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

CSS Selector

<zg-nodata> can be styled by common CSS selectors.

zg-nodata {
  background: red;
}