From 31051aa84907d8b4a806af2107562e18ec3aaed0 Mon Sep 17 00:00:00 2001 From: Sebastian Bochan Date: Thu, 13 Aug 2026 14:03:08 +0200 Subject: [PATCH 1/2] Redesigned README.md files. --- README.md | 202 ++++++++++++------------ packages/grid-lite-react/README.md | 219 ++++++++++++++------------ packages/grid-pro-react/README.md | 238 +++++++++++++++++------------ 3 files changed, 361 insertions(+), 298 deletions(-) diff --git a/README.md b/README.md index 18b57d8..e335b55 100644 --- a/README.md +++ b/README.md @@ -1,10 +1,31 @@ # Highcharts Grid React -Monorepo containing React packages for [Highcharts Grid Lite](https://www.highcharts.com/docs/grid/getting-started/grid-lite) and [Highcharts Grid Pro](https://www.highcharts.com/docs/grid/getting-started/grid-pro). +
-## Packages +Official Highcharts Grid for React + + + +

Official React packages for Highcharts Grid Lite and Highcharts Grid Pro. Built for React patterns, with a JSX-native API, TypeScript types, and the Grid CSS included.

+ +Grid Lite React NPM Version +Grid Pro React NPM Version +Discord + +
+ +This is the working repository for the Grid React packages. If you want to use Grid in a React app, install a distribution package from npm rather than this repo. -This monorepo contains the following packages: +## Why Highcharts Grid React? + +- **JSX-Native API** - Compose grids with React components such as `Data`, `Column`, `Caption`, and `Pagination` +- **Lite and Pro** - Start with free Grid Lite, or use Grid Pro for editing, validation, sparklines, and events +- **Self-Contained Packages** - Grid setup, cleanup, and CSS are handled for you +- **Built for Large Tables** - Row virtualization keeps scrolling smooth with thousands of records +- **Accessibility First** - Semantic HTML tables with keyboard navigation and screen reader support +- **TypeScript Ready** - First-class types for options, refs, events, and component props + +## Packages ### Published Packages @@ -15,9 +36,7 @@ This monorepo contains the following packages: - **[@highcharts/grid-shared-react](./packages/grid-shared-react/)** - Shared core functionality used by both Grid Lite and Grid Pro React packages -## Quick Start - -### Installation +## Installation ```bash # For Grid Lite @@ -27,48 +46,59 @@ npm install @highcharts/grid-lite-react npm install @highcharts/grid-pro-react ``` -### Usage +> **Note:** The matching Grid Core package is included as a dependency. `react` and `react-dom` are peer dependencies and are installed automatically with npm v7+. Requires React 18 or higher. -#### Grid Lite - -```tsx -import React, { useState } from 'react'; -import { Grid, type GridOptions } from '@highcharts/grid-lite-react'; - -function App() { - const [options] = useState({ - dataTable: { - columns: { - name: ['Alice', 'Bob', 'Charlie'], - age: [23, 34, 45] - } - } - }); +## Quick Start - return ; +### Grid Lite + +```jsx +import { Grid, Caption, Data, Column } from '@highcharts/grid-lite-react'; + +export function App() { + return ( + + Team directory + + + + + ); } ``` -#### Grid Pro - -```tsx -import React, { useState } from 'react'; -import { Grid, type GridOptions } from '@highcharts/grid-pro-react'; - -function App() { - const [options] = useState({ - dataTable: { - columns: { - name: ['Alice', 'Bob', 'Charlie'], - age: [23, 34, 45] - } - } - }); - - return ; +### Grid Pro + +```jsx +import { Grid, Caption, Data, Column } from '@highcharts/grid-pro-react'; + +export function App() { + return ( + + Team directory + + + + + ); } ``` +See the package READMEs for TypeScript, refs, Next.js, and more: + +- [Grid Lite React](./packages/grid-lite-react/README.md) +- [Grid Pro React](./packages/grid-pro-react/README.md) + ## Repository Structure ``` @@ -76,30 +106,19 @@ highcharts-grid-react/ ├── packages/ # Source packages │ ├── grid-lite-react/ # Grid Lite React package │ ├── grid-pro-react/ # Grid Pro React package -│ └── grid-shared-react/ # Shared core functionality +│ └── grid-shared-react/ # Shared core functionality ├── examples/ # Example applications │ ├── grid-lite/ # Grid Lite examples │ │ ├── minimal-react/ # Minimal React example (Vite) +│ │ ├── components-react/ # JSX component API example (Vite) │ │ └── minimal-nextjs/ # Minimal Next.js example │ └── grid-pro/ # Grid Pro examples │ ├── minimal-react/ # Minimal React example (Vite) -│ └── minimal-nextjs/ # Minimal Next.js example +│ ├── components-react/ # JSX component API example (Vite) +│ └── minimal-nextjs/ # Minimal Next.js example └── README.md # This file ``` -### Packages - -- **`packages/grid-lite-react/`** - React component package for Highcharts Grid Lite. See [README](./packages/grid-lite-react/README.md) for details. -- **`packages/grid-pro-react/`** - React component package for Highcharts Grid Pro. See [README](./packages/grid-pro-react/README.md) for details. -- **`packages/grid-shared-react/`** - Internal package containing shared React components and hooks used by both packages. - -### Examples - -- **`examples/grid-lite/minimal-react/`** - Minimal React application (Vite) demonstrating how to use `@highcharts/grid-lite-react` -- **`examples/grid-lite/minimal-nextjs/`** - Minimal Next.js application demonstrating how to use `@highcharts/grid-lite-react` -- **`examples/grid-pro/minimal-react/`** - Minimal React application (Vite) demonstrating how to use `@highcharts/grid-pro-react` -- **`examples/grid-pro/minimal-nextjs/`** - Minimal Next.js application demonstrating how to use `@highcharts/grid-pro-react` - ## Development This is a monorepo managed with [pnpm workspaces](https://pnpm.io/workspaces). @@ -131,6 +150,10 @@ To run the example applications: cd examples/grid-lite/minimal-react pnpm dev +# Run Grid Lite JSX components example +cd examples/grid-lite/components-react +pnpm dev + # Run Grid Lite Next.js example cd examples/grid-lite/minimal-nextjs pnpm dev @@ -139,6 +162,10 @@ pnpm dev cd examples/grid-pro/minimal-react pnpm dev +# Run Grid Pro JSX components example +cd examples/grid-pro/components-react +pnpm dev + # Run Grid Pro Next.js example cd examples/grid-pro/minimal-nextjs pnpm dev @@ -148,64 +175,25 @@ Note: Since all examples are part of the pnpm workspace, dependencies are instal ## Next.js Integration -Highcharts Grid React components can be used in Next.js applications. Since the Grid components require browser APIs, they need to be rendered on the client side only (without Server-Side Rendering). - -### Setup - -1. Install the required packages: - -```bash -npm install @highcharts/grid-lite-react @highcharts/grid-lite -# or -npm install @highcharts/grid-pro-react @highcharts/grid-pro -``` +Highcharts Grid React components can be used in Next.js applications. Grid uses browser APIs, so it must render on the client. See the [Next.js guide](https://www.highcharts.com/docs/grid/frameworks/nextjs) and the package READMEs for a complete example. -2. Import the Grid component dynamically with SSR disabled: - -```tsx -'use client'; - -import { useState } from 'react'; -import dynamic from 'next/dynamic'; -import { type GridOptions } from '@highcharts/grid-lite-react'; -import '@highcharts/grid-lite/css/grid-lite.css'; - -// Disable SSR for the Grid component -const Grid = dynamic( - () => import('@highcharts/grid-lite-react').then((mod) => mod.Grid), - { ssr: false } -); - -export default function Page() { - const [options] = useState({ - dataTable: { - columns: { - name: ['Alice', 'Bob', 'Charlie'], - age: [23, 34, 45] - } - } - }); - - return ; -} -``` +## Documentation -### Important Notes +- [Grid Lite React](./packages/grid-lite-react/README.md) +- [Grid Pro React](./packages/grid-pro-react/README.md) +- [Highcharts Grid with React](https://www.highcharts.com/docs/grid/frameworks/react) +- [Highcharts Grid Lite](https://www.highcharts.com/docs/grid/getting-started/grid-lite) +- [Highcharts Grid Pro](https://www.highcharts.com/docs/grid/getting-started/grid-pro) +- [Changelog](./CHANGELOG.md) +- [Releasing](./RELEASING.md) -- **SSR is disabled**: The Grid components require browser APIs and cannot be rendered on the server. They are dynamically imported with `ssr: false` to ensure client-side only rendering. -- **Client Component**: The page or component using the Grid must be marked with `'use client'` directive. -- **CSS Import**: Don't forget to import the required CSS file for the Grid component. +## Support and feedback -See the [Next.js examples](./examples/) for complete working implementations. +We love to learn how you are using Highcharts, and what you would like to see from us in the future. -## Documentation +Join our vibrant community on [GitHub](https://github.com/highcharts/grid-react), [Stack Overflow](https://stackoverflow.com/tags/highcharts/), [Discord](https://discord.com/invite/xHxxcyyy6K), and the [Highcharts Forums](https://www.highcharts.com/forum/). -- [Grid Lite React Documentation](./packages/grid-lite-react/README.md) -- [Grid Pro React Documentation](./packages/grid-pro-react/README.md) -- [Highcharts Grid Lite Documentation](https://www.highcharts.com/docs/grid/getting-started/grid-lite) -- [Highcharts Grid Pro Documentation](https://www.highcharts.com/docs/grid/getting-started/grid-pro) -- [Changelog](./CHANGELOG.md) -- [Releasing](./RELEASING.md) +Commercial support packages are available, see [Highcharts Advantage](https://www.highcharts.com/highcharts-advantage/). ## License diff --git a/packages/grid-lite-react/README.md b/packages/grid-lite-react/README.md index 74f0632..baf95f7 100644 --- a/packages/grid-lite-react/README.md +++ b/packages/grid-lite-react/README.md @@ -1,136 +1,160 @@ -# @highcharts/grid-lite-react +# Highcharts Grid Lite React -React integration for [Highcharts Grid Lite](https://www.highcharts.com/docs/grid/general). +
-## Links +Official Highcharts Grid Lite for React -* Official website: [www.highcharts.com](https://www.highcharts.com) -* Product page: [www.highcharts.com/products/grid](https://www.highcharts.com/products/grid) -* Download: [www.highcharts.com/download](https://www.highcharts.com/download) -* License: [www.highcharts.com/license](https://www.highcharts.com/license) -* Documentation: [www.highcharts.com/docs](https://www.highcharts.com/docs/grid/frameworks/grid-with-react) -* Support: [www.highcharts.com/support](https://www.highcharts.com/support) -* Issues: [Working repo](https://github.com/highcharts/highcharts/issues) + +

