Getting started

Use the official React package for Grid Lite or Grid Pro. It is a self-contained component package that handles grid setup/cleanup and loads the Grid CSS for you. Requires React 18 or higher.

1. Install the Grid React package

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

The core Grid library is included as a dependency and will be installed automatically.

Updating to newer versions

  • Minor and patch updates: Run npm update to get the latest compatible version
  • Major updates: Install the latest React package which will include the new major version:
    npm install @highcharts/grid-lite-react@latest

2. Create your grid

Start with the Grid component and pass Data and Column as children, or pass the same Grid options object used in Core. Both work, and they can be combined.

import { Grid, Data, Column } from '@highcharts/grid-lite-react';
export default function App() {
    return (
        <Grid>
            <Data
                columns={{
                    name: ['Alice', 'Bob', 'Charlie', 'David'],
                    age: [23, 34, 45, 56],
                    city: ['New York', 'Oslo', 'Paris', 'Tokyo']
                }}
            />
            <Column id="name" headerFormat="Name" />
            <Column id="age" dataType="number" headerFormat="Age" />
            <Column id="city" headerFormat="City" />
        </Grid>
    );
}

The same grid with the Core options object:

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

How options merges with children, and Grid Pro (gridKey), are documented with the Grid component.

See the live Grid Lite example. See the live Grid Pro example.

3. Customize your grid

The same Grid features are available as child components or as keys on the options object. The examples below add a table caption: Caption children become caption.text.

import { Grid, Data, Column, Caption } from '@highcharts/grid-lite-react';
export default function App() {
    return (
        <Grid>
            <Caption>Team directory</Caption>
            <Data
                columns={{
                    name: ['Alice', 'Bob', 'Charlie', 'David'],
                    age: [23, 34, 45, 56],
                    city: ['New York', 'Oslo', 'Paris', 'Tokyo']
                }}
            />
            <Column id="name" headerFormat="Name" />
            <Column id="age" dataType="number" headerFormat="Age" />
            <Column id="city" headerFormat="City" />
        </Grid>
    );
}

The same caption through options:

import { Grid, type GridOptions } from '@highcharts/grid-lite-react';
const options: GridOptions = {
    caption: {
        text: 'Team directory'
    },
    data: {
        columns: {
            name: ['Alice', 'Bob', 'Charlie', 'David'],
            age: [23, 34, 45, 56],
            city: ['New York', 'Oslo', 'Paris', 'Tokyo']
        }
    },
    columns: [
        { id: 'name', header: { format: 'Name' } },
        { id: 'age', dataType: 'number', header: { format: 'Age' } },
        { id: 'city', header: { format: 'City' } }
    ]
};
export default function App() {
    return <Grid options={options} />;
}

Pagination, sorting, and the rest of the catalog follow the same pattern.

Continue with:

  • Grid for the root component, the options object, refs, and gridKey
  • Components for the component catalog
  • Column for Column and ColumnDefaults
  • Data for loading and updating row data
  • Styling for themes, class names, and Tailwind
  • Next.js when the app uses the Next.js App Router
Edit this page