zg-nodata
The <zg-nodata> tag is a web component that controls the styling and display of the grid caption.
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; }
| Name | Default | Description | Demo | CSS Ref |
|---|---|---|---|---|
| --zg-nodata-background | var(--theme-color-light) | Styles the background of empty message when in ` | ||
| --zg-nodata-border | 1px solid var(--theme-border-color) | Styles the border of empty message when in ` | ||
| --zg-nodata-border-bottom | var(--zg-nodata-border, 0) | Styles the bottom border of empty message when in ` | ||
| --zg-nodata-border-left | var(--zg-nodata-border, 0) | Styles the left border of empty message when in ` | ||
| --zg-nodata-border-radius | 0 | Styles the border radius of empty message | ||
| --zg-nodata-border-right | var(--zg-nodata-border, 0) | Styles the right border of empty message when in ` | ||
| --zg-nodata-border-top | var(--zg-nodata-border, 1px solid var(--theme-border-color) | Styles the top border of empty message when in ` | ||
| --zg-nodata-color | var(--theme-font-size) | Sets the font color content inside of empty message when in ` | ||
| --zg-nodata-font-size | inherit | Sets the font size of empty message | ||
| --zg-nodata-font-style | inherit | Sets the font style of empty message | ||
| --zg-nodata-font-weight | inherit | Sets the font weight of empty message | ||
| --zg-nodata-line-height | inherit | Setes the line height of empty message | ||
| --zg-nodata-min-height | auto | Sets the min-height of empty message | ||
| --zg-nodata-padding | var(--zg-cell-height, var(--theme-padding_x, auto))) var(--theme-padding_x) | Sets the padding of empty message | ||
| --zg-nodata-text-align | left | Sets text alignment of content inside of empty message |
CSS Selector
<zg-nodata> can be styled by common CSS selectors.
zg-nodata { background: red; }