Highcharts Grid Lite for React makes integrating interactive data tables into your React projects intuitive and aligned with your React workflow, built with an API refined for React patterns.

-## Installation - -```bash -npm install @highcharts/grid-lite-react -``` +NPM Version +NPM Downloads +Discord -## Requirements +
-- React 18 or higher +## Why Highcharts Grid Lite React? -## Quick Start +- **JSX-Native API** - Compose grids with React components such as `Data`, `Column`, `Caption`, and `Pagination` +- **Self-Contained Package** - Grid setup, cleanup, and CSS are handled for you +- **Built for Large Tables** - Row virtualization keeps scrolling smooth with thousands of records +- **Interactive by Default** - Sorting, filtering, and pagination without extra libraries +- **Accessibility First** - Renders a semantic HTML table with keyboard navigation and screen reader support +- **CSS Theming** - Customize appearance with CSS variables and class names that fit your app +- **TypeScript Ready** - First-class types for options, refs, and component props -```tsx -import React, { useState } from 'react'; -import { Grid, type GridOptions } from '@highcharts/grid-lite-react'; - -function App() { - const [options] = useState({ - dataTable: { - columns: { - name: ['Alice', 'Bob', 'Charlie'], - age: [23, 34, 45], - city: ['New York', 'Oslo', 'Paris'] - } - }, - caption: { - text: 'My Grid' - } - }); - - return ; -} -``` +## License -## API +Highcharts Grid Lite is free to use. Review the license terms at the links below: -### `Grid` +- [Standard License Terms](https://www.highcharts.com/license) +- [Product page](https://www.highcharts.com/products/grid) -React component that wraps Highcharts Grid Lite. +Need editing, validation, sparklines, or events? See [@highcharts/grid-pro-react](https://www.npmjs.com/package/@highcharts/grid-pro-react). -#### Props +## Installation -- `options` (required): Configuration options for the grid. Type: `GridOptions` -- `gridRef` (optional): React ref to access the underlying grid instance. Type: `RefObject>` -- `callback` (optional): Callback function called when the grid is initialized. Receives the grid instance as parameter. Type: `(grid: GridInstance) => void` +Install Highcharts Grid Lite React from npm: -### `GridOptions` +```bash +npm install @highcharts/grid-lite-react +``` -Type exported from the package for TypeScript support. +Or using yarn: -```tsx -import type { GridOptions } from '@highcharts/grid-lite-react'; +```bash +yarn add @highcharts/grid-lite-react ``` -### `GridRefHandle` +> **Note:** `@highcharts/grid-lite` is included as a dependency. `react` and `react-dom` are peer dependencies and are installed automatically with npm v7+. Requires React 18 or higher. -Type for the gridRef handle that provides access to the underlying grid instance. +## Quick Start -```tsx -import type { GridRefHandle } from '@highcharts/grid-lite-react'; +```jsx +import { Grid, Caption, Data, Column, Pagination } from '@highcharts/grid-lite-react'; -const gridRef = useRef | null>(null); -// Access the grid instance via gridRef.current?.grid +export function App() { + return ( + + Team directory + + + + + + + ); +} ``` -### `GridInstance` +## Grid props -Type for the grid instance returned by gridRef or callback. +The grid is rendered inside a container. You can pass layout and theme props directly to `Grid`: -```tsx -import type { GridInstance } from '@highcharts/grid-lite-react'; +```jsx + + Full-width grid + + ``` -### Using gridRef and Callback +- `className` applies to the React mount container +- `tableClassName` applies to the rendered table +- `theme` sets the Grid theme (`rendering.theme`) + +You can also pass a Grid options object via the `options` prop when you prefer a configuration object over JSX children. -You can access the grid instance in two ways: +## TypeScript + +Use `GridOptions` for the `Grid` component `options` prop. -**Using gridRef:** ```tsx -import { useRef } from 'react'; -import { Grid, type GridRefHandle, type GridOptions } from '@highcharts/grid-lite-react'; +import { useState } from 'react'; +import { Grid, type GridOptions } from '@highcharts/grid-lite-react'; -function App() { - const gridRef = useRef | null>(null); - - const handleClick = () => { - // Access the grid instance - const gridInstance = gridRef.current?.grid; - if (gridInstance) { - console.log('Grid instance:', gridInstance); +export function App() { + const [options] = useState({ + data: { + columns: { + name: ['Alice', 'Bob', 'Charlie'], + age: [23, 34, 45] + } } - }; + }); - return ( - <> - - - - ); + return ; } ``` -**Using callback:** +Use `GridRefHandle` and `GridInstance` when you need access to the underlying Grid instance. + ```tsx -import { Grid, type GridInstance, type GridOptions } from '@highcharts/grid-lite-react'; +import { useRef } from 'react'; +import { + Grid, + type GridOptions, + type GridRefHandle, + type GridInstance +} from '@highcharts/grid-lite-react'; + +export function App() { + const gridRef = useRef | null>(null); -function App() { - const handleGridReady = (grid: GridInstance) => { - console.log('Grid initialized:', grid); + const onGridReady = (grid: GridInstance) => { + console.log('Grid instance:', grid); }; - return ; + return ( + + ); } ``` -### Next.js Integration +## Next.js -When using this package with Next.js, you need to disable Server-Side Rendering (SSR) for the Grid component: +Grid uses browser APIs, so it must render on the client. Use a dynamic import with SSR disabled: ```tsx 'use client'; @@ -138,9 +162,7 @@ When using this package with Next.js, you need to disable Server-Side Rendering import { useState } from 'react'; import dynamic from 'next/dynamic'; import { type GridOptions } from '@highcharts/grid-lite-react'; -import '@highcharts/grid-lite/css/grid-lite.css'; -// Disable SSR for the Grid component const Grid = dynamic( () => import('@highcharts/grid-lite-react').then((mod) => mod.Grid), { ssr: false } @@ -148,7 +170,7 @@ const Grid = dynamic( export default function Page() { const [options] = useState({ - dataTable: { + data: { columns: { name: ['Alice', 'Bob', 'Charlie'], age: [23, 34, 45] @@ -160,12 +182,19 @@ export default function Page() { } ``` -**Important:** The Grid component must be rendered client-side only. Always use `dynamic` import with `ssr: false` and mark your component with `'use client'` directive. +The React package loads Grid CSS automatically. See the [Next.js guide](https://www.highcharts.com/docs/grid/frameworks/nextjs) for more detail. ## Documentation -For detailed documentation on available options and features, see the [Highcharts Grid Lite documentation](https://www.highcharts.com/docs/grid/general). +For comprehensive guides and API documentation, visit the [Highcharts Grid React documentation](https://www.highcharts.com/docs/grid/frameworks/react). -## License +- [Grid Lite getting started](https://www.highcharts.com/docs/grid/getting-started/grid-lite) +- [Highcharts Grid overview](https://www.highcharts.com/docs/grid/general) + +## Support and feedback + +We love to learn how you are using Highcharts, and what you would like to see from us in the future. + +Join our vibrant community on [GitHub](https://github.com/highcharts/grid-react), [Stack Overflow](https://stackoverflow.com/tags/highcharts/), [Discord](https://discord.com/invite/xHxxcyyy6K), and the [Highcharts Forums](https://www.highcharts.com/forum/). -SEE LICENSE IN [LICENSE](https://github.com/highcharts/grid-react/blob/main/packages/grid-lite-react/LICENSE). +Commercial support packages are available, see [Highcharts Advantage](https://www.highcharts.com/highcharts-advantage/). diff --git a/packages/grid-pro-react/README.md b/packages/grid-pro-react/README.md index c5848f5..3bc94bf 100644 --- a/packages/grid-pro-react/README.md +++ b/packages/grid-pro-react/README.md @@ -1,135 +1,176 @@ -# @highcharts/grid-pro-react +# Highcharts Grid Pro React -React integration for [Highcharts Grid Pro](https://www.highcharts.com/docs/grid/general). +
-## Links +Official Highcharts Grid Pro for React -* Official website: [www.highcharts.com](https://www.highcharts.com) -* Product page: [www.highcharts.com/products/grid](https://www.highcharts.com/products/grid) -* Download: [www.highcharts.com/download](https://www.highcharts.com/download) -* License: [www.highcharts.com/license](https://www.highcharts.com/license) -* Documentation: [www.highcharts.com/docs](https://www.highcharts.com/docs/grid/frameworks/grid-with-react) -* Support: [www.highcharts.com/support](https://www.highcharts.com/support) -* Issues: [Working repo](https://github.com/highcharts/highcharts/issues) + -## Installation +

