From 611a0957e36289b951c919f659d25b40d1599509 Mon Sep 17 00:00:00 2001
From: Nertil Qatipi <nertil.qatipi@hinto.com>
Date: Fri, 9 Feb 2024 14:47:51 +0100
Subject: [PATCH 1/2] Added a cell renderer to GroupColumnHeaderCell

---
 src/GroupedColumnHeaderCell.tsx            |  4 +-
 src/hooks/useCalculatedColumns.ts          |  3 +-
 src/types.ts                               |  9 +++++
 test/column/renderGroupHeaderCell.test.tsx | 46 ++++++++++++++++++++++
 4 files changed, 59 insertions(+), 3 deletions(-)
 create mode 100644 test/column/renderGroupHeaderCell.test.tsx

diff --git a/src/GroupedColumnHeaderCell.tsx b/src/GroupedColumnHeaderCell.tsx
index c5918460ba..5aaf4a9923 100644
--- a/src/GroupedColumnHeaderCell.tsx
+++ b/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>
   );
 }
diff --git a/src/hooks/useCalculatedColumns.ts b/src/hooks/useCalculatedColumns.ts
index 92a3417ab9..bec18f35a7 100644
--- a/src/hooks/useCalculatedColumns.ts
+++ b/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);
diff --git a/src/types.ts b/src/types.ts
index 703ec14d0d..54119ab7ef 100644
--- a/src/types.ts
+++ b/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<
diff --git a/test/column/renderGroupHeaderCell.test.tsx b/test/column/renderGroupHeaderCell.test.tsx
new file mode 100644
index 0000000000..efd9150237
--- /dev/null
+++ b/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');
+});

From 567903c253f807adbe319fb1ba5ff43cdc327af2 Mon Sep 17 00:00:00 2001
From: Nertil Qatipi <nertil.qatipi@hinto.com>
Date: Fri, 9 Feb 2024 17:40:03 +0100
Subject: [PATCH 2/2] export RenderHeaderGroupCellProps

---
 src/index.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/index.ts b/src/index.ts
index 270d71def0..1464b37a96 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -22,6 +22,7 @@ export type {
   RenderGroupCellProps,
   RenderEditCellProps,
   RenderHeaderCellProps,
+  RenderHeaderGroupCellProps,
   CellRendererProps,
   RenderRowProps,
   RowsChangeData,