Highcharts Grid React

Monorepo containing React wrappers for Highcharts Grid Lite and Highcharts Grid Pro.

Packages

This monorepo contains the following packages:

Published Packages

• @highcharts/grid-lite-react - React wrapper for Highcharts Grid Lite
• @highcharts/grid-pro-react - React wrapper for Highcharts Grid Pro

Internal Packages

• @highcharts/grid-shared-react - Shared core functionality used by both Grid Lite and Grid Pro React wrappers

Quick Start

Installation

# For Grid Lite
npm install @highcharts/grid-lite-react

# For Grid Pro
npm install @highcharts/grid-pro-react

Usage

Grid Lite

import React, { useState } from 'react';
import { GridLite, type GridOptions } from '@highcharts/grid-lite-react';

function App() {
  const [options] = useState<GridOptions>({
    dataTable: {
      columns: {
        name: ['Alice', 'Bob', 'Charlie'],
        age: [23, 34, 45]
      }
    }
  });

  return <GridLite options={options} />;
}

Grid Pro

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

function App() {
  const [options] = useState<GridOptions>({
    dataTable: {
      columns: {
        name: ['Alice', 'Bob', 'Charlie'],
        age: [23, 34, 45]
      }
    }
  });

  return <GridPro options={options} />;
}

Repository Structure

highcharts-grid-react/
├── packages/                    # Source packages
│   ├── grid-lite-react/        # Grid Lite React wrapper
│   ├── grid-pro-react/          # Grid Pro React wrapper
│   └── grid-shared-react/         # Shared core functionality
├── examples/                    # Example applications
│   ├── grid-lite-example/       # Example using Grid Lite
│   └── grid-pro-example/        # Example using Grid Pro
└── README.md                    # This file

Packages

• packages/grid-lite-react/ - React component wrapper for Highcharts Grid Lite. See README for details.
• packages/grid-pro-react/ - React component wrapper for Highcharts Grid Pro. See README for details.
• packages/grid-shared-react/ - Internal package containing shared React components and hooks used by both wrappers.

Examples

• examples/grid-lite-example/ - Example React application demonstrating how to use @highcharts/grid-lite-react
• examples/grid-pro-example/ - Example React application demonstrating how to use @highcharts/grid-pro-react

Development

This is a monorepo managed with pnpm workspaces.

Prerequisites

• Node.js (version specified in .nvmrc or package.json)
• pnpm 10.23.0 or higher

Setup

# Install dependencies
pnpm install

# Build all packages
pnpm build

# Lint all packages
pnpm lint

Working with Examples

To run the example applications:

# Run Grid Lite example
cd examples/grid-lite-example
pnpm install
pnpm dev

# Run Grid Pro example
cd examples/grid-pro-example
pnpm install
pnpm dev

Documentation

• Grid Lite React Documentation
• Grid Pro React Documentation
• Highcharts Grid Lite Documentation
• Highcharts Grid Pro Documentation

License

SEE LICENSE IN LICENSE.