From c6ad53e8f570611a89c9bcf5e93fab1806f217e4 Mon Sep 17 00:00:00 2001
From: Sebastian Bochan <sebastian.bochan@blacklabel.net>
Date: Mon, 6 Jul 2026 14:39:26 +0200
Subject: [PATCH] Added header component.

---
 .../grid-lite/components-react/src/App.tsx    | 10 +++++-
 packages/grid-lite-react/src/index.ts         | 15 ++++++--
 packages/grid-pro-react/src/index.ts          | 15 ++++++--
 .../src/components/options/header/Header.tsx  | 19 ++++++++++
 .../components/options/header/headerProps.ts  | 36 +++++++++++++++++++
 .../src/components/options/header/index.ts    | 15 ++++++++
 .../src/components/options/index.ts           |  6 ++++
 packages/grid-shared-react/src/index.ts       | 15 ++++++--
 .../src/utils/getChildProps.ts                |  9 +++++
 9 files changed, 133 insertions(+), 7 deletions(-)
 create mode 100644 packages/grid-shared-react/src/components/options/header/Header.tsx
 create mode 100644 packages/grid-shared-react/src/components/options/header/headerProps.ts
 create mode 100644 packages/grid-shared-react/src/components/options/header/index.ts

diff --git a/examples/grid-lite/components-react/src/App.tsx b/examples/grid-lite/components-react/src/App.tsx
index caa4be7..cdb84e1 100644
--- a/examples/grid-lite/components-react/src/App.tsx
+++ b/examples/grid-lite/components-react/src/App.tsx
@@ -10,7 +10,8 @@ import {
   ColumnDefaults,
   Column,
   Description,
-  Pagination
+  Pagination,
+  Header
 } from '@highcharts/grid-lite-react';
 
 function App() {
@@ -98,6 +99,13 @@ function App() {
           cellRowHeader={false}
         />
         <Caption>Grid Caption v2.1</Caption>
+        <Header header={[
+          'name',
+          {
+            format: 'Details',
+            columns: ['age', 'city', 'salary']
+          }
+        ]} />
         <Column
           headerFormat="#"
           width={40}
diff --git a/packages/grid-lite-react/src/index.ts b/packages/grid-lite-react/src/index.ts
index 2929529..79cbac6 100644
--- a/packages/grid-lite-react/src/index.ts
+++ b/packages/grid-lite-react/src/index.ts
@@ -11,7 +11,15 @@ import GridLite from '@highcharts/grid-lite';
 
 export { default as Grid } from './Grid';
 export { default as GridLite } from './Grid';
-export { Caption, Data, ColumnDefaults, Column, Description, Pagination } from '@highcharts/grid-shared-react';
+export {
+    Caption,
+    Data,
+    ColumnDefaults,
+    Column,
+    Description,
+    Pagination,
+    Header
+} from '@highcharts/grid-shared-react';
 export { DataTable, DataConnector } from '@highcharts/grid-lite';
 export { merge } from '@highcharts/grid-lite/es-modules/Shared/Utilities.js';
 export type {
@@ -27,6 +35,9 @@ export type {
     ColumnDataType,
     ColumnSortingOrder,
     CellValueGetterContext,
-    PaginationProps
+    PaginationProps,
+    HeaderProps,
+    GroupedHeaderOptions,
+    HeaderCellAccessibilityProps
 } from '@highcharts/grid-shared-react';
 export type GridOptions = GridLite.Options;
diff --git a/packages/grid-pro-react/src/index.ts b/packages/grid-pro-react/src/index.ts
index 9eaacc3..7ba334f 100644
--- a/packages/grid-pro-react/src/index.ts
+++ b/packages/grid-pro-react/src/index.ts
@@ -11,7 +11,15 @@ import GridPro from '@highcharts/grid-pro';
 
 export { default as Grid } from './Grid';
 export { default as GridPro } from './Grid';
-export { Caption, Data, ColumnDefaults, Column, Description, Pagination } from '@highcharts/grid-shared-react';
+export {
+    Caption,
+    Data,
+    ColumnDefaults,
+    Column,
+    Description,
+    Pagination,
+    Header
+} from '@highcharts/grid-shared-react';
 export { DataTable, DataConnector } from '@highcharts/grid-pro';
 export { merge } from '@highcharts/grid-pro/es-modules/Shared/Utilities.js';
 export type {
@@ -27,6 +35,9 @@ export type {
     ColumnDataType,
     ColumnSortingOrder,
     CellValueGetterContext,
-    PaginationProps
+    PaginationProps,
+    HeaderProps,
+    GroupedHeaderOptions,
+    HeaderCellAccessibilityProps
 } from '@highcharts/grid-shared-react';
 export type GridOptions = GridPro.Options;
diff --git a/packages/grid-shared-react/src/components/options/header/Header.tsx b/packages/grid-shared-react/src/components/options/header/Header.tsx
new file mode 100644
index 0000000..b952ef3
--- /dev/null
+++ b/packages/grid-shared-react/src/components/options/header/Header.tsx
@@ -0,0 +1,19 @@
+/**
+ * Grid React integration.
+ * Copyright (c) 2025, Highsoft
+ *
+ * A valid license is required for using this software.
+ * See highcharts.com/license
+ *
+ */
+
+import type { HeaderProps } from './headerProps';
+
+export function Header(_props: HeaderProps) {
+    return null;
+}
+
+Header._GridReact = {
+    type: 'Grid_Option',
+    gridOption: 'header'
+};
diff --git a/packages/grid-shared-react/src/components/options/header/headerProps.ts b/packages/grid-shared-react/src/components/options/header/headerProps.ts
new file mode 100644
index 0000000..86f57bb
--- /dev/null
+++ b/packages/grid-shared-react/src/components/options/header/headerProps.ts
@@ -0,0 +1,36 @@
+/**
+ * Grid React integration.
+ * Copyright (c) 2025, Highsoft
+ *
+ * A valid license is required for using this software.
+ * See highcharts.com/license
+ *
+ */
+
+/**
+ * Accessibility options for a header cell in the header tree.
+ */
+export interface HeaderCellAccessibilityProps {
+    description?: string;
+}
+
+/**
+ * Header node in the `header` tree. A group (with `columns`) or a leaf
+ * (with `columnId`). Mirrors Grid Core `GroupedHeaderOptions`.
+ */
+export interface GroupedHeaderOptions {
+    accessibility?: HeaderCellAccessibilityProps;
+    format?: string;
+    className?: string;
+    columnId?: string;
+    columns?: Array<GroupedHeaderOptions | string>;
+}
+
+export interface HeaderProps {
+    /**
+     * Header tree: column order, inclusion, and grouping.
+     * Each entry is a column id (`string`) or a {@link GroupedHeaderOptions}
+     * object. Maps to Grid Core `options.header`.
+     */
+    header?: Array<GroupedHeaderOptions | string>;
+}
diff --git a/packages/grid-shared-react/src/components/options/header/index.ts b/packages/grid-shared-react/src/components/options/header/index.ts
new file mode 100644
index 0000000..e25312d
--- /dev/null
+++ b/packages/grid-shared-react/src/components/options/header/index.ts
@@ -0,0 +1,15 @@
+/**
+ * Grid React integration.
+ * Copyright (c) 2025, Highsoft
+ *
+ * A valid license is required for using this software.
+ * See highcharts.com/license
+ *
+ */
+
+export { Header } from './Header';
+export type {
+    HeaderProps,
+    GroupedHeaderOptions,
+    HeaderCellAccessibilityProps
+} from './headerProps';
diff --git a/packages/grid-shared-react/src/components/options/index.ts b/packages/grid-shared-react/src/components/options/index.ts
index 67c6419..36984b3 100644
--- a/packages/grid-shared-react/src/components/options/index.ts
+++ b/packages/grid-shared-react/src/components/options/index.ts
@@ -24,3 +24,9 @@ export { Description } from './description';
 export type { DescriptionProps } from './description';
 export { Pagination } from './pagination';
 export type { PaginationProps } from './pagination';
+export { Header } from './header';
+export type {
+    HeaderProps,
+    GroupedHeaderOptions,
+    HeaderCellAccessibilityProps
+} from './header';
diff --git a/packages/grid-shared-react/src/index.ts b/packages/grid-shared-react/src/index.ts
index 989215c..4cfc3ca 100644
--- a/packages/grid-shared-react/src/index.ts
+++ b/packages/grid-shared-react/src/index.ts
@@ -12,7 +12,15 @@ import { GridType, GridInstance } from './hooks/useGrid';
 import type { GridProps, GridRefHandle } from './components/BaseGrid';
 
 export { BaseGrid };
-export { Caption, Data, ColumnDefaults, Column, Description, Pagination } from './components/options';
+export {
+    Caption,
+    Data,
+    ColumnDefaults,
+    Column,
+    Description,
+    Pagination,
+    Header
+} from './components/options';
 export { getChildProps } from './utils/getChildProps';
 export type {
     CaptionProps,
@@ -25,6 +33,9 @@ export type {
     ColumnDataType,
     ColumnSortingOrder,
     CellValueGetterContext,
-    PaginationProps
+    PaginationProps,
+    HeaderProps,
+    GroupedHeaderOptions,
+    HeaderCellAccessibilityProps
 } from './components/options';
 export type { GridType, GridInstance, GridProps, GridRefHandle };
diff --git a/packages/grid-shared-react/src/utils/getChildProps.ts b/packages/grid-shared-react/src/utils/getChildProps.ts
index a33c900..4564d86 100644
--- a/packages/grid-shared-react/src/utils/getChildProps.ts
+++ b/packages/grid-shared-react/src/utils/getChildProps.ts
@@ -209,6 +209,15 @@ export function getChildProps(children: ReactNode): Record<string, unknown> {
             return;
         }
 
+        if (meta.gridOption === 'header') {
+            const { header, children: _ignored } = props;
+
+            if (header !== void 0) {
+                optionsFromChildren.header = header;
+            }
+            return;
+        }
+
         const optionParent = optionsFromChildren[meta.gridOption] ?? (
             optionsFromChildren[meta.gridOption] = meta.isArrayType ? [] : {}
         );