components/description

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

@@ -1,21 +1,19 @@
 import { useState, useRef } from 'react';
 import {
   type GridInstance,
-  // type GridRefHandle,
+  type GridRefHandle,
   type GridOptions,
   Grid,
-  Caption
+  Caption,
+  Description
 } from '@highcharts/grid-lite-react';
 
 function App() {
-  /* const grid = useRef<GridRefHandle<GridOptions> | null>(null);
-
-  const onButtonClick = () => {
-    console.info('(ref) grid:', grid.current?.grid);
-  }; */
-
-  const onGridCallback = (grid: GridInstance<GridOptions>) => {
-    console.info('(callback) grid:', grid);
+  // const grid = useRef<GridRefHandle<GridOptions> | null>(null);
+  const [description, setDescription] = useState<string>('Grid Description');
+  const onSetDescriptionClick = () => {
+    setDescription('This is a new description');
+    // console.info('(ref) grid:', grid.current?.grid);
   };
 
   const [options] = useState<GridOptions>({
@@ -34,19 +32,19 @@ function App() {
       <Grid
         options={options}
         // gridRef={grid}
-        callback={onGridCallback} 
+        // callback={(grid) => console.info('(callback) grid:', grid)} 
       >
         <Caption>Grid Caption</Caption>
-        {/* <Description>Grid Description</Description>
-        <DataTable>
+        <Description>{description}</Description>
+        { /* <DataTable>
           <Column>
             <Header>Grid Header</Header>
             <Cell>Grid Cell</Cell>
           </Column>
         </DataTable> */}
         {/* <Pagination>Grid Pagination</Pagination> */}
       </Grid>
-      {/* <button onClick={onButtonClick}>Click me</button> */}
+      <button onClick={onSetDescriptionClick}>Set new description</button>
     </>
   );
 }

packages/grid-lite-react/src/index.ts

@@ -11,6 +11,6 @@ import GridLite from '@highcharts/grid-lite';
 
 export { default as Grid } from './Grid';
 export { default as GridLite } from './Grid';
-export { Caption } from '@highcharts/grid-shared-react';
-export type { GridInstance, GridRefHandle, CaptionProps } from '@highcharts/grid-shared-react';
+export { Caption, Description } from '@highcharts/grid-shared-react';
+export type { GridInstance, GridRefHandle, CaptionProps, DescriptionProps } from '@highcharts/grid-shared-react';
 export type GridOptions = GridLite.Options;

packages/grid-pro-react/src/index.ts

@@ -11,6 +11,6 @@ import GridPro from '@highcharts/grid-pro';
 
 export { default as Grid } from './Grid';
 export { default as GridPro } from './Grid';
-export { Caption } from '@highcharts/grid-shared-react';
-export type { GridInstance, GridRefHandle, CaptionProps } from '@highcharts/grid-shared-react';
+export { Caption, Description } from '@highcharts/grid-shared-react';
+export type { GridInstance, GridRefHandle, CaptionProps, DescriptionProps } from '@highcharts/grid-shared-react';
 export type GridOptions = GridPro.Options;

packages/grid-shared-react/src/components/options/description/Description.tsx

@@ -0,0 +1,29 @@
+/**
+ * Grid React integration.
+ * Copyright (c) 2025, Highsoft
+ *
+ * A valid license is required for using this software.
+ * See highcharts.com/license
+ *
+ */
+
+import { ReactNode } from 'react';
+
+export interface DescriptionProps {
+    /**
+     * The custom CSS class name for the description.
+     */
+    className?: string;
+    children?: ReactNode;
+}
+
+export function Description(_props: DescriptionProps) {
+    return null;
+}
+
+Description._GridReact = {
+    type: 'Grid_Option',
+    gridOption: 'description',
+    childOption: 'text',
+    isArrayType: false
+};

packages/grid-shared-react/src/components/options/description/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 { Description } from './Description';
+export type { DescriptionProps } from './Description';

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

@@ -9,3 +9,5 @@
 
 export { Caption } from './caption';
 export type { CaptionProps } from './caption';
+export { Description } from './description';
+export type { DescriptionProps } from './description';

packages/grid-shared-react/src/index.ts

@@ -12,7 +12,7 @@ import { GridType, GridInstance } from './hooks/useGrid';
 import type { GridProps, GridRefHandle } from './components/BaseGrid';
 
 export { BaseGrid };
-export { Caption } from './components/options';
+export { Caption, Description } from './components/options';
 export { getChildProps } from './utils/getChildProps';
-export type { CaptionProps } from './components/options';
+export type { CaptionProps, DescriptionProps } from './components/options';
 export type { GridType, GridInstance, GridProps, GridRefHandle };