# GroupingRowsConfig

> _Since v0.1.1_

Configuration options for the row grouping plugin *

## Properties

| Property | Type | Description |
| -------- | ---- | ----------- |
| `groupOn?` | <code>(row: any) =&gt; any</code> | Callback to determine group path for a row. Return an array of group keys, a single key, null/false to skip grouping. |
| `groups?` | <code><a href="/grid/plugins/grouping-rows/interfaces/groupdefinition/">GroupDefinition</a>[]</code> | Pre-defined group structure for server-side grouping. |
| `defaultExpanded?` | <code><a href="/grid/plugins/grouping-rows/types/defaultexpandedvalue/">DefaultExpandedValue</a></code> | Default expanded state for group rows. - `true`: Expand all groups initially - `false`: Collapse all groups initially (default) - `number`: Expand group at this index (0-based) - `string`: Expand group with this key (composite key format: "parent||child") - `string[]`: Expand groups with these keys |
| `groupRowRenderer?` | <code>(params: <a href="/grid/plugins/grouping-rows/interfaces/grouprowrenderparams/">GroupRowRenderParams</a>) =&gt; string &#124; void &#124; HTMLElement</code> | Custom group row renderer - takes full control of group row rendering |
| `showRowCount?` | <code>boolean</code> | Show row count in group headers (default: true) |
| `indentWidth?` | <code>number</code> | Indent width per depth level in pixels (default: 20) |
| `aggregators?` | <code><a href="/grid/plugins/grouping-rows/types/aggregatormap/">AggregatorMap</a></code> | Aggregators for group row cells by field name |
| `formatLabel?` | <code>(value: any, depth: number, key: string) =&gt; string</code> | Custom format function for group label |
| `fullWidth?` | <code>boolean</code> | Whether to render group row as full-width spanning cell (default: true) |
| `animation?` | <code><a href="/grid/api/core/types/expandcollapseanimation/">ExpandCollapseAnimation</a></code> | Animation style for expanding/collapsing groups. - `false`: No animation - `'slide'`: Slide animation (default) - `'fade'`: Fade animation |
| `accordion?` | <code>boolean</code> | Accordion mode - only one group can be expanded at a time. Expanding a group will automatically collapse all other groups at the same depth. |
| `groupRowHeight?` | <code>number</code> | Height of group header rows in pixels. Used by the variable row height system to provide consistent heights for group rows without needing to measure them. |

### Property Details

#### groups

Pre-defined group structure for server-side grouping.

When provided, the plugin renders these groups as collapsible headers
instead of analyzing row data with `groupOn`.

When combined with `ServerSidePlugin`, group definitions are delivered
automatically via `datasource:data` events and this config is not needed.

```typescript
new GroupingRowsPlugin({
  groups: [
    { key: 'Engineering', value: 'Engineering', rowCount: 150 },
    { key: 'Sales', value: 'Sales', rowCount: 89 },
  ],
});
```

---

#### defaultExpanded

**Default:** `false`

---

#### animation

**Default:** `'slide'`

---

#### accordion

**Default:** `false`

---

#### groupRowHeight

Height of group header rows in pixels.
Used by the variable row height system to provide consistent heights
for group rows without needing to measure them.

If not specified, group rows will be measured from the DOM like data rows.
Setting this improves performance by avoiding DOM measurements.

```ts
new GroupingRowsPlugin({
  groupOn: (row) => [row.department],
  groupRowHeight: 36, // Group headers are 36px tall
})
```

---