Highcharts Grid is getting a more React-friendly way to work. With the revamped Highcharts Grid React packages, developers can now configure Grid Lite and Grid Pro using JSX components, making it easier to build and customize data grids directly within React applications.
Instead of defining everything in a JavaScript options object, you can describe your grid using components for data, columns, headers, pagination, and more.
And if you’re already using Highcharts Grid with React, there’s no need to rewrite your code. The existing options-based API continues to work, and you can combine both approaches in the same grid.
Build grids the React way
React developers are accustomed to building interfaces with components. The new JSX API brings that same approach to Highcharts Grid.
For example, here’s how you can create a simple grid displaying employee information:
import {
Grid,
Data,
Column,
Caption
} from '@highcharts/grid-lite-react';
export default function EmployeeGrid() {
return (
<Grid>
<Caption>Team directory</Caption>
<Data
columns={{
name: ['Alice', 'Bob', 'Charlie'],
age: [23, 34, 45],
city: ['New York', 'Oslo', 'Paris']
}}
/>
<Column id="name" headerFormat="Name" />
<Column
id="age"
dataType="number"
headerFormat="Age"
/>
<Column id="city" headerFormat="City" />
</Grid>
);
}
The structure is straightforward: <Grid> creates the grid, <Data> supplies the data, and individual <Column> components configure how each column is presented.
Because the configuration lives alongside the rest of your JSX, it’s easy to see how the grid is put together and adjust individual elements without working through a large configuration object.
This approach follows the same principles as the newer Highcharts React package, creating a more consistent development experience across Highcharts visualizations and data grids.
JSX, options, or both. Your choice.
Not every project needs to be written the same way.
Some developers prefer the readability of JSX, while others already have established configurations built around the Highcharts Grid JavaScript API.
The revamped packages support both.
You can build an entire grid using JSX components, continue passing a configuration object through the options prop, or mix the two approaches.
For example:
import { useState } from 'react';
import {
Grid,
Data,
Column
} from '@highcharts/grid-lite-react';
export default function App() {
const [options] = useState({
rendering: {
rows: {
virtualization: true
}
}
});
return (
<Grid options={options}>
<Data
columns={{
name: ['Alice', 'Bob'],
age: [23, 34]
}}
/>
<Column id="name" headerFormat="Name" />
<Column id="age" headerFormat="Age" />
</Grid>
);
}
Here, the JavaScript options object controls row virtualization, while JSX defines the data and columns.
The two configurations are merged, with the root options prop taking precedence when the same setting is defined in both places.
That flexibility makes it easier to adopt the new API gradually, without disrupting existing implementations.
More components, more control
The JSX API covers the key elements needed to configure a Highcharts Grid.
Along with Data and Column, developers can use components such as Caption, Description, ColumnDefaults, Header, and Pagination.
Each component accepts an options prop using the familiar Highcharts Grid JavaScript API structure. Individual props can also be passed directly to the component, overriding corresponding settings in its own options object.
This gives developers a choice between concise, readable JSX and more detailed configuration when needed, without giving up access to the existing Grid options.
Styling, events, and instance access
The update also introduces additional props on the main <Grid> component, making common integration tasks more convenient.
You can apply CSS classes to the React container using className, style the underlying table with tableClassName, and configure the grid’s theme directly through the theme prop.
For applications that need access to the underlying Grid instance, gridRef and callback provide that connection.
Grid Pro also supports React-style event handlers through on* props, including events associated with loading, cell interactions, sorting, and pagination.
Together, these additions make it easier to connect Highcharts Grid with the surrounding React application while keeping the grid configuration clear and maintainable.
TypeScript support built in
The new packages include TypeScript definitions for Grid configuration options, component props, and instance references. Grid Pro also provides typings for its event props.
This means developers working in TypeScript can benefit from editor autocomplete and type checking as they configure their grids, with less guesswork about available properties and expected values.
Backwards compatible
Already using Highcharts Grid React? Your existing code will continue to work.
The new version retains full support for the options prop, making it 100% backwards compatible with previous versions. Existing implementations using <Grid options={...} /> work exactly as before, with no changes required.
You can continue using the options-based API or gradually introduce JSX components whenever it makes sense for your project.
Getting started
The updated JSX API is available for both Highcharts Grid Lite and Grid Pro.
Install the package that fits your application:
Grid Lite
npm install @highcharts/grid-lite-reactGrid Pro
npm install @highcharts/grid-pro-reactBoth packages require React 18 or newer.
For Next.js applications, Highcharts Grid must be rendered client-side because it relies on browser APIs. Refer to the Next.js integration guide for the recommended setup.
Grid Pro users can also supply their license key directly through the gridKey prop.
Explore the Highcharts Grid React documentation, check out the GitHub repository, or learn more about Highcharts Grid Lite and Grid Pro.
Leave a Reply