Docs

Expandable Content

Slot your own markup templating directly into <zg-column> instances to set up your content for toggling. Then, use CSS and/or JavaScript to execute it.

Note: This is not a built-in process and you will need to create the functionality yourself. This merely illustrates <zg-column>'s flexibility.

Expandable Rows

You can use slotted content to build an expandable row, like so:

<zg-column type="custom" header="2016 FA Cup Details">
  <div class="header">
    ...
  </div>
  <div class="expandable">
    <p><strong>Rank:</strong> [[record.FIFA ranking]]</p>
    <p><strong>Coach:</strong> [[record.Coach]]</p>
    <p><strong>Bio:</strong> [[record.Bio]]</p>
  </div>
</zg-column>

Expandable Row Grid

Here is a complete grid with rows that can be expanded to display more data:

Top

Columns

You can use slotted content to build an expandable column, like so:

<zg-column index="Coach, Bio" header="Coach Info" renderer="_bindAccordion">
  <template>
    <section class="accordion">
      <input type="checkbox" id="changeme" >
      <label for="changeme">[[index.Coach]]</label>
      <article>
        <p class="coachBio">[[index.Bio]]</p>
      </article>
    </section>
  </template>
</zg-column>

Expandable Columns Grid

Here is a complete grid with columns that can be expanded to display more data:

Top

Related Resources

Here are some extra resources related to this feature to help with creating your grid:

[features: expandable content]