<zing-grid>

Interactive Storybook Playground

zing-grid is the main tag used to create JavaScript data grids and tables. You enable most of the features on this tag, although there are still many features outside of this tag. Some features require just the attribute, while others allow you to pass a value to the attribute.

Related Web Components

• <zg-column>
• <zg-param>

Attributes

A lot of features on the root web component <zing-grid> are enabled just by their presence. Some attributes require values and those are defined under Example Values.

Example Usage

<zing-grid src="https://cdn.zinggrid.com/datasets/user-roles.json"
  caption="Hello ZingGrid"
  pager
  page-size="2">
</zing-grid>

CSS Variables

<zing-grid> can be styled with CSS variables, like so:

:root {
  --zing-grid-color: red;
}

Below is a list of all the associated --zing-grid CSS variables. Check out the full list of CSS variables or our Styling Basics guide to learn more about styling the grid.

CSS Selector

Set zing-grid:not(:defined) {display:none;} to hide <zing-grid> instances until they are ready (see below). This stops child elements from appearing unstyled for a brief moment.

zing-grid:not(:defined) {display:none;}

You can also set a height for the grid while it is loading. Implicitly, the grid will add a loading attribute so you can easily style it while it is fetching data.

If you want to prevent choppy rendering, set a height on the grid while it is loading, like so:

zing-grid[loading] {
  height: 450px;
}

Slots

<zing-grid> contains placeholders to allow adding markup inside the component.

<zing-grid>
  <zg-caption>Slotted Content</zg-caption>
</zing-grid>

Below is a list of all the associated ZingGrid slots. Check out the full list of slots.