--- title: "ZingGrid Web Component: `` | Docs" description: "View our in depth tutorial covering the web component `` tag and the associated features for the JavaScript grid." url: https://www.zinggrid.com/docs/api/tags/zg-no-data --- ```text experiment_id: web-retrieval-v1 fixture_id: /docs/api/tags/zg-no-data.md mode: provenance representation: markdown origin_response_id: 1b32cdd9936091e4d25c382b73eb2ccf version: 2026-10-21 version_created_at_utc: 2026-10-21T20:42:35.643Z version_nonce: 4282d7add2a690154006f0b0c7f24f14 generated_at_utc: 2026-11-08T23:36:17.540Z response_nonce: fd38a43148d86bdb07cf1dd6d92432a8 ``` # `` [Interactive Storybook Playground](https://storybook.zinggrid.com/?path=/docs/components-zg-no-data--docs) The `` 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](https://storage.googleapis.com/zinggrid-pwa.appspot.com/components/v2/zg-no-data-web-component-dom.png "Image of the DOM relationship for the zg-no-data web component tag") | Component | Relationship | Type | Ancestor | | --- | --- | --- | --- | | [ZingGrid](https://www.zinggrid.com/docs/api/tags/zing-grid) | Parent | Manual | n/a | | [ZGTable](https://www.zinggrid.com/docs/api/tags/zg-table) | Parent | Generated | n/a | | [ZGButton](https://www.zinggrid.com/docs/api/tags/zg-button) | Child | Generated, Manual | n/a | | [ZGCheckbox](https://www.zinggrid.com/docs/api/tags/zg-checkbox) | Child | Manual | n/a | | [ZGIcon](https://www.zinggrid.com/docs/api/tags/zg-icon) | Child | Manual | n/a | | [ZGInput](https://www.zinggrid.com/docs/api/tags/zg-input) | Child | Manual | n/a | | [ZGSelect](https://www.zinggrid.com/docs/api/tags/zg-select) | Child | Manual | n/a | | [ZGText](https://www.zinggrid.com/docs/api/tags/zg-text) | Child | Manual | n/a | #### Related Web Components - [``](https://www.zinggrid.com/docs/api/tags/zg-data/) - [``](https://www.zinggrid.com/docs/api/tags/zg-button/) ## Usage A `` 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 `` via the `no-data` attribute, like so: ```html ``` You can slot the `` tag as well: ```html Hello No Data! ``` ## Attributes There are no attributes available for the `` web component. ## CSS Variables `` can be styled with CSS variables, like so: ```css :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](https://www.zinggrid.com/docs/api/css-variables/reference/) or our [Styling Basics guide](https://www.zinggrid.com/docs/getting-started/styling-basics/) to learn more about styling the grid. | Name | Default | Description | Demo | | --- | --- | --- | --- | | `--zg-no-data-background` | var(--theme-color-light) | Styles the background of empty message when in `` | [Example code](https://app.zingsoft.com/demos/embed/DZ18XBMU) | | `--zg-no-data-border` | 1px solid var(--theme-border-color) | Styles the border of empty message when in `` | [Example code](https://app.zingsoft.com/demos/embed/H9H8800K) | | `--zg-no-data-border-bottom` | var(--zg-no-data-border, 0) | Styles the bottom border of empty message when in `` | [Example code](https://app.zingsoft.com/demos/embed/5GHU0UT2) | | `--zg-no-data-border-left` | var(--zg-no-data-border, 0) | Styles the left border of empty message when in `` | [Example code](https://app.zingsoft.com/demos/embed/8PC30SFF) | | `--zg-no-data-border-radius` | 0 | Styles the border radius of empty message | [Example code](https://app.zingsoft.com/demos/embed/A1CYESQT) | | `--zg-no-data-border-right` | var(--zg-no-data-border, 0) | Styles the right border of empty message when in `` | [Example code](https://app.zingsoft.com/demos/embed/4SZ8NQ8O) | | `--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 `` | [Example code](https://app.zingsoft.com/demos/embed/F5LJEMJO) | | `--zg-no-data-color` | var(--theme-font-size) | Sets the font color content inside of empty message when in `` | [Example code](https://app.zingsoft.com/demos/embed/9QIBFMGP) | | `--zg-no-data-font-size` | inherit | Sets the font size of empty message | [Example code](https://app.zingsoft.com/demos/embed/26M7XA7S) | | `--zg-no-data-font-style` | inherit | Sets the font style of empty message | [Example code](https://app.zingsoft.com/demos/embed/ERYSUAI0) | | `--zg-no-data-font-weight` | inherit | Sets the font weight of empty message | [Example code](https://app.zingsoft.com/demos/embed/PT3I1OQC) | | `--zg-no-data-line-height` | inherit | Sets the line height of empty message | [Example code](https://app.zingsoft.com/demos/embed/XGIEZHE5) | | `--zg-no-data-min-height` | auto | Sets the min-height of empty message | [Example code](https://app.zingsoft.com/demos/embed/84P0AHF7) | | `--zg-no-data-padding` | var(--zg-cell-height, var(--theme-padding_x, auto))) var(--theme-padding_x) | Sets the padding of empty message | [Example code](https://app.zingsoft.com/demos/embed/S9ZVCD9A) | | `--zg-no-data-text-align` | left | Sets text alignment of content inside of empty message | [Example code](https://app.zingsoft.com/demos/embed/TWOSCDLC) | ## CSS Selector `` can be styled by common CSS selectors, like so: ```css zg-no-data { background: red; } ``` ## CSS Shadow Parts `` exposed elements within the shadow can be styled by CSS shadow parts, like so: ```css 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](https://www.zinggrid.com/docs/api/styling/css-shadow-parts) or our [Styling Basics guide](https://www.zinggrid.com/docs/getting-started/styling-basics/) to learn more about styling the grid. | Name | Description | | --- | --- | | `status` | The container for the no data status message | ## Slots `` contains placeholders to allow adding markup inside the component. ```html Slotted Content ``` Below is a list of all the associated ZGNoData slots. Check out the [full list of slots](https://www.zinggrid.com/docs/api/styling/css-shadow-parts). | Name | Description | | --- | --- | | (default) | No data content. |