diff --git a/examples/grid-lite/components-react/src/App.tsx b/examples/grid-lite/components-react/src/App.tsx index d593199..5894db3 100644 --- a/examples/grid-lite/components-react/src/App.tsx +++ b/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 | null>(null); - - const onButtonClick = () => { - console.info('(ref) grid:', grid.current?.grid); - }; */ - - const onGridCallback = (grid: GridInstance) => { - console.info('(callback) grid:', grid); + // const grid = useRef | null>(null); + const [description, setDescription] = useState('Grid Description'); + const onSetDescriptionClick = () => { + setDescription('This is a new description'); + // console.info('(ref) grid:', grid.current?.grid); }; const [options] = useState({ @@ -34,11 +32,11 @@ function App() { console.info('(callback) grid:', grid)} > Grid Caption - {/* Grid Description - + {description} + { /*
Grid Header
Grid Cell @@ -46,7 +44,7 @@ function App() {
*/} {/* Grid Pagination */}
- {/* */} + ); } diff --git a/packages/grid-lite-react/src/index.ts b/packages/grid-lite-react/src/index.ts index a96ed99..695362c 100644 --- a/packages/grid-lite-react/src/index.ts +++ b/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; diff --git a/packages/grid-pro-react/src/index.ts b/packages/grid-pro-react/src/index.ts index d628c95..84f1e66 100644 --- a/packages/grid-pro-react/src/index.ts +++ b/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; diff --git a/packages/grid-shared-react/src/components/options/description/Description.tsx b/packages/grid-shared-react/src/components/options/description/Description.tsx new file mode 100644 index 0000000..c6ee575 --- /dev/null +++ b/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 +}; diff --git a/packages/grid-shared-react/src/components/options/description/index.ts b/packages/grid-shared-react/src/components/options/description/index.ts new file mode 100644 index 0000000..65cb487 --- /dev/null +++ b/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'; diff --git a/packages/grid-shared-react/src/components/options/index.ts b/packages/grid-shared-react/src/components/options/index.ts index f4822ce..5cf87d4 100644 --- a/packages/grid-shared-react/src/components/options/index.ts +++ b/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'; diff --git a/packages/grid-shared-react/src/index.ts b/packages/grid-shared-react/src/index.ts index 445d13c..3672450 100644 --- a/packages/grid-shared-react/src/index.ts +++ b/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 };