@highcharts/grid-pro-react

React integration for Highcharts Grid Pro.

Installation

``bash
npm install @highcharts/grid-pro-react
`

Requirements

- React 18 or higher

Quick Start

`tsx
import React, { useState } from 'react';
import { Grid, type GridOptions } from '@highcharts/grid-pro-react';

function App() {
const [options] = useState({
dataTable: {
columns: {
name: ['Alice', 'Bob', 'Charlie'],
age: [23, 34, 45],
city: ['New York', 'Oslo', 'Paris']
}
},
caption: {
text: 'My Grid'
}
});

return ;
}
`

API

$3

React component that wraps Highcharts Grid Pro.

#### Props

- options (required): Configuration options for the grid. Type: GridOptions
- ref (optional): React ref to access the underlying grid instance. Type: RefObject>
- gridRef (optional): Alternative prop-based ref. Type: RefObject>
- callback (optional): Callback function called when the grid is initialized. Receives the grid instance as parameter. Type: (grid: GridInstance) => void

$3

Type exported from the package for TypeScript support.

`tsx
import type { GridOptions } from '@highcharts/grid-pro-react';
`

$3

Type for the ref handle that provides access to the underlying grid instance.

`tsx
import type { GridRefHandle } from '@highcharts/grid-pro-react';

const gridRef = useRef | null>(null);
// Access the grid instance via gridRef.current?.grid
`

$3

Type for the grid instance returned by the ref or callback.

`tsx
import type { GridInstance } from '@highcharts/grid-pro-react';
`

$3

You can access the grid instance in two ways:

Using ref:
`tsx
import { useRef } from 'react';
import { Grid, type GridRefHandle, type GridOptions } from '@highcharts/grid-pro-react';

function App() {
const gridRef = useRef | null>(null);

const handleClick = () => {
// Access the grid instance
const gridInstance = gridRef.current?.grid;
if (gridInstance) {
console.log('Grid instance:', gridInstance);
}
};

return (
<>

Access Grid

);
}
`

Using callback:
`tsx
import { Grid, type GridInstance, type GridOptions } from '@highcharts/grid-pro-react';

function App() {
const handleGridReady = (grid: GridInstance) => {
console.log('Grid initialized:', grid);
};

return ;
}
`

$3

When using this package with Next.js, you need to disable Server-Side Rendering (SSR) for the Grid component:

`tsx
'use client';

import { useState } from 'react';
import dynamic from 'next/dynamic';
import { type GridOptions } from '@highcharts/grid-pro-react';
import '@highcharts/grid-pro/css/grid-pro.css';

// Disable SSR for the Grid component
const Grid = dynamic(
() => import('@highcharts/grid-pro-react').then((mod) => mod.Grid),
{ ssr: false }
);

export default function Page() {
const [options] = useState({
dataTable: {
columns: {
name: ['Alice', 'Bob', 'Charlie'],
age: [23, 34, 45]
}
}
});

return ;
}
`

Important: The Grid component must be rendered client-side only. Always use dynamic import with ssr: false and mark your component with 'use client'` directive.

Documentation

For detailed documentation on available options and features, see the Highcharts Grid Pro documentation.

License

SEE LICENSE IN LICENSE.