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

```text
experiment_id: web-retrieval-v1
fixture_id: /docs/api/tags/zg-colgroup.md
mode: provenance
representation: markdown
origin_response_id: b03a7797463c47f2b0193c9cbd9d79d5
version: 2026-10-21
version_created_at_utc: 2026-10-21T20:42:35.623Z
version_nonce: 5a617296e55c8a39dd12b8c9b37c1a2f
generated_at_utc: 2026-10-24T01:34:29.442Z
response_nonce: badd0fa13bb57c5855ae51dd15963d55
```

# `<zg-colgroup>`

The `<zg-colgroup>` tag is a web component that is a wrapper for `<zg-column>`(s) web components. **As a non-visual element, you should not apply styles to this tag**.

![Image of the DOM relationship for the zg-colgroup web component tag](https://storage.googleapis.com/zinggrid-pwa.appspot.com/components/v2/zg-colgroup-web-component-dom.png "Image of the DOM relationship for the zg-colgroup web component tag")

| Component | Relationship | Type | Ancestor |
| --- | --- | --- | --- |
| [ZingGrid](https://www.zinggrid.com/docs/api/tags/zing-grid) | Parent | Generated, Manual | n/a |
| [ZGColumn](https://www.zinggrid.com/docs/api/tags/zg-column) | Child | Generated, Manual | n/a |

#### Related Web Components

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

## Usage

Developers should always add the `<zg-colgroup>` tag, but for user simplicity, the grid will implicitly wrap your `<zg-column>` tags in a `<zg-colgroup>` tag if you do not define one.

```html
<zing-grid src="https://cdn.zinggrid.com/datasets/user-roles.json">
  <zg-column index="name"></zg-column>
  <zg-column index="job"></zg-column>
</zing-grid>
```

If you want to shave off a couple milliseconds in parse time, you can explicitly wrap your component in a `<zg-colgroup>` tag.

```html
<zing-grid src="https://cdn.zinggrid.com/datasets/user-roles.json">
  <zg-colgroup>
    <zg-column index="name"></zg-column>
    <zg-column index="job"></zg-column>
  </zg-colgroup>
</zing-grid>
```

## Attributes

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

## CSS Variables

There are no CSS variables available for the `<zg-colgroup>` web component.

## CSS Selector

As a non-visual element, you should not apply styles to this tag.

## Slots

`<zg-colgroup>` contains placeholders to allow adding markup inside the component.

```html
<zg-colgroup><zg-column></zg-column></zg-colgroup>
```

Below is a list of all the associated ZGColgroup slots. Check out the [full list of slots](https://www.zinggrid.com/docs/api/styling/css-shadow-parts).

| Name | Description |
| --- | --- |
| (default) | Colgroup content that only accepts columns (ZGColumns). |