zg-head

The <zg-head> is a web component that is a container for the 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, but instead is used as a styling target for CSS.

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

Related Web Components

Usage

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

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

Attributes

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

CSS Variables

All the associated --zg-head 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-head-background: red;
}
ZGHead CSS Variables and Default Values
NameDefaultDescriptionDemoCSS Ref
--zg-head-backgroundBrowser's default valueStyles the background of grid head rows
--zg-head-border1px solid var(--theme-border-color)Styles the border of grid head rows
--zg-head-border-bottomvar(--zg-head-border, 1px solid var(--theme-border-color))Styles the bottom border of grid head rows
--zg-head-border-leftvar(--zg-head-border, 0)Styles the left border of grid head rows
--zg-head-border-rightvar(--zg-head-border, 0)Styles the right border of grid head rows
--zg-head-border-topvar(--zg-head-border)Styles the top border of grid head rows
--zg-head-visibilityBrowser's default valueSets the visibility of grid head rows
--zg-row-head-backgroundvar(--zg-head-background)Styles the background of grid head rows
--zg-row-head-background_evenvar(--zg-row-head-background, var(--zg-head-background))Styles the background of 'even' grid head rows
--zg-row-head-background_even_hovervar(--zg-row-head-background_hover, var(--zg-head-background_hover))Styles the background of 'even' grid head rows on hover
--zg-row-head-background_hoverBrowser's default valueStyles the background of grid head rows on hover
--zg-row-head-background_oddvar(--zg-row-head-background, var(--zg-head-background))Styles the background of 'odd' grid head rows
--zg-row-head-background_odd_hovervar(--zg-row-head-background_hover, var(--zg-head-background_hover))Styles the background of 'odd' grid head rows on hover
--zg-row-head-bordervar(--zg-row-border-bottom, var(--zg-row-border, var(--zg-row-border, 0)))Styles the border of grid head rows
--zg-row-head-border-bottomvar(--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-leftvar(--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-rightvar(--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-topvar(--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-colorvar(--zg-row-color)Styles the font color of grid head rows
--zg-row-head-color_evenvar(--zg-row-head-color, var(--zg-row-color))Styles the font color of 'even' grid head rows
--zg-row-head-color_even_hovervar(--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_hovervar(--zg-row-color_hover)Styles the font color of grid head rows on hover
--zg-row-head-color_oddvar(--zg-row-head-color, var(--zg-row-color))Sets the font color of 'odd' grid head rows
--zg-row-head-color_odd_hovervar(--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_evenvar(--zg-row-head-height, var(--zg-row-height))Sets the height of 'even' grid head rows
--zg-row-head-height_oddvar(--zg-row-head-height, var(--zg-row-height))Sets the height of 'odd' grid head rows

CSS Selector

<zg-head> can be styled by common CSS selectors.

zg-head {
  background: red;
}