Row Grouping

ZingGrid has the ability to group rows. Enable this feature by adding the groupBy attribute to your grid and specifying which field(s) to group rows in.

Default Row Group Settings

Easily enable row grouping by setting the groupBy attribute on the <zing-grid> tag (see below). Specify a column index (or indices) to specify which fields to group by.

<zing-grid group-by="season,episode"></zing-grid>

Row Group Type

The row group column type can either be used to reference an existing row group column or to add it.

To add a row group column with &lt;zg-column&gt;, set the column type to "row-group" and specify the columns with index.

To reference an existing row group column added by ZingGrid[groupBy], only set the type attribute to "row-group" on &lt;zg-column&gt;.

<zg-colgroup>
  <zg-column type="row-group" index="season,episode"></zg-column>
  ...
</zg-colgroup>

Dynamically Grouping

If you intend to dynamically update which indices are included in row grouping, use the group attribute. Just add or remove the attribute from &lt;zg-column&gt;.

Note that if ZGColumn has the group attribute, all other attributes are ignored. The reasoning behind this is that the column is essentially hidden. Enable features by setting attributes on the [type="row-group"] column that references it.

<zg-colgroup>
  <zg-column type="row-group"></zg-column>
  <zg-column index="season" group></zg-column>
  <zg-column index="episode" group></zg-column>
  ...
</zg-colgroup>

External Input (get/set)

You can use an external input through the API method setGroupBy('...') (see below) to dynamically enable row grouping.

The getGroupBy() API method will return which indices have row grouping enabled.

const zgRef =document.querySelector('zing-grid');
zgRef.setGroupBy('season,episode');

console.log(zgRef.getGroupBy()); // 'season,episode'

[features: row grouping]