<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.
| Component | Relationship | Type | Ancestor |
|---|---|---|---|
| ZingGrid | Parent | Manual | n/a |
| ZGTable | Parent | Generated | 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>
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.
| 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 |
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.
| Name | Description |
|---|---|
| status | The container for the no data status message |
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.
[api: <zg-no-data>]