<zg-header>

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.

Image of the DOM relationship for the zg-header web component tag

Related Web Components

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.

ZGHeader CSS Variables and Default Values
NameDefaultDescriptionDemoCSS Ref
--zg-header-backgroundBrowser's default valueStyles the background of header
--zg-header-border0Styles the border of header
--zg-header-border-bottomvar(--zg-header-border, 0)Styles the bottom border of header
--zg-header-border-leftvar(--zg-header-border, 0)Styles the left border of header
--zg-header-border-radius0Applies border radius to header
--zg-header-border-rightvar(--zg-header-border, 0)Styles the right border of header
--zg-header-border-topvar(--zg-header-border, 0)Styles the top border of header

CSS Selector

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

zg-header {
  background: red;
}