--- title: "ZingGrid Web Component: `` | Docs" description: "View our in depth tutorial covering the web component `` tag and the associated features for the JavaScript grid." url: https://www.zinggrid.com/docs/v1/api/tags/zg-head --- ```text experiment_id: web-retrieval-v1 fixture_id: /docs/v1/api/tags/zg-head.md mode: provenance representation: markdown origin_response_id: acdcc3be8b45fe5f8f6025f458e09019 version: 2026-10-21 version_created_at_utc: 2026-10-21T20:42:35.766Z version_nonce: ef919dacf486014cd0f00c524d4f4aff generated_at_utc: 2026-10-31T01:14:02.714Z response_nonce: 22196c55593a6f405d31109ae5cbc6c2 ``` # `` Version 1 [Interactive Storybook Playground](https://storybook.zinggrid.com/?path=/docs/zg-head--docs) The `` tag is a web component that is a container for the head cells (``) of the data grid specified via the `head-cell` attribute found on `` tags. The tag roughly corresponds to the idea of the `` tag used in HTML tables. The `` 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 web component tag](https://storage.googleapis.com/zinggrid-pwa.appspot.com/components/zg-head-web-component-dom.png "Image of the DOM relationship for the zg-head web component tag") | Component | Relationship | Type | Ancestor | | --- | --- | --- | --- | | [ZingGrid](https://www.zinggrid.com/docs/api/tags/zing-grid) | Parent | Generated | n/a | | [ZGRow](https://www.zinggrid.com/docs/api/tags/zg-row) | Child | Generated | n/a | #### Related Web Components - [``](https://www.zinggrid.com/docs/api/tags/zg-head-cell/) - [``](https://www.zinggrid.com/docs/api/tags/zg-column/) - [``](https://www.zinggrid.com/docs/api/tags/zg-filter/) - [``](https://www.zinggrid.com/docs/api/tags/zg-row/) ## Usage The `` element is a generated element added to ``. ```html ``` ## Attributes There are no attributes available for the `` web component. ## CSS Variables `` can be styled with CSS variables, like so: ```css :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](https://www.zinggrid.com/docs/api/css-variables/reference/) or our [Styling Basics guide](https://www.zinggrid.com/docs/getting-started/styling-basics/) to learn more about styling the grid. | Name | Default | Description | Demo | | --- | --- | --- | --- | | `--zg-head-background` | Browser's default value | Styles the background of grid head rows | [Example code](https://app.zingsoft.com/demos/embed/CO1P3ZJI) | | `--zg-head-border` | 1px solid var(--theme-border-color) | Styles the border of grid head rows | [Example code](https://app.zingsoft.com/demos/embed/12I3VYOI) | | `--zg-head-border-bottom` | var(--zg-head-border, 1px solid var(--theme-border-color)) | Styles the bottom border of grid head rows | [Example code](https://app.zingsoft.com/demos/embed/4G7I1G9M) | | `--zg-head-border-left` | var(--zg-head-border, 0) | Styles the left border of grid head rows | [Example code](https://app.zingsoft.com/demos/embed/CM2MSBIS) | | `--zg-head-border-radius` | var(--zg-head-border-radius) | Styles the border-radius of grid head rows | [Example code](https://app.zingsoft.com/demos/embed/Y25A4K13) | | `--zg-head-border-right` | var(--zg-head-border, 0) | Styles the right border of grid head rows | [Example code](https://app.zingsoft.com/demos/embed/89L6VL2X) | | `--zg-head-border-top` | var(--zg-head-border) | Styles the top border of grid head rows | [Example code](https://app.zingsoft.com/demos/embed/Y25A4K13) | | `--zg-head-visibility` | Browser's default value | Sets the visibility of grid head rows | [Example code](https://app.zingsoft.com/demos/embed/6LA6GMQ7) | | `--zg-row-head-background` | var(--zg-head-background) | Styles the background of grid head rows | [Example code](https://app.zingsoft.com/demos/embed/T8UI8JED) | | `--zg-row-head-background_even` | var(--zg-row-head-background, var(--zg-head-background)) | Styles the background of 'even' grid head rows | [Example code](https://app.zingsoft.com/demos/embed/SFSLBH2B) | | `--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 | [Example code](https://app.zingsoft.com/demos/embed/NTNFHUQO) | | `--zg-row-head-background_hover` | Browser's default value | Styles the background of grid head rows on hover | [Example code](https://app.zingsoft.com/demos/embed/WEG2YAI2) | | `--zg-row-head-background_odd` | var(--zg-row-head-background, var(--zg-head-background)) | Styles the background of 'odd' grid head rows | [Example code](https://app.zingsoft.com/demos/embed/P3C6STNW) | | `--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 | [Example code](https://app.zingsoft.com/demos/embed/V416TJNV) | | `--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 | [Example code](https://app.zingsoft.com/demos/embed/8GTM3CE7) | | `--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 | [Example code](https://app.zingsoft.com/demos/embed/UG4IJY7N) | | `--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 | [Example code](https://app.zingsoft.com/demos/embed/FN1JN1YH) | | `--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 | [Example code](https://app.zingsoft.com/demos/embed/B52RNC1C) | | `--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 | [Example code](https://app.zingsoft.com/demos/embed/9WUUNY7A) | | `--zg-row-head-color` | var(--zg-row-color) | Styles the font color of grid head rows | [Example code](https://app.zingsoft.com/demos/embed/XNSFRPXK) | | `--zg-row-head-color_even` | var(--zg-row-head-color, var(--zg-row-color)) | Styles the font color of 'even' grid head rows | [Example code](https://app.zingsoft.com/demos/embed/MVTLQ6OY) | | `--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 | [Example code](https://app.zingsoft.com/demos/embed/R7N097DV) | | `--zg-row-head-color_hover` | var(--zg-row-color_hover) | Styles the font color of grid head rows on hover | [Example code](https://app.zingsoft.com/demos/embed/AB7QQ2HJ) | | `--zg-row-head-color_odd` | var(--zg-row-head-color, var(--zg-row-color)) | Sets the font color of 'odd' grid head rows | [Example code](https://app.zingsoft.com/demos/embed/ORCFAHM5) | | `--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 | [Example code](https://app.zingsoft.com/demos/embed/CFKT71C3) | | `--zg-row-head-height_even` | var(--zg-row-head-height, var(--zg-row-height)) | Sets the height of 'even' grid head rows | [Example code](https://app.zingsoft.com/demos/embed/ZJKCHBEN) | | `--zg-row-head-height_odd` | var(--zg-row-head-height, var(--zg-row-height)) | Sets the height of 'odd' grid head rows | [Example code](https://app.zingsoft.com/demos/embed/HR7CPKI6) | ## CSS Selector `` can be styled by common CSS selectors, like so: ```css zg-head { background: red; } ``` ## Slots There are no slots available for the `` web component.