<zg-head>
Interactive Storybook Playground
The <zg-head> tag is a web component that is a container for 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. Instead, it is used as a styling target for CSS.
| Component | Relationship | Type | Ancestor |
|---|---|---|---|
| ZingGrid | Parent | Generated | n/a |
| ZGRow | Child | Generated | n/a |
Related Web Components
Usage
The <zg-head> element is a generated element added to <zing-grid>.
<zing-grid src="https://cdn.zinggrid.com/datasets/user-roles.json"> </zing-grid>
Top
Attributes
There are no attributes available for the <zg-head> web component.
Top
CSS Variables
<zg-head> can be styled with CSS variables, like so:
:root { --zg-head-background: red; }
Below is a list of all the associated --zg-head 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-background | Browser's default value | Styles the background of grid head rows | ||
| --zg-head-border | 1px solid var(--theme-border-color) | Styles the border of grid head rows | ||
| --zg-head-border-bottom | var(--zg-head-border, 1px solid var(--theme-border-color)) | Styles the bottom border of grid head rows | ||
| --zg-head-border-left | var(--zg-head-border, 0) | Styles the left border of grid head rows | ||
| --zg-head-border-radius | var(--zg-head-border-radius) | Styles the border-radius of grid head rows | ||
| --zg-head-border-right | var(--zg-head-border, 0) | Styles the right border of grid head rows | ||
| --zg-head-border-top | var(--zg-head-border) | Styles the top border of grid head rows | ||
| --zg-head-visibility | Browser's default value | Sets the visibility of grid head rows | ||
| --zg-row-head-background | var(--zg-head-background) | Styles the background of grid head rows | ||
| --zg-row-head-background_even | var(--zg-row-head-background, var(--zg-head-background)) | Styles the background of 'even' grid head rows | ||
| --zg-row-head-background_even_hover | var(--zg-row-head-background_hover, var(--zg-head-background_hover)) | Styles the background of 'even' grid head rows on hover | ||
| --zg-row-head-background_hover | Browser's default value | Styles the background of grid head rows on hover | ||
| --zg-row-head-background_odd | var(--zg-row-head-background, var(--zg-head-background)) | Styles the background of 'odd' grid head rows | ||
| --zg-row-head-background_odd_hover | var(--zg-row-head-background_hover, var(--zg-head-background_hover)) | Styles the background of 'odd' grid head rows on hover | ||
| --zg-row-head-border | var(--zg-row-border-bottom, var(--zg-row-border, var(--zg-row-border, 0))) | Styles the border of grid head rows | ||
| --zg-row-head-border-bottom | var(--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-left | var(--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-right | var(--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-top | var(--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-color | var(--zg-row-color) | Styles the font color of grid head rows | ||
| --zg-row-head-color_even | var(--zg-row-head-color, var(--zg-row-color)) | Styles the font color of 'even' grid head rows | ||
| --zg-row-head-color_even_hover | var(--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_hover | var(--zg-row-color_hover) | Styles the font color of grid head rows on hover | ||
| --zg-row-head-color_odd | var(--zg-row-head-color, var(--zg-row-color)) | Sets the font color of 'odd' grid head rows | ||
| --zg-row-head-color_odd_hover | var(--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_even | var(--zg-row-head-height, var(--zg-row-height)) | Sets the height of 'even' grid head rows | ||
| --zg-row-head-height_odd | var(--zg-row-head-height, var(--zg-row-height)) | Sets the height of 'odd' grid head rows |
Top
CSS Selector
<zg-head> can be styled by common CSS selectors, like so:
zg-head { background: red; }
Top
Slots
There are no slots available for the <zg-head> web component.
Top
[api: <zg-head>]