{"id":31759,"date":"2026-10-28T14:52:38","date_gmt":"2026-10-28T14:52:38","guid":{"rendered":"urn:uuid:6d82df45-edd4-4a65-96ac-7b70c93fb6d0"},"modified":"2026-10-28T14:52:39","modified_gmt":"2026-10-28T14:52:39","slug":"introducing-a-more-react-friendly-highcharts-grid-with-jsx","status":"publish","type":"post","link":"https:\/\/www.highcharts.com\/blog\/post\/introducing-a-more-react-friendly-highcharts-grid-with-jsx\/","title":{"rendered":"Introducing a more React-friendly Highcharts Grid with JSX"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">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.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Instead of defining everything in a JavaScript options object, you can describe your grid using components for data, columns, headers, pagination, and more.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">And if you&#8217;re already using Highcharts Grid with React, there&#8217;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.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Build grids the React way<\/strong><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">React developers are accustomed to building interfaces with components. The new JSX API brings that same approach to Highcharts Grid.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">For example, here&#8217;s how you can create a simple grid displaying employee information:<\/p>\n\n\n\n<div class=\"hs-code-outer-container\"><div class=\"hs-code-container neutral-50-light neutral-800-dark\" tabindex=\"0\" role=\"region\" aria-label=\"Code block\">\n<pre class=\"wp-block-code\"><code>import {\n    Grid,\n    Data,\n    Column,\n    Caption\n} from '@highcharts\/grid-lite-react';\n\nexport default function EmployeeGrid() {\n    return (\n        &lt;Grid>\n            &lt;Caption>Team directory&lt;\/Caption>\n            &lt;Data\n                columns={{\n                    name: &#91;'Alice', 'Bob', 'Charlie'],\n                    age: &#91;23, 34, 45],\n                    city: &#91;'New York', 'Oslo', 'Paris']\n                }}\n            \/>\n            &lt;Column id=\"name\" headerFormat=\"Name\" \/>\n            &lt;Column\n                id=\"age\"\n                dataType=\"number\"\n                headerFormat=\"Age\"\n            \/>\n            &lt;Column id=\"city\" headerFormat=\"City\" \/>\n        &lt;\/Grid>\n    );\n}\n<\/code><\/pre>\n\n\n\n<div class=\"wp-block-highsoft-hs-button\"><button type=\"button\" class=\"hc-button hc-button--white hc-button--size-200\" data-copy-code=\"true\" aria-label=\"Copy\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewBox=\"0 0 24 24\" width=\"16\" height=\"16\"><path stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M8 8V5.2c0-1.12 0-1.68.218-2.108a2 2 0 0 1 .874-.874C9.52 2 10.08 2 11.2 2h7.6c1.12 0 1.68 0 2.108.218a2 2 0 0 1 .874.874C22 3.52 22 4.08 22 5.2v7.6c0 1.12 0 1.68-.218 2.108a2 2 0 0 1-.874.874C20.48 16 19.92 16 18.8 16H16M5.2 22h7.6c1.12 0 1.68 0 2.108-.218a2 2 0 0 0 .874-.874C16 20.48 16 19.92 16 18.8v-7.6c0-1.12 0-1.68-.218-2.108a2 2 0 0 0-.874-.874C14.48 8 13.92 8 12.8 8H5.2c-1.12 0-1.68 0-2.108.218a2 2 0 0 0-.874.874C2 9.52 2 10.08 2 11.2v7.6c0 1.12 0 1.68.218 2.108a2 2 0 0 0 .874.874C3.52 22 4.08 22 5.2 22\"><\/path><\/svg>Copy<\/button><\/div>\n<\/div><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">The structure is straightforward: <code>&lt;Grid><\/code> creates the grid, <code>&lt;Data><\/code> supplies the data, and individual <code>&lt;Column><\/code> components configure how each column is presented.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Because the configuration lives alongside the rest of your JSX, it&#8217;s easy to see how the grid is put together and adjust individual elements without working through a large configuration object.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">This approach follows the same principles as the newer Highcharts React package, creating a more consistent development experience across Highcharts visualizations and data grids.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>JSX, options, or both. Your choice.<\/strong><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Not every project needs to be written the same way.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Some developers prefer the readability of JSX, while others already have established configurations built around the Highcharts Grid JavaScript API.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The revamped packages support both.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">You can build an entire grid using JSX components, continue passing a configuration object through the <code>options<\/code> prop, or mix the two approaches.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">For example:<\/p>\n\n\n\n<div class=\"hs-code-outer-container\"><div class=\"hs-code-container neutral-50-light neutral-800-dark\" tabindex=\"0\" role=\"region\" aria-label=\"Code block\">\n<pre class=\"wp-block-code\"><code>import { useState } from 'react';\n\nimport {\n    Grid,\n    Data,\n    Column\n} from '@highcharts\/grid-lite-react';\n\nexport default function App() {\n    const &#91;options] = useState({\n        rendering: {\n            rows: {\n                virtualization: true\n            }\n        }\n    });\n\n    return (\n        &lt;Grid options={options}>\n            &lt;Data\n                columns={{\n                    name: &#91;'Alice', 'Bob'],\n                    age: &#91;23, 34]\n                }}\n            \/>\n            &lt;Column id=\"name\" headerFormat=\"Name\" \/>\n            &lt;Column id=\"age\" headerFormat=\"Age\" \/>\n        &lt;\/Grid>\n    );\n}\n<\/code><\/pre>\n\n\n\n<div class=\"wp-block-highsoft-hs-button\"><button type=\"button\" class=\"hc-button hc-button--white hc-button--size-200\" data-copy-code=\"true\" aria-label=\"Copy\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewBox=\"0 0 24 24\" width=\"16\" height=\"16\"><path stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M8 8V5.2c0-1.12 0-1.68.218-2.108a2 2 0 0 1 .874-.874C9.52 2 10.08 2 11.2 2h7.6c1.12 0 1.68 0 2.108.218a2 2 0 0 1 .874.874C22 3.52 22 4.08 22 5.2v7.6c0 1.12 0 1.68-.218 2.108a2 2 0 0 1-.874.874C20.48 16 19.92 16 18.8 16H16M5.2 22h7.6c1.12 0 1.68 0 2.108-.218a2 2 0 0 0 .874-.874C16 20.48 16 19.92 16 18.8v-7.6c0-1.12 0-1.68-.218-2.108a2 2 0 0 0-.874-.874C14.48 8 13.92 8 12.8 8H5.2c-1.12 0-1.68 0-2.108.218a2 2 0 0 0-.874.874C2 9.52 2 10.08 2 11.2v7.6c0 1.12 0 1.68.218 2.108a2 2 0 0 0 .874.874C3.52 22 4.08 22 5.2 22\"><\/path><\/svg>Copy<\/button><\/div>\n<\/div><\/div>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Here, the JavaScript options object controls row virtualization, while JSX defines the data and columns.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The two configurations are merged, with the root options prop taking precedence when the same setting is defined in both places.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">That flexibility makes it easier to adopt the new API gradually, without disrupting existing implementations.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>More components, more control<\/strong><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">The JSX API covers the key elements needed to configure a Highcharts Grid.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Along with <code>Data<\/code> and <code>Column<\/code>, developers can use components such as <code>Caption<\/code>,<code> Description<\/code>,<code> ColumnDefaults<\/code>,<code> Header<\/code>, and <code>Pagination<\/code>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">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 <code>options<\/code> object.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">This gives developers a choice between concise, readable JSX and more detailed configuration when needed, without giving up access to the existing Grid options.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Styling, events, and instance access<\/strong><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">The update also introduces additional props on the main <code>&lt;Grid><\/code> component, making common integration tasks more convenient.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">You can apply CSS classes to the React container using <code>className<\/code>, style the underlying table with <code>tableClassName<\/code>, and configure the grid&#8217;s theme directly through the <code>theme<\/code> prop.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">For applications that need access to the underlying <code>Grid <\/code>instance, gridRef and <code>callback<\/code> provide that connection.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Grid Pro also supports React-style event handlers through <code>on*<\/code> props, including events associated with loading, cell interactions, sorting, and pagination.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Together, these additions make it easier to connect Highcharts Grid with the surrounding React application while keeping the grid configuration clear and maintainable.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>TypeScript support built in<\/strong><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">The new packages include TypeScript definitions for Grid configuration options, component props, and instance references. Grid Pro also provides typings for its event props.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">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.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Backwards compatible<\/strong><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Already using Highcharts Grid React? Your existing code will continue to work.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The new version retains full support for the <code>options<\/code> prop, making it 100% backwards compatible with previous versions. Existing implementations using <code>&lt;Grid options={...} \/><\/code> work exactly as before, with no changes required.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">You can continue using the options-based API or gradually introduce JSX components whenever it makes sense for your project.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Getting started<\/strong><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">The updated JSX API is available for both Highcharts Grid Lite and Grid Pro.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Install the package that fits your application:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Grid Lite<\/strong><\/p>\n\n\n\n<div class=\"hs-code-outer-container\"><div class=\"hs-code-container neutral-50-light neutral-800-dark\" tabindex=\"0\" role=\"region\" aria-label=\"Code block\">\n<pre class=\"wp-block-code\"><code>npm install @highcharts\/grid-lite-react<\/code><\/pre>\n\n\n\n<div class=\"wp-block-highsoft-hs-button\"><button type=\"button\" class=\"hc-button hc-button--white hc-button--size-200\" data-copy-code=\"true\" aria-label=\"Copy\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewBox=\"0 0 24 24\" width=\"16\" height=\"16\"><path stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M8 8V5.2c0-1.12 0-1.68.218-2.108a2 2 0 0 1 .874-.874C9.52 2 10.08 2 11.2 2h7.6c1.12 0 1.68 0 2.108.218a2 2 0 0 1 .874.874C22 3.52 22 4.08 22 5.2v7.6c0 1.12 0 1.68-.218 2.108a2 2 0 0 1-.874.874C20.48 16 19.92 16 18.8 16H16M5.2 22h7.6c1.12 0 1.68 0 2.108-.218a2 2 0 0 0 .874-.874C16 20.48 16 19.92 16 18.8v-7.6c0-1.12 0-1.68-.218-2.108a2 2 0 0 0-.874-.874C14.48 8 13.92 8 12.8 8H5.2c-1.12 0-1.68 0-2.108.218a2 2 0 0 0-.874.874C2 9.52 2 10.08 2 11.2v7.6c0 1.12 0 1.68.218 2.108a2 2 0 0 0 .874.874C3.52 22 4.08 22 5.2 22\"><\/path><\/svg>Copy<\/button><\/div>\n<\/div><\/div>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Grid Pro<\/strong><\/p>\n\n\n\n<div class=\"hs-code-outer-container\"><div class=\"hs-code-container neutral-50-light neutral-800-dark\" tabindex=\"0\" role=\"region\" aria-label=\"Code block\">\n<pre class=\"wp-block-code\"><code>npm install @highcharts\/grid-pro-react<\/code><\/pre>\n\n\n\n<div class=\"wp-block-highsoft-hs-button\"><button type=\"button\" class=\"hc-button hc-button--white hc-button--size-200\" data-copy-code=\"true\" aria-label=\"Copy\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewBox=\"0 0 24 24\" width=\"16\" height=\"16\"><path stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M8 8V5.2c0-1.12 0-1.68.218-2.108a2 2 0 0 1 .874-.874C9.52 2 10.08 2 11.2 2h7.6c1.12 0 1.68 0 2.108.218a2 2 0 0 1 .874.874C22 3.52 22 4.08 22 5.2v7.6c0 1.12 0 1.68-.218 2.108a2 2 0 0 1-.874.874C20.48 16 19.92 16 18.8 16H16M5.2 22h7.6c1.12 0 1.68 0 2.108-.218a2 2 0 0 0 .874-.874C16 20.48 16 19.92 16 18.8v-7.6c0-1.12 0-1.68-.218-2.108a2 2 0 0 0-.874-.874C14.48 8 13.92 8 12.8 8H5.2c-1.12 0-1.68 0-2.108.218a2 2 0 0 0-.874.874C2 9.52 2 10.08 2 11.2v7.6c0 1.12 0 1.68.218 2.108a2 2 0 0 0 .874.874C3.52 22 4.08 22 5.2 22\"><\/path><\/svg>Copy<\/button><\/div>\n<\/div><\/div>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Both packages require React 18 or newer.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">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.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Grid Pro users can also supply their license key directly through the gridKey prop.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Explore the<a href=\"https:\/\/www.highcharts.com\/docs\/grid\/frameworks\/react\/getting-started\"> Highcharts Grid React documentation<\/a>, check out the<a href=\"https:\/\/github.com\/highcharts\/grid-react\"> GitHub repository<\/a>, or learn more about<a href=\"https:\/\/www.highcharts.com\/products\/grid\/\"> Highcharts Grid Lite and Grid Pro<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>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 [&hellip;]<\/p>\n","protected":false},"author":250,"featured_media":31773,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"meta_title":"Highcharts Grid React: Introducing the New JSX API","meta_description":"Build data grids the React way with the new Highcharts Grid JSX API. Enjoy declarative components, flexible configuration, and full backwards compatibility.","hc_selected_options":[],"footnotes":"","_members_access_role":[],"_members_access_error":""},"categories":[224,1103],"tags":[1048,824],"coauthors":[786],"class_list":["post-31759","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-post","category-product-updates","tag-highcharts-grid","tag-react"],"_links":{"self":[{"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/posts\/31759","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/users\/250"}],"replies":[{"embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/comments?post=31759"}],"version-history":[{"count":3,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/posts\/31759\/revisions"}],"predecessor-version":[{"id":31774,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/posts\/31759\/revisions\/31774"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/media\/31773"}],"wp:attachment":[{"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/media?parent=31759"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/categories?post=31759"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/tags?post=31759"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/coauthors?post=31759"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}