highcharts · sebastianbochan · Sep 8, 2026 · Sep 8, 2026
diff --git a/examples/grid-lite/components-react/src/App.tsx b/examples/grid-lite/components-react/src/App.tsx
@@ -127,7 +127,7 @@ function App() {
           <Caption
             className="mb-2 pt-2 pb-1 text-2xl font-semibold tracking-tight text-slate-900 dark:text-slate-100"
           >Team directory</Caption>
-          <Header header={[
+          <Header options={[
             'name',
             {
               format: 'Details',
@@ -136,14 +136,16 @@ function App() {
             }
           ]} />
           <Column
+            id="index"
+            dataId={null}
             headerFormat="#"
             width={40}
             cellValueGetter={function (this: { row: { index: number } }) {
               return String(this.row.index + 1);
             }}
           />
           <Column
-            columnId="name"
+            id="name"
             enabled
             sortingEnabled
             sortingOrder="asc"
@@ -156,20 +158,20 @@ function App() {
             cellFormat="{value}"
           />
           <Column
-            columnId="age"
+            id="age"
             dataType="number"
             headerFormat="Age ({id})"
             cellFormat="{value}"
           />
           <Column
-            columnId="city"
+            id="city"
             width="20%"
             headerFormatter={function () {
               return `City: ${(this as { id?: string }).id ?? ''}`;
             }}
           />
           <Column
-            columnId="salary"
+            id="salary"
             dataType="number"
             headerFormat="Salary (USD)"
             headerClassName="text-right tabular-nums"

diff --git a/examples/grid-pro/components-react/src/App.tsx b/examples/grid-pro/components-react/src/App.tsx
@@ -52,7 +52,7 @@ function App() {
         <Caption>Grid Pro Components</Caption>
         <Description>Declarative API with gridKey and event props</Description>
         <Column
-          columnId="name"
+          id="name"
           headerFormat="Name"
           onAfterSort={function () {
             console.info('Sorted name column');
@@ -65,16 +65,16 @@ function App() {
           }}
         />
         <Column
-          columnId="age"
+          id="age"
           dataType="number"
           headerFormat="Age"
         />
         <Column
-          columnId="city"
+          id="city"
           headerFormat="City"
         />
         <Column
-          columnId="salary"
+          id="salary"
           dataType="number"
           headerFormat="Salary (USD)"
           cellFormat="${value}"

diff --git a/packages/grid-lite-react/src/index.ts b/packages/grid-lite-react/src/index.ts
@@ -8,35 +8,53 @@
  */
 
 import GridLite from '@highcharts/grid-lite';
+import type { IndividualColumnOptions } from '@highcharts/grid-lite/es-modules/Grid/Core/Options';
+import * as Shared from '@highcharts/grid-shared-react';
 
 export { default as Grid } from './Grid';
 export { default as GridLite } from './Grid';
-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 CaptionProps = Shared.CaptionProps<GridLite.Options['caption']>;
+export type DataProps = Shared.DataProps<GridLite.Options['data']>;
+export type ColumnDefaultsProps = Shared.ColumnDefaultsProps<
+    GridLite.Options['columnDefaults']
+>;
+export type ColumnProps = Shared.ColumnProps<
+    Omit<IndividualColumnOptions, 'id'>
+>;
+export type DescriptionProps = Shared.DescriptionProps<
+    GridLite.Options['description']
+>;
+export type PaginationProps = Shared.PaginationProps<
+    GridLite.Options['pagination']
+>;
+export type HeaderProps = Shared.HeaderProps<GridLite.Options['header']>;
+
+export const Caption = Shared.Caption as (props: CaptionProps) => null;
+export const Data = Shared.Data as (props: DataProps) => null;
+export const ColumnDefaults = Shared.ColumnDefaults as (
+    props: ColumnDefaultsProps
+) => null;
+export const Column = Shared.Column as (props: ColumnProps) => null;
+export const Description = Shared.Description as (
+    props: DescriptionProps
+) => null;
+export const Pagination = Shared.Pagination as (
+    props: PaginationProps
+) => null;
+export const Header = Shared.Header as (props: HeaderProps) => null;
+
 export type {
     GridInstance,
     GridRefHandle,
-    CaptionProps,
-    DescriptionProps,
-    DataProps,
     DataColumns,
     DataColumnValue,
-    ColumnProps,
     ColumnOptionsProps,
     ColumnDataType,
     ColumnSortingOrder,
     CellValueGetterContext,
-    PaginationProps,
-    HeaderProps,
     GroupedHeaderOptions,
     HeaderCellAccessibilityProps
 } from '@highcharts/grid-shared-react';

diff --git a/packages/grid-pro-react/src/index.ts b/packages/grid-pro-react/src/index.ts
@@ -7,40 +7,51 @@
  *
  */
 
-import type { ComponentType } from 'react';
-import {
-    Column as SharedColumn,
-    Data as SharedData,
-    Pagination as SharedPagination,
-    Caption,
-    ColumnDefaults,
-    Description,
-    Header
-} from '@highcharts/grid-shared-react';
+import * as Shared from '@highcharts/grid-shared-react';
+import type { GridProOptions } from './utils/mappers/grid';
 import type { ProColumnProps } from './utils/mappers/column';
 import type { ProPaginationProps } from './utils/mappers/pagination';
 
 export { default as Grid } from './Grid';
 export { default as GridPro } from './Grid';
-export { Caption, ColumnDefaults, Description, Header };
-export const Column = SharedColumn as ComponentType<ProColumnProps>;
-export const Data = SharedData;
-export const Pagination = SharedPagination as ComponentType<ProPaginationProps>;
 export { DataTable, DataConnector } from '@highcharts/grid-pro';
 export { merge } from '@highcharts/grid-pro/es-modules/Shared/Utilities.js';
+
+export type CaptionProps = Shared.CaptionProps<GridProOptions['caption']>;
+export type DataProps = Shared.DataProps<GridProOptions['data']>;
+export type ColumnDefaultsProps = Shared.ColumnDefaultsProps<
+    GridProOptions['columnDefaults']
+>;
+export type DescriptionProps = Shared.DescriptionProps<
+    GridProOptions['description']
+>;
+export type HeaderProps = Shared.HeaderProps<GridProOptions['header']>;
+export type ColumnProps = ProColumnProps;
+export type PaginationProps = ProPaginationProps;
+
+export const Caption = Shared.Caption as (props: CaptionProps) => null;
+export const Data = Shared.Data as (props: DataProps) => null;
+export const ColumnDefaults = Shared.ColumnDefaults as (
+    props: ColumnDefaultsProps
+) => null;
+export const Description = Shared.Description as (
+    props: DescriptionProps
+) => null;
+export const Header = Shared.Header as (props: HeaderProps) => null;
+export const Column = Shared.Column as (props: ProColumnProps) => null;
+export const Pagination = Shared.Pagination as (
+    props: ProPaginationProps
+) => null;
+
 export type {
     GridInstance,
     GridRefHandle,
-    CaptionProps,
-    DescriptionProps,
-    DataProps,
     DataColumns,
     DataColumnValue,
     ColumnOptionsProps,
     ColumnDataType,
     ColumnSortingOrder,
     CellValueGetterContext,
-    HeaderProps,
     GroupedHeaderOptions,
     HeaderCellAccessibilityProps
 } from '@highcharts/grid-shared-react';

diff --git a/packages/grid-pro-react/src/utils/mappers/column/columnOptions.ts b/packages/grid-pro-react/src/utils/mappers/column/columnOptions.ts
@@ -10,6 +10,7 @@
 import { isObject } from '@highcharts/grid-shared-react';
 import { mapEventsProps } from '../../mapEventsProps';
 import type { ColumnProps } from '@highcharts/grid-shared-react';
+import type { IndividualColumnOptions } from '@highcharts/grid-pro/es-modules/Grid/Core/Options';
 import type {
     CellEventCallback,
     ColumnEventCallback
@@ -55,7 +56,9 @@ export type ProColumnEventProps = (
 /**
  * Column props for Grid Pro, including event handlers.
  */
-export type ProColumnProps = ColumnProps & ProColumnEventProps;
+export type ProColumnProps = ColumnProps<
+    Omit<IndividualColumnOptions, 'id'>
+> & ProColumnEventProps;
 
 /** Flat event prop → nested Grid option path for columns. */
 const COLUMN_EVENT_ALIASES = {

diff --git a/packages/grid-pro-react/src/utils/mappers/pagination/paginationOptions.ts b/packages/grid-pro-react/src/utils/mappers/pagination/paginationOptions.ts
@@ -10,6 +10,7 @@
 import { isObject } from '@highcharts/grid-shared-react';
 import { mapEventsProps } from '../../mapEventsProps';
 import type { PaginationProps } from '@highcharts/grid-shared-react';
+import type { GridProOptions } from '../grid/gridOptions';
 import type {
     AfterPageChangeEvent,
     AfterPageSizeChangeEvent,
@@ -30,7 +31,9 @@ export interface PaginationEventProps {
 /**
  * Pagination props for Grid Pro, including event handlers.
  */
-export type ProPaginationProps = PaginationProps & PaginationEventProps;
+export type ProPaginationProps = PaginationProps<
+    GridProOptions['pagination']
+> & PaginationEventProps;
 
 /** Flat event prop → nested Grid option path for pagination. */
 const PAGINATION_EVENT_ALIASES = {

diff --git a/packages/grid-pro-react/tests/mappers/columnOptions.test.tsx b/packages/grid-pro-react/tests/mappers/columnOptions.test.tsx
@@ -12,11 +12,11 @@ describe('mapColumnEventProps', () => {
         const onCellClick = vi.fn();
 
         expect(mapColumnEventProps({
-            columnId: 'name',
+            id: 'name',
             onAfterSort,
             onCellClick
         })).toEqual({
-            columnId: 'name',
+            id: 'name',
             events: {
                 afterSort: onAfterSort
             },
@@ -33,11 +33,11 @@ describe('mapColumnEventProps', () => {
         const onHeaderAfterRender = vi.fn();
 
         expect(mapColumnEventProps({
-            columnId: 'name',
+            id: 'name',
             onHeaderClick,
             onHeaderAfterRender
         })).toEqual({
-            columnId: 'name',
+            id: 'name',
             header: {
                 events: {
                     click: onHeaderClick,
@@ -64,7 +64,7 @@ describe('mergeColumnEventProps', () => {
                             }}
                         />
                         <Column
-                            columnId="name"
+                            id="name"
                             onAfterSort={onAfterSort}
                             onCellClick={onCellClick}
                         />

diff --git a/packages/grid-pro-react/tests/mappers/gridOptions.test.tsx b/packages/grid-pro-react/tests/mappers/gridOptions.test.tsx
@@ -67,7 +67,7 @@ describe('buildGridOptions', () => {
     it('maps declarative children and builds full grid options', () => {
         const options = buildGridOptions(
             'GRID-KEY',
-            getChildProps(<Column columnId="name" />),
+            getChildProps(<Column id="name" />),
             void 0,
             { gridKey: 'GRID-KEY' } as GridProProps
         );

diff --git a/packages/grid-shared-react/src/components/BaseGrid.tsx b/packages/grid-shared-react/src/components/BaseGrid.tsx
@@ -29,7 +29,7 @@
  */
 export interface GridProps<TOptions> {
     /**
-     * Grid configuration options
+     * Options JSON, same as in the Grid JS API.
      */
     options?: TOptions;
     /**
@@ -93,7 +93,7 @@
                return currGridRef.current;
            }
        }),
        []
    );

    return <div ref={containerRef} className={className} />;

diff --git a/packages/grid-shared-react/src/components/options/caption/Caption.tsx b/packages/grid-shared-react/src/components/options/caption/Caption.tsx
@@ -9,7 +9,7 @@
 
 import { ReactNode } from 'react';
 
-export interface CaptionProps {
+export interface CaptionProps<TOptions = unknown> {
     /**
      * The custom CSS class name for the table caption.
      */
@@ -18,10 +18,14 @@ export interface CaptionProps {
      * The HTML tag to use for the caption.
      */
     htmlTag?: string;
+    /**
+     * Options JSON, same as in the Grid JS API (`caption`).
+     */
+    options?: TOptions;
     children?: ReactNode;
 }
 
-export function Caption(_props: CaptionProps) {
+export function Caption<TOptions = unknown>(_props: CaptionProps<TOptions>) {
     return null;
 }
 

diff --git a/packages/grid-shared-react/src/components/options/columns/Column.tsx b/packages/grid-shared-react/src/components/options/columns/Column.tsx
@@ -9,7 +9,7 @@
 
 import type { ColumnProps } from './columnProps';
 
-export function Column(_props: ColumnProps) {
+export function Column<TOptions = unknown>(_props: ColumnProps<TOptions>) {
     return null;
 }
 

diff --git a/packages/grid-shared-react/src/components/options/columns/ColumnDefaults.tsx b/packages/grid-shared-react/src/components/options/columns/ColumnDefaults.tsx
@@ -9,11 +9,8 @@
 
 import type { ColumnOptionsProps } from './columnProps';
 
-/**
- * ColumnDefaults props include shared column options plus grid-level row
- * class hooks (lifted to `rendering.rows` during normalize).
- */
-export interface ColumnDefaultsProps extends ColumnOptionsProps {
+export interface ColumnDefaultsProps<TOptions = unknown>
+    extends ColumnOptionsProps {
     /**
      * CSS class names on every body `<tr>`.
      * Maps to Core `rendering.rows.className`.
@@ -24,9 +21,15 @@ export interface ColumnDefaultsProps extends ColumnOptionsProps {
      * Maps to Core `rendering.rows.evenClassName`.
      */
     evenRowClassName?: string;
+    /**
+     * Options JSON, same as in the Grid JS API (`columnDefaults`).
+     */
+    options?: TOptions;
 }
 
-export function ColumnDefaults(_props: ColumnDefaultsProps) {
+export function ColumnDefaults<TOptions = unknown>(
+    _props: ColumnDefaultsProps<TOptions>
+) {
     return null;
 }