<zg-head>

Interactive Storybook Playground

The <zg-head> tag is a web component that is a container for the head cells (<zg-head-cell>) of the data grid specified via the head-cell attribute found on <zg-column> tags.

The tag roughly corresponds to the idea of the <thead> tag used in HTML tables. The <zg-head> tag is generated by the library and should not be placed in a grid manually by a user. Instead, it is used as a styling target for CSS.

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

ZGHead Relationships
Component Relationship Type Ancestor
ZingGrid Parent Generated n/a
ZGRow Child Generated n/a

Related Web Components

Usage

The <zg-head> element is a generated element added to <zing-grid>.

<zing-grid src="https://cdn.zinggrid.com/datasets/user-roles.json">
</zing-grid>
Top

Attributes

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

Top

CSS Variables

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

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

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

ZGHead CSS Variables and Default Values
Name Default Description Demo CSS Ref
--zg-head-background Browser's default value Styles the background of grid head rows
--zg-head-border 1px solid var(--theme-border-color) Styles the border of grid head rows
--zg-head-border-bottom var(--zg-head-border, 1px solid var(--theme-border-color)) Styles the bottom border of grid head rows
--zg-head-border-left var(--zg-head-border, 0) Styles the left border of grid head rows
--zg-head-border-radius var(--zg-head-border-radius) Styles the border-radius of grid head rows
--zg-head-border-right var(--zg-head-border, 0) Styles the right border of grid head rows
--zg-head-border-top var(--zg-head-border) Styles the top border of grid head rows
--zg-head-visibility Browser's default value Sets the visibility of grid head rows
--zg-row-head-background var(--zg-head-background) Styles the background of grid head rows
--zg-row-head-background_even var(--zg-row-head-background, var(--zg-head-background)) Styles the background of 'even' grid head rows
--zg-row-head-background_even_hover var(--zg-row-head-background_hover, var(--zg-head-background_hover)) Styles the background of 'even' grid head rows on hover
--zg-row-head-background_hover Browser's default value Styles the background of grid head rows on hover
--zg-row-head-background_odd var(--zg-row-head-background, var(--zg-head-background)) Styles the background of 'odd' grid head rows
--zg-row-head-background_odd_hover var(--zg-row-head-background_hover, var(--zg-head-background_hover)) Styles the background of 'odd' grid head rows on hover
--zg-row-head-border var(--zg-row-border-bottom, var(--zg-row-border, var(--zg-row-border, 0))) Styles the border of grid head rows
--zg-row-head-border-bottom var(--zg-row-head-border, var(--zg-row-border-bottom, var(--zg-row-border, var(--zg-row-border, 0)))) Styles the bottom border of grid head rows
--zg-row-head-border-left var(--zg-row-head-border, var(--zg-row-border-left, var(--zg-row-border, var(--zg-row-border, 0)))) Styles the left border of grid head rows
--zg-row-head-border-right var(--zg-row-head-border, var(--zg-row-border-right, var(--zg-row-border, var(--zg-row-border, 0)))) Styles the right border of grid head rows
--zg-row-head-border-top var(--zg-row-head-border, var(--zg-row-border-top, var(--zg-row-border, var(--zg-row-border, 0)))) Styles the top border of grid head rows
--zg-row-head-color var(--zg-row-color) Styles the font color of grid head rows
--zg-row-head-color_even var(--zg-row-head-color, var(--zg-row-color)) Styles the font color of 'even' grid head rows
--zg-row-head-color_even_hover var(--zg-row-head-color_hover, var(--zg-row-color_hover, var(--zg-row-color))) Styles the font color of 'even' grid head rows on hover
--zg-row-head-color_hover var(--zg-row-color_hover) Styles the font color of grid head rows on hover
--zg-row-head-color_odd var(--zg-row-head-color, var(--zg-row-color)) Sets the font color of 'odd' grid head rows
--zg-row-head-color_odd_hover var(--zg-row-head-color_hover, var(--zg-row-color_hover, var(--zg-row-color))) Styles the font color of 'odd' grid head rows on hover
--zg-row-head-height_even var(--zg-row-head-height, var(--zg-row-height)) Sets the height of 'even' grid head rows
--zg-row-head-height_odd var(--zg-row-head-height, var(--zg-row-height)) Sets the height of 'odd' grid head rows
Top

CSS Selector

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

zg-head {
  background: red;
}
Top

Slots

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

Top

[api: <zg-head>]