<zg-header>

Interactive Storybook Playground

The <zg-header> is a web component that is the semantic container placed at the top of the grid to hold various grid items. <zg-header> is created internally and should not be placed directly in the user's HTML. You can style the <zg-header> through CSS variables or the zg-header CSS selector.

Related Web Components

• <zing-grid>
• <zg-caption>
• <zg-control-bar>

Usage

A <zg-header> tag can be manually inserted inside the grid as slotted content. The header is styleable via CSS variables or the zg-header CSS selector.

<zing-grid src="https://cdn.zinggrid.com/datasets/user-roles.json">
  <zg-header>Hello world</zg-header>
</zing-grid>

Attributes

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

CSS Variables

<zg-header> can be styled with CSS variables, like so:

:root {
--zg-header-background: red;
}

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

CSS Selector

<zg-header> can be styled by common CSS selectors, like so:

zg-header {
  background: red;
}

Slots

There are no slots available for the <zg-header> web component.