--- title: "Row Grouping | Feature" description: "ZingGrid had the ability to group rows." url: https://www.zinggrid.com/docs/features/row-grouping --- ```text experiment_id: web-retrieval-v1 fixture_id: /docs/features/row-grouping.md mode: provenance representation: markdown origin_response_id: ad8842906efbe83c5c8505050458b288 version: 2026-10-21 version_created_at_utc: 2026-10-21T20:42:35.701Z version_nonce: b970b762348443ca0ff62e17733fc260 generated_at_utc: 2026-10-24T01:36:14.575Z response_nonce: 731ea25acbc10a23345bc35b7c3a6db3 ``` # 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 `` tag (see below). Specify a column index (or indices) to specify which fields to group by. ```html ``` [Example code](https://app.zingsoft.com/demos/embed/LUNDRSXW) ## 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 ``, 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 ``. ```html ... ``` [Example code](https://app.zingsoft.com/demos/embed/SBQXB3FA) ## 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 ``. > **Warning:** 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. ```html

... ``` [Example code](https://app.zingsoft.com/demos/embed/1V86Y3OC) ## Sub-Group Headers The head cell of a column in a grouped row can be set display an aggregate value by setting the `[groupHeadCell]` attribute on ``. Check out available methods in [Aggregate Methods](https://www.zinggrid.com/docs/features/aggregation#aggregate-methods) section. > **Warning:** Note that `[groupHeadCell]` accepts a custom function to display a value in the group head cell. The default arguments to the custom function are: > - `rowGroup` - Row group information > - `groupCell` - Data on rows within row group (use to calculate aggregate value) > - `record` - info related to the row ```html

``` [Example code](https://app.zingsoft.com/demos/embed/QF7D4W6G) ## Hide Count To hide the row count in the row-group column, set the `type-group-hide-count` to "disabled". ```html

... ``` [Example code](https://app.zingsoft.com/demos/embed/VKCXNCU6) ## Tokens In order to customize the cell contents of the row-group column, use a renderer or template. Here is a list of group-related tokens to utilize: - name: group name - count: row count of the group - plural: word chosen depending on the row count To set the value of the "plural" token, use `type-group-plural`. The attribute accepts a comma-separated string (ex. "single,plural"). ```html [[group.name]] -- [[group.count]] [[group.plural]] ... ``` [Example code](https://app.zingsoft.com/demos/embed/99NOEJ3E) ## 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. ```js const zgRef =document.querySelector('zing-grid'); zgRef.setGroupBy('season,episode'); console.log(zgRef.getGroupBy()); // 'season,episode' ``` [Example code](https://app.zingsoft.com/demos/embed/2P7Z2IDW)