Highcharts Grid Pro for React makes integrating editable, interactive data tables into your React projects intuitive and aligned with your React workflow, built with an API refined for React patterns.

-```bash -npm install @highcharts/grid-pro-react -``` +NPM Version +NPM Downloads +Discord -## Requirements - -- React 18 or higher - -## Quick Start +
-```tsx -import React, { useState } from 'react'; -import { Grid, type GridOptions } from '@highcharts/grid-pro-react'; +## Why Highcharts Grid Pro React? -function App() { - const [options] = useState({ - dataTable: { - columns: { - name: ['Alice', 'Bob', 'Charlie'], - age: [23, 34, 45], - city: ['New York', 'Oslo', 'Paris'] - } - }, - caption: { - text: 'My Grid' - } - }); +- **JSX-Native API** - Compose grids with React components such as `Data`, `Column`, `Caption`, and `Pagination` +- **Everything in Grid Lite** - Sorting, filtering, pagination, virtualization, theming, and accessibility +- **Interactive Data Editing** - Built-in editors for text, numbers, dates, and more +- **Validation** - Keep data clean with configurable rules and custom business logic +- **Sparklines** - Show trends in-cell, including Highcharts-powered visualizations +- **React Event Props** - Hook into load, update, sort, click, and pagination events with `on*` props +- **TypeScript Ready** - First-class types for options, refs, events, and component props - return ; -} -``` +## License -## API +Grid Pro is a commercial product. Getting licensed for commercial use makes you production-ready: license, updates and support for business-critical grids. To learn more, please contact our sales team at sales@highcharts.com. You can also review our Standard License Terms and our Annual License at the links below: -### `Grid` +- [Standard License Terms](https://www.highcharts.com/license) +- [Terms & Conditions for Annual Subscription](https://shop.highcharts.com/license-annual-3.0) +- [Product page](https://www.highcharts.com/products/grid) -React component that wraps Highcharts Grid Pro. +Looking for the free edition? See [@highcharts/grid-lite-react](https://www.npmjs.com/package/@highcharts/grid-lite-react). -#### Props +## Installation -- `options` (required): Configuration options for the grid. Type: `GridOptions` -- `gridRef` (optional): React ref to access the underlying grid instance. Type: `RefObject>` -- `callback` (optional): Callback function called when the grid is initialized. Receives the grid instance as parameter. Type: `(grid: GridInstance) => void` +Install Highcharts Grid Pro React from npm: -### `GridOptions` +```bash +npm install @highcharts/grid-pro-react +``` -Type exported from the package for TypeScript support. +Or using yarn: -```tsx -import type { GridOptions } from '@highcharts/grid-pro-react'; +```bash +yarn add @highcharts/grid-pro-react ``` -### `GridRefHandle` +> **Note:** `@highcharts/grid-pro` is included as a dependency. `react` and `react-dom` are peer dependencies and are installed automatically with npm v7+. Requires React 18 or higher. -Type for the gridRef handle that provides access to the underlying grid instance. +## Quick Start -```tsx -import type { GridRefHandle } from '@highcharts/grid-pro-react'; +Pass your Grid Pro license key with `gridKey`. + +```jsx +import { + Grid, + Caption, + Data, + Column, + Pagination +} from '@highcharts/grid-pro-react'; -const gridRef = useRef | null>(null); -// Access the grid instance via gridRef.current?.grid +export function App() { + return ( + + Team directory + + + + + + + ); +} ``` -### `GridInstance` +## Grid props + +The grid is rendered inside a container. You can pass layout, theme, and Pro event props directly to `Grid`: + +```jsx + + Full-width grid + + +``` -Type for the grid instance returned by gridRef or callback. +- `gridKey` is required and sets your Grid Pro license key +- `className` applies to the React mount container +- `tableClassName` applies to the rendered table +- `theme` sets the Grid theme (`rendering.theme`) +- `onAfterLoad` and other `on*` props map to Grid Pro events -```tsx -import type { GridInstance } from '@highcharts/grid-pro-react'; -``` +You can also pass a Grid options object via the `options` prop when you prefer a configuration object over JSX children. -### Using gridRef and Callback +## TypeScript -You can access the grid instance in two ways: +Use `GridOptions` for the `Grid` component `options` prop. -**Using gridRef:** ```tsx -import { useRef } from 'react'; -import { Grid, type GridRefHandle, type GridOptions } from '@highcharts/grid-pro-react'; +import { useState } from 'react'; +import { Grid, type GridOptions } from '@highcharts/grid-pro-react'; -function App() { - const gridRef = useRef | null>(null); - - const handleClick = () => { - // Access the grid instance - const gridInstance = gridRef.current?.grid; - if (gridInstance) { - console.log('Grid instance:', gridInstance); +export function App() { + const [options] = useState({ + data: { + columns: { + name: ['Alice', 'Bob', 'Charlie'], + age: [23, 34, 45] + } } - }; + }); - return ( - <> - - - - ); + return ; } ``` -**Using callback:** +Use `GridRefHandle` and `GridInstance` when you need access to the underlying Grid instance. + ```tsx -import { Grid, type GridInstance, type GridOptions } from '@highcharts/grid-pro-react'; +import { useRef } from 'react'; +import { + Grid, + type GridOptions, + type GridRefHandle, + type GridInstance +} from '@highcharts/grid-pro-react'; + +export function App() { + const gridRef = useRef | null>(null); -function App() { - const handleGridReady = (grid: GridInstance) => { - console.log('Grid initialized:', grid); + const onGridReady = (grid: GridInstance) => { + console.log('Grid instance:', grid); }; - return ; + return ( + + ); } ``` -### Next.js Integration +## Next.js -When using this package with Next.js, you need to disable Server-Side Rendering (SSR) for the Grid component: +Grid uses browser APIs, so it must render on the client. Use a dynamic import with SSR disabled: ```tsx 'use client'; @@ -137,9 +178,7 @@ When using this package with Next.js, you need to disable Server-Side Rendering import { useState } from 'react'; import dynamic from 'next/dynamic'; import { type GridOptions } from '@highcharts/grid-pro-react'; -import '@highcharts/grid-pro/css/grid-pro.css'; -// Disable SSR for the Grid component const Grid = dynamic( () => import('@highcharts/grid-pro-react').then((mod) => mod.Grid), { ssr: false } @@ -147,7 +186,7 @@ const Grid = dynamic( export default function Page() { const [options] = useState({ - dataTable: { + data: { columns: { name: ['Alice', 'Bob', 'Charlie'], age: [23, 34, 45] @@ -155,16 +194,23 @@ export default function Page() { } }); - return ; + return ; } ``` -**Important:** The Grid component must be rendered client-side only. Always use `dynamic` import with `ssr: false` and mark your component with `'use client'` directive. +The React package loads Grid CSS automatically. See the [Next.js guide](https://www.highcharts.com/docs/grid/frameworks/nextjs) for more detail. ## Documentation -For detailed documentation on available options and features, see the [Highcharts Grid Pro documentation](https://www.highcharts.com/docs/grid/general). +For comprehensive guides and API documentation, visit the [Highcharts Grid React documentation](https://www.highcharts.com/docs/grid/frameworks/react). -## License +- [Grid Pro getting started](https://www.highcharts.com/docs/grid/getting-started/grid-pro) +- [Highcharts Grid overview](https://www.highcharts.com/docs/grid/general) + +## Support and feedback + +We love to learn how you are using Highcharts, and what you would like to see from us in the future. + +Join our vibrant community on [GitHub](https://github.com/highcharts/grid-react), [Stack Overflow](https://stackoverflow.com/tags/highcharts/), [Discord](https://discord.com/invite/xHxxcyyy6K), and the [Highcharts Forums](https://www.highcharts.com/forum/). -SEE LICENSE IN [LICENSE](https://github.com/highcharts/grid-react/blob/main/packages/grid-pro-react/LICENSE). +Commercial support packages are available, see [Highcharts Advantage](https://www.highcharts.com/highcharts-advantage/). From eb7036e3486c48edc9f59a0fa36f179044ed3434 Mon Sep 17 00:00:00 2001 From: Sebastian Bochan Date: Thu, 13 Aug 2026 14:07:05 +0200 Subject: [PATCH 2/2] Added backward compatibility path to use Grid. --- README.md | 50 +++++++++++++++++++++++++++++- packages/grid-lite-react/README.md | 30 ++++++++++++++++-- packages/grid-pro-react/README.md | 30 +++++++++++++++--- 3 files changed, 102 insertions(+), 8 deletions(-) diff --git a/README.md b/README.md index e335b55..a30e5ba 100644 --- a/README.md +++ b/README.md @@ -18,7 +18,7 @@ This is the working repository for the Grid React packages. If you want to use G ## Why Highcharts Grid React? -- **JSX-Native API** - Compose grids with React components such as `Data`, `Column`, `Caption`, and `Pagination` +- **Options or JSX** - Pass a Grid `options` object, compose with React components such as `Data`, `Column`, `Caption`, and `Pagination`, or mix both - **Lite and Pro** - Start with free Grid Lite, or use Grid Pro for editing, validation, sparklines, and events - **Self-Contained Packages** - Grid setup, cleanup, and CSS are handled for you - **Built for Large Tables** - Row virtualization keeps scrolling smooth with thousands of records @@ -50,8 +50,33 @@ npm install @highcharts/grid-pro-react ## Quick Start +Components are optional. You can pass a Grid `options` object to `` the same way as before, use JSX components, or mix both. + ### Grid Lite +Using options: + +```jsx +import { useState } from 'react'; +import { Grid, type GridOptions } from '@highcharts/grid-lite-react'; + +export function App() { + const [options] = useState({ + caption: { text: 'Team directory' }, + data: { + columns: { + name: ['Alice', 'Bob', 'Charlie'], + age: [23, 34, 45] + } + } + }); + + return ; +} +``` + +Using components: + ```jsx import { Grid, Caption, Data, Column } from '@highcharts/grid-lite-react'; @@ -74,6 +99,29 @@ export function App() { ### Grid Pro +Using options: + +```jsx +import { useState } from 'react'; +import { Grid, type GridOptions } from '@highcharts/grid-pro-react'; + +export function App() { + const [options] = useState({ + caption: { text: 'Team directory' }, + data: { + columns: { + name: ['Alice', 'Bob', 'Charlie'], + age: [23, 34, 45] + } + } + }); + + return ; +} +``` + +Using components: + ```jsx import { Grid, Caption, Data, Column } from '@highcharts/grid-pro-react'; diff --git a/packages/grid-lite-react/README.md b/packages/grid-lite-react/README.md index baf95f7..0131af7 100644 --- a/packages/grid-lite-react/README.md +++ b/packages/grid-lite-react/README.md @@ -16,7 +16,7 @@ ## Why Highcharts Grid Lite React? -- **JSX-Native API** - Compose grids with React components such as `Data`, `Column`, `Caption`, and `Pagination` +- **Options or JSX** - Pass a Grid `options` object, compose with React components such as `Data`, `Column`, `Caption`, and `Pagination`, or mix both - **Self-Contained Package** - Grid setup, cleanup, and CSS are handled for you - **Built for Large Tables** - Row virtualization keeps scrolling smooth with thousands of records - **Interactive by Default** - Sorting, filtering, and pagination without extra libraries @@ -51,6 +51,32 @@ yarn add @highcharts/grid-lite-react ## Quick Start +Components are optional. You can pass a Grid `options` object to `` the same way as before, use JSX components, or mix both. + +### Using options + +```jsx +import { useState } from 'react'; +import { Grid, type GridOptions } from '@highcharts/grid-lite-react'; + +export function App() { + const [options] = useState({ + caption: { text: 'Team directory' }, + data: { + columns: { + name: ['Alice', 'Bob', 'Charlie'], + age: [23, 34, 45], + city: ['New York', 'Oslo', 'Paris'] + } + } + }); + + return ; +} +``` + +### Using components + ```jsx import { Grid, Caption, Data, Column, Pagination } from '@highcharts/grid-lite-react'; @@ -93,8 +119,6 @@ The grid is rendered inside a container. You can pass layout and theme props dir - `tableClassName` applies to the rendered table - `theme` sets the Grid theme (`rendering.theme`) -You can also pass a Grid options object via the `options` prop when you prefer a configuration object over JSX children. - ## TypeScript Use `GridOptions` for the `Grid` component `options` prop. diff --git a/packages/grid-pro-react/README.md b/packages/grid-pro-react/README.md index 3bc94bf..900396c 100644 --- a/packages/grid-pro-react/README.md +++ b/packages/grid-pro-react/README.md @@ -16,7 +16,7 @@ ## Why Highcharts Grid Pro React? -- **JSX-Native API** - Compose grids with React components such as `Data`, `Column`, `Caption`, and `Pagination` +- **Options or JSX** - Pass a Grid `options` object, compose with React components such as `Data`, `Column`, `Caption`, and `Pagination`, or mix both - **Everything in Grid Lite** - Sorting, filtering, pagination, virtualization, theming, and accessibility - **Interactive Data Editing** - Built-in editors for text, numbers, dates, and more - **Validation** - Keep data clean with configurable rules and custom business logic @@ -52,7 +52,31 @@ yarn add @highcharts/grid-pro-react ## Quick Start -Pass your Grid Pro license key with `gridKey`. +Pass your Grid Pro license key with `gridKey`. Components are optional. You can pass a Grid `options` object to `` the same way as before, use JSX components, or mix both. + +### Using options + +```jsx +import { useState } from 'react'; +import { Grid, type GridOptions } from '@highcharts/grid-pro-react'; + +export function App() { + const [options] = useState({ + caption: { text: 'Team directory' }, + data: { + columns: { + name: ['Alice', 'Bob', 'Charlie'], + age: [23, 34, 45], + city: ['New York', 'Oslo', 'Paris'] + } + } + }); + + return ; +} +``` + +### Using components ```jsx import { @@ -108,8 +132,6 @@ The grid is rendered inside a container. You can pass layout, theme, and Pro eve - `theme` sets the Grid theme (`rendering.theme`) - `onAfterLoad` and other `on*` props map to Grid Pro events -You can also pass a Grid options object via the `options` prop when you prefer a configuration object over JSX children. - ## TypeScript Use `GridOptions` for the `Grid` component `options` prop.