<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.
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.
| 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.
| 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>]