---
title: "ZingGrid Web Component: `<zg-head-cell>` | Docs"
description: "View our in depth tutorial covering the web component `<zg-head-cell>` tag and the associated features for the JavaScript grid."
url: https://www.zinggrid.com/docs/api/tags/zg-head-cell
---

```text
experiment_id: web-retrieval-v1
fixture_id: /docs/api/tags/zg-head-cell.md
mode: provenance
representation: markdown
origin_response_id: 16b9023d7eb81c4c6074ad1c73551a3d
version: 2026-10-21
version_created_at_utc: 2026-10-21T20:42:35.635Z
version_nonce: e4ceb87f0300b92f619d9d08d5ec907f
generated_at_utc: 2026-11-08T23:36:17.817Z
response_nonce: 6622ec9f94b0dfc887075ab9bbb6b0f2
```

# `<zg-head-cell>`

[Interactive Storybook Playground](https://storybook.zinggrid.com/?path=/docs/components-zg-head-cell--docs)

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](https://storage.googleapis.com/zinggrid-pwa.appspot.com/components/v2/zg-head-cell-web-component-dom.png "Image of the DOM relationship for the zg-head-cell web component tag")

| Component | Relationship | Type | Ancestor |
| --- | --- | --- | --- |
| [ZGRow](https://www.zinggrid.com/docs/api/tags/zg-row) | Parent | Generated | [ZGHead](https://www.zinggrid.com/docs/api/tags/zg-head) |
| [ZGButton](https://www.zinggrid.com/docs/api/tags/zg-button) | Child | Generated | n/a |
| [ZGCheckbox](https://www.zinggrid.com/docs/api/tags/zg-checkbox) | Child | Generated | n/a |
| [ZGColumnResize](https://www.zinggrid.com/docs/api/tags/zg-column-resize) | Child | Generated | n/a |
| [ZGIcon](https://www.zinggrid.com/docs/api/tags/zg-icon) | Child | Generated | n/a |

#### Related Web Components

- [`<zg-head>`](https://www.zinggrid.com/docs/api/tags/zg-head/)
- [`<zg-column>`](https://www.zinggrid.com/docs/api/tags/zg-column/)
- [`<zg-row>`](https://www.zinggrid.com/docs/api/tags/zg-row/)

## Attributes

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

## CSS Variables
`<zg-head-cell>` can be styled with CSS variables, like so:

```css
: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](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-cell-background` | transparent | Styles the background of head cells | [Example code](https://app.zingsoft.com/demos/embed/5217Z4FJ) |
| `--zg-head-cell-background_hover` | var(--zg-head-cell-background | Styles the background of head cells on hover | [Example code](https://app.zingsoft.com/demos/embed/I05OFWBJ) |
| `--zg-head-cell-background_sorted` | inherit | Styles the background of sorted head cells | [Example code](https://app.zingsoft.com/demos/embed/F7W6O5Y8) |
| `--zg-head-cell-background_sorted_hover` | var(--zg-head-cell-background_sorted, inherit) | Styles the background of sorted head cells on hover | [Example code](https://app.zingsoft.com/demos/embed/A4RMGO6M) |
| `--zg-head-cell-border` | 0 | Styles the border of head cells | [Example code](https://app.zingsoft.com/demos/embed/SX3TZT8V) |
| `--zg-head-cell-border_sorted` | 0 | Styles the border of sorted head cells | [Example code](https://app.zingsoft.com/demos/embed/NJHYC5BT) |
| `--zg-head-cell-border-bottom` | var(--zg-head-cell-border, 0) | Styles the bottom border of head cells | [Example code](https://app.zingsoft.com/demos/embed/DGH901RE) |
| `--zg-head-cell-border-bottom_sorted` | var(--zg-head-cell-border_sorted, 0) | Styles the bottom border of sorted head cells | [Example code](https://app.zingsoft.com/demos/embed/7J8IXN3Q) |
| `--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 | [Example code](https://app.zingsoft.com/demos/embed/9NEF2EKA) |
| `--zg-head-cell-border-left` | var(--zg-head-cell-border, 0) | Styles the left border of head cells | [Example code](https://app.zingsoft.com/demos/embed/YCA4IWR7) |
| `--zg-head-cell-border-left_sorted` | var(--zg-head-cell-border_sorted, 0) | Styles the left border of sorted head cells | [Example code](https://app.zingsoft.com/demos/embed/86HPGI9W) |
| `--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 | [Example code](https://app.zingsoft.com/demos/embed/U7Q6173N) |
| `--zg-head-cell-border-right` | var(--zg-head-cell-border, 0) | Styles the right border of head cells | [Example code](https://app.zingsoft.com/demos/embed/04L65K0J) |
| `--zg-head-cell-border-right_sorted` | var(--zg-head-cell-border_sorted, 0) | Styles the right border of sorted head cells | [Example code](https://app.zingsoft.com/demos/embed/PUMKY3AA) |
| `--zg-head-cell-border-top` | var(--zg-head-cell-border, 0) | Styles the top border of head cells | [Example code](https://app.zingsoft.com/demos/embed/8M5QYK55) |
| `--zg-head-cell-border-top_sorted` | var(--zg-head-cell-border_sorted, 0) | Styles the top border of sorted head cells | [Example code](https://app.zingsoft.com/demos/embed/CGQ6DGYI) |
| `--zg-head-cell-color` | Browser's default value | Sets the font color of head cells | [Example code](https://app.zingsoft.com/demos/embed/MOTKNFI7) |
| `--zg-head-cell-color_hover` | var(--zg-head-cell-color) | Sets the font color of head cells on hover | [Example code](https://app.zingsoft.com/demos/embed/ICS004MX) |
| `--zg-head-cell-color_sorted` | var(--zg-head-cell-color) | Sets the font color of sorted head cells | [Example code](https://app.zingsoft.com/demos/embed/XZEPKE31) |
| `--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 | [Example code](https://app.zingsoft.com/demos/embed/FKHQA0MI) |
| `--zg-head-cell-font-family` | Browser's default value | Sets the font family of head cells | [Example code](https://app.zingsoft.com/demos/embed/O1EIWZE1) |
| `--zg-head-cell-font-size` | Browser's default value | Sets the font size of head cells | [Example code](https://app.zingsoft.com/demos/embed/UWQF6LZV) |
| `--zg-head-cell-font-weight` | Browser's default value | Sets the font weight of head cells | [Example code](https://app.zingsoft.com/demos/embed/2LOCXCAB) |
| `--zg-head-cell-icon-color_sorted` | var(--theme-color) | Sets the fill color of icon in sorted head cells | [Example code](https://app.zingsoft.com/demos/embed/I4QTA64O) |
| `--zg-head-cell-icon-margin` | Browser's default value | Sets the margin of child icons in head cells | [Example code](https://app.zingsoft.com/demos/embed/GGPPE0Q1) |
| `--zg-head-cell-inner-padding` | Browser's default value | Sets the padding of head cells inner content | [Example code](https://app.zingsoft.com/demos/embed/KW2O5OZH) |
| `--zg-head-cell-justify-content` | Browser's default value | Sets the horizontal alignment of contents in head cells | [Example code](https://app.zingsoft.com/demos/embed/M1I5BGRD) |
| `--zg-head-cell-padding` | Browser's default value | Sets the padding of head cells | [Example code](https://app.zingsoft.com/demos/embed/YEEKXD9Z) |
| `--zg-head-cell-parent-background` | var(--zg-head-cell-background) | Styles the background of parent head cells | [Example code](https://app.zingsoft.com/demos/embed/34TZMCUN) |
| `--zg-head-cell-parent-background_hover` | var(--zg-head-cell-background_hover) | Styles the background of parent head cells on hover | [Example code](https://app.zingsoft.com/demos/embed/Y16SOZ0Y) |
| `--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 | [Example code](https://app.zingsoft.com/demos/embed/J34P5J1C) |
| `--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 | [Example code](https://app.zingsoft.com/demos/embed/B0M2Q9JO) |
| `--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 | [Example code](https://app.zingsoft.com/demos/embed/8HS4D09Y) |
| `--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 | [Example code](https://app.zingsoft.com/demos/embed/J0AQFH0Z) |
| `--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 | [Example code](https://app.zingsoft.com/demos/embed/ECL23JR1) |
| `--zg-head-cell-parent-color` | var(--zg-head-cell-color) | Sets the font color of parent head cells | [Example code](https://app.zingsoft.com/demos/embed/0Z3W1AR3) |
| `--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 | [Example code](https://app.zingsoft.com/demos/embed/YSGAZGLF) |
| `--zg-head-cell-parent-font-size` | var(--zg-head-cell-font-size) | Sets the font-size of parent head cells | [Example code](https://app.zingsoft.com/demos/embed/8BVKTKQO) |
| `--zg-head-cell-parent-font-weight` | var(--zg-h -cell-font-weight) | Sets the font weight of parent head cells | [Example code](https://app.zingsoft.com/demos/embed/T658V69Y) |
| `--zg-head-cell-parent-padding` | var(--zg-head-cell-padding) | Sets the padding of parent head cells | [Example code](https://app.zingsoft.com/demos/embed/JAH3NI1F) |
| `--zg-head-cell-transition` | Browser's default value | Sets the transition of head cells | [Example code](https://app.zingsoft.com/demos/embed/5VYSMZ3T) |

## CSS Selector

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

```css
zg-head-cell {
  background: red;
}
```

## CSS Shadow Parts

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

```css
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](https://www.zinggrid.com/docs/api/styling/css-shadow-parts) or our [Styling Basics guide](https://www.zinggrid.com/docs/getting-started/styling-basics/) to learn more about styling the grid.

| Name | Description |
| --- | --- |
| `cell` | The head-cell container |
| `cell-inner` | The content container |

## Slots

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