<zg-head-cell>

The <zg-head-cell> is a web component that is a container for the head cells (<zg-head-cell-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-cell> 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-cell web component tag

Related Web Components

Attributes

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

CSS Variables

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

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

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

ZGHeadCell CSS Variables and Default Values
NameDefaultDescriptionDemoCSS Ref
--zg-head-cell-backgroundtransparentStyles the background of head cells
--zg-head-cell-background_hovervar(--zg-head-cell-backgroundStyles the background of head cells on hover
--zg-head-cell-background_sortedinheritStyles the background of sorted head cells
--zg-head-cell-background_sorted_hovervar(--zg-head-cell-background_sorted, inherit)Styles the background of sorted head cells on hover
--zg-head-cell-border0Styles the border of head cells
--zg-head-cell-border-bottomvar(--zg-head-cell-border, 0)Styles the bottom border of head cells
--zg-head-cell-border-bottom_sortedvar(--zg-head-cell-border_sorted, 0)Styles the bottom border of sorted head cells
--zg-head-cell-border-bottom_sorted_hovervar(--zg-head-cell-border-bottom_sorted, var(--zg-head-cell-border_sorted, 0))Styles the bottom border of sorted head cells on hover
--zg-head-cell-border-leftvar(--zg-head-cell-border, 0)Styles the left border of head cells
--zg-head-cell-border-left_sortedvar(--zg-head-cell-border_sorted, 0)Styles the left border of sorted head cells
--zg-head-cell-border-left_sorted_hovervar(--zg-head-cell-border-left_sorted, var(--zg-head-cell-border_sorted, 0))Styles the left border of sorted head cells on hover
--zg-head-cell-border-rightvar(--zg-head-cell-border, 0)Styles the right border of head cells
--zg-head-cell-border-right_sortedvar(--zg-head-cell-border_sorted, 0)Styles the right border of sorted head cells
--zg-head-cell-border-topvar(--zg-head-cell-border, 0)Styles the top border of head cells
--zg-head-cell-border-top_sortedvar(--zg-head-cell-border_sorted, 0)Styles the top border of sorted head cells
--zg-head-cell-border_sorted0Styles the border of sorted head cells
--zg-head-cell-colorBrowser's default valueSets the font color of head cells
--zg-head-cell-color_hovervar(--zg-head-cell-color)Sets the font color of head cells on hover
--zg-head-cell-color_sortedvar(--zg-head-cell-color)Sets the font color of sorted head cells
--zg-head-cell-color_sorted_hovervar(--zg-head-cell-color_sorted, var(--zg-head-cell-color))Sets the font color of sorted head cells on hover
--zg-head-cell-font-familyBrowser's default valueSets the font family of head cells
--zg-head-cell-font-sizeBrowser's default valueSets the font size of head cells
--zg-head-cell-font-weightBrowser's default valueSets the font weight of head cells
--zg-head-cell-icon-color_sortedvar(--theme-color)Sets the fill color of icon in sorted head cells
--zg-head-cell-icon-marginBrowser's default valueSets the margin of child icons in head cells
--zg-head-cell-icon-marginBrowser's default valueSets the margin of child icons in head cells
--zg-head-cell-justify-contentBrowser's default valueSets the horizontal alignment of contents in head cells
--zg-head-cell-paddingBrowser's default valueSets the padding of head cells
--zg-head-cell-parent-backgroundvar(--zg-head-cell-background)Styles the background of parent head cells
--zg-head-cell-parent-background_hovervar(--zg-head-cell-background_hover)Styles the background of parent head cells on hover
--zg-head-cell-parent-bordervar(--zg-head-cell-border-bottom, var(--zg-head-cell-border, 1px solid var(--theme-border-color)))Styles the border of parent head cells
--zg-head-cell-parent-border-bottomvar(--zg-head-cell-parent-border, var(--zg-head-cell-border-bottom, var(--zg-head-cell-border, 1px solid var(--theme-border-color))))Styles the bottom border of parent head cells
--zg-head-cell-parent-border-leftvar(--zg-head-cell-parent-border, var(--zg-head-cell-border-left, var(--zg-head-cell-border)))Styles the left border of parent head cells
--zg-head-cell-parent-border-rightvar(--zg-head-cell-parent-border, var(--zg-head-cell-border-right, var(--zg-head-cell-border)))Styles the right border of parent head cells
--zg-head-cell-parent-border-topvar(--zg-head-cell-parent-border, var(--zg-head-cell-border-top, var(--zg-head-cell-border)))Styles the top border of parent head cells
--zg-head-cell-parent-colorvar(--zg-head-cell-color)Sets the font color of parent head cells
--zg-head-cell-parent-color_hovervar(--zg-head-cell-color_hover, var(--zg-head-cell-color))Sets the font color of parent head cells on hover
--zg-head-cell-parent-font-sizevar(--zg-head-cell-font-size)Sets the font-size of parent head cells
--zg-head-cell-parent-font-weightvar(--zg-h -cell-font-weight)Sets the font weight of parent head cells
--zg-head-cell-parent-paddingvar(--zg-head-cell-padding)Sets the padding of parent head cells
--zg-head-cell-transitionBrowser's default valueSets the transition of head cells

CSS Selector

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

zg-head-cell {
  background: red;
}