Components/header

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}

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;

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;

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

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

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

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

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

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 ? [] : {}
         );