GroupingColumnsConfig

Configuration options for the column groups plugin

Properties

Property	Type	Description
columnGroups?	ColumnGroupDefinition[]	Declarative column group definitions. When provided here, takes precedence over gridConfig.columnGroups.
groupHeaderRenderer?	(params: GroupHeaderRenderParams) => string | void | HTMLElement	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?	boolean	Whether to show group borders (default: true)
lockGroupOrder?	boolean	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

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.

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

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

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;
}

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

---

lockGroupOrder

Default: false

---