• Getting Started

  • Data

  • Chart Types

  • Chart Elements

  • Integrations

  • API

  • Tools

  • FAQ

  • Change Log

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

    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>
    

    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.

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