Grid Installation

Highcharts Grid ships in two editions that share the same API but differ in feature scope and licensing.

EditionPackageHighlights
Grid Lite@highcharts/grid-liteFree. Focused on viewing and interacting with data.
Grid Pro@highcharts/grid-proCommercial. Adds editing, validation, sparklines, events and advanced workflows.

Start with Lite if you only need read-only, interactive tables. Switch to Pro when you need editing, data validation, events or sparklines.

Try before installing

See Grid in action without installing anything:

Installation

Get started with Highcharts Grid using a bundler (Option 1), a CDN (Option 2) or self-hosted (Option 3).

Option 1: NPM & Bundlers

Best for projects using Vite, Webpack, Next.js, or other modern build tools.

Step 1: Install

npm install @highcharts/grid-lite

Step 2: Add a container to your HTML

<div id="container"></div>

Step 3: Create the grid

import Grid from '@highcharts/grid-lite/es-modules/masters/grid-lite.src.js';
import '@highcharts/grid-lite/css/grid-lite.css';
Grid.grid('container', {
    dataTable: {
        columns: {
            product: ['Apple', 'Pear', 'Plum', 'Banana'],
            price: [1.5, 2.53, 5, 4.5]
        }
    }
});

TIP: Using TypeScript? Types are included automatically - no @types package needed.

Option 2: CDN & Static

Best for quick prototypes, CodePen, JSFiddle, or projects without build tools.

Grid Lite - Complete HTML:

<!DOCTYPE html>
<html>
<head>
    <script src="https://cdn.jsdelivr.net/npm/@highcharts/grid-lite/grid-lite.js"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@highcharts/grid-lite/css/grid-lite.css" />
</head>
<body>
    <div id="container"></div>
    <script>
    Grid.grid('container', {
        dataTable: {
            columns: {
                product: ['Apple', 'Pear', 'Plum', 'Banana'],
                price: [1.5, 2.53, 5, 4.5]
            }
        }
    });
    </script>
</body>
</html>

TIP: Want to lock to a specific version? Use: https://cdn.jsdelivr.net/npm/@highcharts/[email protected]/grid-lite.js

Option 3: Download and self-host

Best when you need an offline setup or must serve assets from your own domain.

  1. Download the latest Grid package from highcharts.com/download.
  2. Place the JS/CSS files on your server.
  3. Reference them directly:
<script src="/assets/grid/grid-lite.js"></script>
<link rel="stylesheet" href="/assets/grid/css/grid-lite.css" />

For Grid Pro, swap the filenames:

<script src="/assets/grid/grid-pro.js"></script>
<link rel="stylesheet" href="/assets/grid/css/grid-pro.css" />

Using Grid Pro

Switch to Grid Pro for editing, validation, sparklines, and advanced features.

Install Grid Pro

# Basic installation
npm install @highcharts/grid-pro

Import and configure

import Grid from '@highcharts/grid-pro/es-modules/masters/grid-pro.src.js';
import '@highcharts/grid-pro/css/grid-pro.css';
// Create grid with Pro features
Grid.grid('container', {
    dataTable: {
        columns: {
            product: ['Apple', 'Pear', 'Plum', 'Banana'],
            price: [1.5, 2.53, 5, 4.5],
            inStock: [true, true, false, true]
        }
    },
    columns: [{
        id: 'product',
        cells: {
            editable: true
        }
    }, {
        id: 'price',
        cells: {
            editable: true,
            format: '${value}'
        }
    }, {
        id: 'inStock',
        cells: {
            editable: true
        }
    }]
});

Framework integration

Grid works seamlessly with most major JavaScript frameworks.

React

Installation:

npm install @highcharts/grid-lite-react
# or
npm install @highcharts/grid-pro-react

The React package is self-contained, so a single install is enough to render the grid. Requires React 18 or higher.

App.tsx:

import { useState } from 'react';
import { Grid, type GridOptions } from '@highcharts/grid-lite-react';
export default function App() {
    const [options] = useState<GridOptions>({
        dataTable: {
            columns: {
                name: ['Alice', 'Bob', 'Charlie', 'David'],
                age: [23, 34, 45, 56],
                city: ['New York', 'Oslo', 'Paris', 'Tokyo'],
            }
        }
    });
    return <Grid options={options} />;
}

For Grid Pro, swap the imports to @highcharts/grid-pro-react and render <Grid options={options} />.

View complete React guide →

Other Frameworks

FrameworkGuide
VueView Vue Guide →
AngularView Angular Guide →

Next steps

Now that Grid is installed, explore what you can build:

Upgrading from an older version? See the Migration Guide for detailed upgrade instructions from Grid 1.x or Dashboards 3.x.

Edit this page