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


A <zg-header> tag can be manually inserted inside the grid as slotted content. The header is stylable 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>


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

CSS Variables

All the associated --zg-header CSS variables. You can find the full list of css variables or check out our styling basics to learn more about styling the grid.

root: {
--zg-header-background: red;
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.

zg-header {
  background: red;