zg-head-cell

The <zg-head-cell> is a web component that is a container for the 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, but instead 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 variables available for the <zg-head-cell> web component.

CSS Variables

All the associated --zg-head-cell 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-cell-background: red;
}
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-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.

zg-head-cell {
  background: red;
}