<zg-head-cell>

Interactive Storybook Playground

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

ZGHeadCell Relationships
Component Relationship Type Ancestor
ZGRow Parent Generated ZGHead
ZGButton Child Generated n/a
ZGCheckbox Child Generated n/a
ZGColumnResize Child Generated n/a
ZGIcon Child Generated n/a

Related Web Components

Attributes

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

Top

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
Name Default Description Demo CSS Ref
--zg-head-cell-background transparent Styles the background of head cells
--zg-head-cell-background_hover var(--zg-head-cell-background Styles the background of head cells on hover
--zg-head-cell-background_sorted inherit Styles the background of sorted head cells
--zg-head-cell-background_sorted_hover var(--zg-head-cell-background_sorted, inherit) Styles the background of sorted head cells on hover
--zg-head-cell-border 0 Styles the border of head cells
--zg-head-cell-border-bottom var(--zg-head-cell-border, 0) Styles the bottom border of head cells
--zg-head-cell-border-bottom_sorted var(--zg-head-cell-border_sorted, 0) Styles the bottom border of sorted head cells
--zg-head-cell-border-bottom_sorted_hover var(--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-left var(--zg-head-cell-border, 0) Styles the left border of head cells
--zg-head-cell-border-left_sorted var(--zg-head-cell-border_sorted, 0) Styles the left border of sorted head cells
--zg-head-cell-border-left_sorted_hover var(--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-right var(--zg-head-cell-border, 0) Styles the right border of head cells
--zg-head-cell-border-right_sorted var(--zg-head-cell-border_sorted, 0) Styles the right border of sorted head cells
--zg-head-cell-border-top var(--zg-head-cell-border, 0) Styles the top border of head cells
--zg-head-cell-border-top_sorted var(--zg-head-cell-border_sorted, 0) Styles the top border of sorted head cells
--zg-head-cell-border-top_sorted var(--zg-head-cell-border_sorted, 0) Styles the top border of sorted head cells
--zg-head-cell-border_sorted 0 Styles the border of sorted head cells
--zg-head-cell-color Browser's default value Sets the font color of head cells
--zg-head-cell-color_hover var(--zg-head-cell-color) Sets the font color of head cells on hover
--zg-head-cell-color_sorted var(--zg-head-cell-color) Sets the font color of sorted head cells
--zg-head-cell-color_sorted_hover var(--zg-head-cell-color_sorted, var(--zg-head-cell-color)) Sets the font color of sorted head cells on hover
--zg-head-cell-font-family Browser's default value Sets the font family of head cells
--zg-head-cell-font-size Browser's default value Sets the font size of head cells
--zg-head-cell-font-weight Browser's default value Sets the font weight of head cells
--zg-head-cell-icon-color_sorted var(--theme-color) Sets the fill color of icon in sorted head cells
--zg-head-cell-icon-margin Browser's default value Sets the margin of child icons in head cells
--zg-head-cell-inner-padding Browser's default value Sets the padding of head cells inner content
--zg-head-cell-justify-content Browser's default value Sets the horizontal alignment of contents in head cells
--zg-head-cell-padding Browser's default value Sets the padding of head cells
--zg-head-cell-parent-background var(--zg-head-cell-background) Styles the background of parent head cells
--zg-head-cell-parent-background_hover var(--zg-head-cell-background_hover) Styles the background of parent head cells on hover
--zg-head-cell-parent-border var(--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-bottom var(--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-left var(--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-right var(--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-top var(--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-color var(--zg-head-cell-color) Sets the font color of parent head cells
--zg-head-cell-parent-color_hover var(--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-size var(--zg-head-cell-font-size) Sets the font-size of parent head cells
--zg-head-cell-parent-font-weight var(--zg-h -cell-font-weight) Sets the font weight of parent head cells
--zg-head-cell-parent-padding var(--zg-head-cell-padding) Sets the padding of parent head cells
--zg-head-cell-transition Browser's default value Sets the transition of head cells
Top

CSS Selector

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

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

CSS Shadow Parts

<zg-head-cell> exposed elements within the shadow can be styled by CSS shadow parts, like so:

zg-head-cell::part(cell) {
  background-color: red;
}

Below is a list of all the associated ZGHeadCell shadow parts. Check out the full list of CSS shadow parts or our Styling Basics guide to learn more about styling the grid.

ZGHeadCell CSS Shadow Parts
Name Description
cell The head-cell container
cell-inner The content container
Top

Slots

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

Top

[api: <zg-head-cell>]