# GroupingColumnsConfig

> _Since v0.1.1_

Configuration options for the column groups plugin *

## Properties

| Property | Type | Description |
| -------- | ---- | ----------- |
| `columnGroups?` | <code><a href="/grid/plugins/grouping-columns/interfaces/columngroupdefinition/">ColumnGroupDefinition</a>[]</code> | Declarative column group definitions. When provided here, takes precedence over `gridConfig.columnGroups`. |
| `groupHeaderRenderer?` | <code>(params: <a href="/grid/plugins/grouping-columns/interfaces/groupheaderrenderparams/">GroupHeaderRenderParams</a>) =&gt; string &#124; void &#124; HTMLElement</code> | Group header renderer called for each column group. Receives the group's `id`, `label`, and `columns` in the params, so a single function can handle all groups or differentiate per group via `params.id`. |
| `showGroupBorders?` | <code>boolean</code> | Whether to show group borders (default: true) |
| `lockGroupOrder?` | <code>boolean</code> | Prevent columns from being reordered outside their group. When enabled, column moves that would break group contiguity are blocked. Works with both header drag-and-drop and visibility panel drag-and-drop. |

### Property Details

#### columnGroups

```ts
features: {
  groupingColumns: {
    columnGroups: [
      { header: 'Personal Info', children: ['firstName', 'lastName', 'email'] },
      { header: 'Work Info', children: ['department', 'title', 'salary'] },
    ],
  }
}
```

---

#### groupHeaderRenderer

Group header renderer called for each column group.
Receives the group's `id`, `label`, and `columns` in the params,
so a single function can handle all groups or differentiate per group via `params.id`.

When a per-group renderer is also defined,
the per-group renderer takes precedence for that specific group.

```ts
groupHeaderRenderer: (params) => {
  return `<strong>${params.label}</strong> (${params.columns.length} cols)`;
}
```

```ts
groupHeaderRenderer: (params) => {
  const icons: Record<string, string> = { personal: '👤', work: '💼' };
  return `${icons[params.id] ?? '📁'} <strong>${params.label}</strong>`;
}
```

```ts
groupHeaderRenderer: (params) => {
  const el = document.createElement('span');
  el.style.cssText = 'display: flex; align-items: center; gap: 0.4em;';
  el.textContent = `${params.label} — ${params.columns.length} columns`;
  return el;
}
```

```ts
groupHeaderRenderer: (params) => {
  if (params.id === 'misc') return; // default label for this group
  return `<em>${params.label}</em>`;
}
```

---

#### lockGroupOrder

**Default:** `false`

---