Docs

<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

ZGColgroup Relationships
Component Relationship Type Ancestor
ZingGrid Parent Generated, Manual n/a
ZGColumn Child Generated, Manual n/a

Related Web Components

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.

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

<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>
Top

Attributes

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

Top

CSS Variables

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

Top

CSS Selector

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

Top

Slots

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

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

ZGColgroup Slots
Name Description Demo
Colgroup content that only accepts columns (ZGColumns).
Top

[api: <zg-colgroup>]