Added a cell renderer to GroupColumnHeaderCell

src/GroupedColumnHeaderCell.tsx

@@ -22,7 +22,7 @@ export default function GroupedColumnHeaderCell<R, SR>({
   isCellSelected,
   selectCell
 }: GroupedColumnHeaderCellProps<R, SR>) {
-  const { tabIndex, onFocus } = useRovingTabIndex(isCellSelected);
+  const { tabIndex, childTabIndex, onFocus } = useRovingTabIndex(isCellSelected);
   const { colSpan } = column;
   const rowSpan = getHeaderCellRowSpan(column, rowIdx);
   const index = column.idx + 1;
@@ -48,7 +48,7 @@ export default function GroupedColumnHeaderCell<R, SR>({
       onFocus={onFocus}
       onClick={onClick}
     >
-      {column.name}
+      {column.renderGroupHeaderCell ? column.renderGroupHeaderCell({ column, tabIndex: childTabIndex }) : column.name}
     </div>
   );
 }

src/hooks/useCalculatedColumns.ts

@@ -77,7 +77,8 @@ export function useCalculatedColumns<R, SR>({
             idx: -1,
             colSpan: 0,
             level: 0,
-            headerCellClass: rawColumn.headerCellClass
+            headerCellClass: rawColumn.headerCellClass,
+            renderGroupHeaderCell: rawColumn.renderGroupHeaderCell
           };
 
           collectColumns(rawColumn.children, level + 1, calculatedColumnParent);

src/index.ts

@@ -22,6 +22,7 @@ export type {
   RenderGroupCellProps,
   RenderEditCellProps,
   RenderHeaderCellProps,
+  RenderHeaderGroupCellProps,
   CellRendererProps,
   RenderRowProps,
   RowsChangeData,

src/types.ts

@@ -79,6 +79,8 @@ export interface ColumnGroup<R, SR = unknown> {
   readonly name: string | ReactElement;
   readonly headerCellClass?: Maybe<string>;
   readonly children: readonly ColumnOrColumnGroup<R, SR>[];
+  /** Render function used to render the content of the group column's header cell */
+  readonly renderGroupHeaderCell?: Maybe<(props: RenderHeaderGroupCellProps<R, SR>) => ReactNode>;
 }
 
 export interface CalculatedColumnParent<R, SR> {
@@ -88,6 +90,8 @@ export interface CalculatedColumnParent<R, SR> {
   readonly colSpan: number;
   readonly level: number;
   readonly headerCellClass?: Maybe<string>;
+  /** Render function used to render the content of the group column's header cell */
+  readonly renderGroupHeaderCell?: Maybe<(props: RenderHeaderGroupCellProps<R, SR>) => ReactNode>;
 }
 
 export type ColumnOrColumnGroup<R, SR = unknown> = Column<R, SR> | ColumnGroup<R, SR>;
@@ -140,6 +144,11 @@ export interface RenderHeaderCellProps<TRow, TSummaryRow = unknown> {
   tabIndex: number;
 }
 
+export interface RenderHeaderGroupCellProps<TRow, TSummaryRow = unknown> {
+  column: CalculatedColumnParent<TRow, TSummaryRow>;
+  tabIndex: number;
+}
+
 export interface CellRendererProps<TRow, TSummaryRow>
   extends Pick<RenderRowProps<TRow, TSummaryRow>, 'row' | 'rowIdx' | 'selectCell'>,
     Omit<

test/column/renderGroupHeaderCell.test.tsx

@@ -0,0 +1,46 @@
+import type { ColumnOrColumnGroup } from '../../src';
+import { setup } from '../utils';
+import { screen, within } from '@testing-library/react';
+
+interface Row {
+  id: number;
+  firstName: string;
+  lastName: string;
+  age: number;
+  birthdayDay: number;
+  birthdayMonth: number;
+  birthdayYear: number;
+}
+
+test('renderGroupHeaderCell is either undefined or a component', () => {
+  const columns: readonly ColumnOrColumnGroup<Row>[] = [
+    { key: 'id', name: 'ID' },
+    {
+      name: 'Full Name',
+      renderGroupHeaderCell: ({ column }) => `👤 ${column.name}`,
+      children: [
+        { key: 'firstName', name: 'Name' },
+        { key: 'lastName', name: 'Surname' }
+      ]
+    },
+    { key: 'age', name: 'Age' },
+    {
+      name: 'Birthday',
+      children: [
+        { key: 'birthdayDay', name: 'Day' },
+        { key: 'birthdayMonth', name: 'Month' },
+        { key: 'birthdayYear', name: 'Year' }
+      ]
+    }
+  ];
+
+  setup({ columns, rows: [] });
+  const rows = screen.getAllByRole('row');
+  expect(rows).toHaveLength(2);
+  const groupedHeaders = within(rows[0]).getAllByRole('columnheader');
+  const columnHeaders = within(rows[1]).getAllByRole('columnheader');
+  expect(groupedHeaders).toHaveLength(2);
+  expect(columnHeaders).toHaveLength(7);
+  expect(groupedHeaders[0]).toHaveTextContent('👤 Full Name');
+  expect(groupedHeaders[1]).toHaveTextContent('Birthday');
+});