experiment_id: web-retrieval-v1
fixture_id: /docs/api/tags/zg-header
mode: provenance
representation: html
origin_response_id: e5582125a5c89903510ca11a9ac89700
version: 2026-10-21
version_created_at_utc: 2026-10-21T20:42:35.636Z
version_nonce: 44f5c28c5e04623bff3767d69949c4ff
generated_at_utc: 2026-11-08T23:26:22.135Z
response_nonce: 31ee9d83d13998e39977690208c50f4a
Docs Version 1

<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.

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

ZGHeader Relationships
Component Relationship Type Ancestor
ZingGrid Parent Generated n/a
ZGCaption Child Generated n/a
ZGControlBar Child Generated n/a
ZGSource Child Generated n/a

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>
Top

Attributes

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

Top

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
Name Default Description Demo CSS Ref
--zg-header-background Browser's default value Styles the background of header
--zg-header-border 0 Styles the border of header
--zg-header-border-bottom var(--zg-header-border, 0) Styles the bottom border of header
--zg-header-border-left var(--zg-header-border, 0) Styles the left border of header
--zg-header-border-radius 0 Applies border radius to header
--zg-header-border-right var(--zg-header-border, 0) Styles the right border of header
--zg-header-border-top var(--zg-header-border, 0) Styles the top border of header
Top

CSS Selector

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

zg-header {
  background: red;
}
Top

Slots

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

Top

[api: <zg-header>]