Components/pagination

examples/grid-lite/components-react/src/App.tsx

@@ -9,7 +9,9 @@ import {
   DataTable,
   ColumnDefaults,
   Column,
-  Description
+  Description,
+  Pagination,
+  Header
 } from '@highcharts/grid-lite-react';
 
 function App() {
@@ -61,6 +63,13 @@ function App() {
     console.info('(callback) grid:', grid);
   };
 
+  // Pagination
+  // const [paginationEnabled, setPaginationEnabled] = useState(false);
+
+  // const onPaginationClick = () => {
+  //   setPaginationEnabled(true);
+  // };
+
   return (
     <>
       <Grid
@@ -90,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}
@@ -132,9 +148,24 @@ function App() {
           cellFormat="${value}"
         />
         <Description>Grid Description</Description>
-        {/* <Pagination>Grid Pagination</Pagination> */}
+        <Pagination
+          // enabled={paginationEnabled}
+          page={1}
+          pageSize={3}
+          align="right"
+          // pageInfo
+          // pageSizeSelector
+          pageSizeOptions={[3, 5, 10, 25]}
+          // pageButtons
+          pageButtonsCount={5}
+          // firstLast
+          // previousNext
+        />
       </Grid>
-      <button onClick={onButtonClick}>Click me</button>
+      <div id="controls">
+        <button onClick={onButtonClick}>Data state</button>
+        {/* <button onClick={onPaginationClick}>Pagination</button> */}
+      </div>
     </>
   );
 }

examples/grid-lite/components-react/src/index.css

@@ -18,9 +18,16 @@ body {
   padding: 20px;
 }
 
+#controls {
+  margin-top: 20px;
+  display: flex;
+  gap: 10px;
+}
+
 @media (prefers-color-scheme: dark) {
   body {
     background-color: #121212;
     color: #ffffff;
   }
 }
+

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 } 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 {
@@ -26,6 +34,10 @@ export type {
     ColumnOptionsProps,
     ColumnDataType,
     ColumnSortingOrder,
-    CellValueGetterContext
+    CellValueGetterContext,
+    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 } 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 {
@@ -26,6 +34,10 @@ export type {
     ColumnOptionsProps,
     ColumnDataType,
     ColumnSortingOrder,
-    CellValueGetterContext
+    CellValueGetterContext,
+    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

@@ -22,3 +22,11 @@ export type {
 } from './columns/columnProps';
 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/components/options/pagination/Pagination.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 { PaginationProps } from './paginationProps';
+
+export function Pagination(_props: PaginationProps) {
+    return null;
+}
+
+Pagination._GridReact = {
+    type: 'Grid_Option',
+    gridOption: 'pagination'
+};

packages/grid-shared-react/src/components/options/pagination/index.ts

@@ -0,0 +1,11 @@
+/**
+ * Grid React integration.
+ * Copyright (c) 2025, Highsoft
+ *
+ * A valid license is required for using this software.
+ * See highcharts.com/license
+ *
+ */
+
+export { Pagination } from './Pagination';
+export type { PaginationProps } from './paginationProps';

packages/grid-shared-react/src/components/options/pagination/paginationProps.ts

@@ -0,0 +1,57 @@
+/**
+ * Grid React integration.
+ * Copyright (c) 2025, Highsoft
+ *
+ * A valid license is required for using this software.
+ * See highcharts.com/license
+ *
+ */
+
+export interface PaginationProps {
+    /**
+     * Whether pagination should be rendered.
+     * Defaults to `true` when the `<Pagination>` component is used.
+     * Pass `false` to disable pagination while keeping other options.
+     */
+    enabled?: boolean;
+    /**
+     * The current page number.
+     */
+    page?: number;
+    /**
+     * Number of rows per page.
+     */
+    pageSize?: number;
+    /**
+     * Alignment of pagination elements within the wrapper.
+     */
+    align?: 'left' | 'center' | 'right' | 'distributed';
+    /**
+     * Whether to show the page information text.
+     */
+    pageInfo?: boolean;
+    /**
+     * Whether to show the page size selector.
+     */
+    pageSizeSelector?: boolean;
+    /**
+     * Available options for the page size selector dropdown.
+     */
+    pageSizeOptions?: number[];
+    /**
+     * Whether to show numbered page buttons.
+     */
+    pageButtons?: boolean;
+    /**
+     * Maximum number of page number buttons to show before using ellipsis.
+     */
+    pageButtonsCount?: number;
+    /**
+     * Whether to show the first and last page navigation buttons.
+     */
+    firstLast?: boolean;
+    /**
+     * Whether to show the previous and next page navigation buttons.
+     */
+    previousNext?: boolean;
+}

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 } from './components/options';
+export {
+    Caption,
+    Data,
+    ColumnDefaults,
+    Column,
+    Description,
+    Pagination,
+    Header
+} from './components/options';
 export { getChildProps } from './utils/getChildProps';
 export type {
     CaptionProps,
@@ -24,6 +32,10 @@ export type {
     ColumnOptionsProps,
     ColumnDataType,
     ColumnSortingOrder,
-    CellValueGetterContext
+    CellValueGetterContext,
+    PaginationProps,
+    HeaderProps,
+    GroupedHeaderOptions,
+    HeaderCellAccessibilityProps
 } from './components/options';
 export type { GridType, GridInstance, GridProps, GridRefHandle };