diff --git a/README.md b/README.md index 18b57d8..a30e5ba 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. + +## Why Highcharts Grid React? + +- **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 +- **Accessibility First** - Semantic HTML tables with keyboard navigation and screen reader support +- **TypeScript Ready** - First-class types for options, refs, events, and component props -This monorepo contains the following packages: +## 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,17 +46,24 @@ 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. + +## 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 +### Grid Lite -```tsx -import React, { useState } from 'react'; +Using options: + +```jsx +import { useState } from 'react'; import { Grid, type GridOptions } from '@highcharts/grid-lite-react'; -function App() { +export function App() { const [options] = useState({ - dataTable: { + caption: { text: 'Team directory' }, + data: { columns: { name: ['Alice', 'Bob', 'Charlie'], age: [23, 34, 45] @@ -49,15 +75,40 @@ function App() { } ``` -#### Grid Pro +Using components: + +```jsx +import { Grid, Caption, Data, Column } from '@highcharts/grid-lite-react'; + +export function App() { + return ( + + Team directory + + + + + ); +} +``` + +### Grid Pro + +Using options: -```tsx -import React, { useState } from 'react'; +```jsx +import { useState } from 'react'; import { Grid, type GridOptions } from '@highcharts/grid-pro-react'; -function App() { +export function App() { const [options] = useState({ - dataTable: { + caption: { text: 'Team directory' }, + data: { columns: { name: ['Alice', 'Bob', 'Charlie'], age: [23, 34, 45] @@ -65,10 +116,37 @@ function App() { } }); - return ; + return ; +} +``` + +Using components: + +```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 +154,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 +198,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 +210,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 +223,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 -``` - -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 } -); +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. -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..0131af7 100644 --- a/packages/grid-lite-react/README.md +++ b/packages/grid-lite-react/README.md @@ -1,45 +1,73 @@ -# @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.

+ +NPM Version +NPM Downloads +Discord + +
+ +## Why Highcharts Grid Lite React? + +- **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 +- **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 + +## License + +Highcharts Grid Lite is free to use. Review the license terms at the links below: + +- [Standard License Terms](https://www.highcharts.com/license) +- [Product page](https://www.highcharts.com/products/grid) + +Need editing, validation, sparklines, or events? See [@highcharts/grid-pro-react](https://www.npmjs.com/package/@highcharts/grid-pro-react). ## Installation +Install Highcharts Grid Lite React from npm: + ```bash npm install @highcharts/grid-lite-react ``` -## Requirements +Or using yarn: -- React 18 or higher +```bash +yarn add @highcharts/grid-lite-react +``` + +> **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. ## Quick Start -```tsx -import React, { useState } from 'react'; +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'; -function App() { +export function App() { const [options] = useState({ - dataTable: { + caption: { text: 'Team directory' }, + data: { columns: { name: ['Alice', 'Bob', 'Charlie'], age: [23, 34, 45], city: ['New York', 'Oslo', 'Paris'] } - }, - caption: { - text: 'My Grid' } }); @@ -47,90 +75,110 @@ function App() { } ``` -## API - -### `Grid` - -React component that wraps Highcharts Grid Lite. - -#### Props - -- `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` +### Using components -### `GridOptions` +```jsx +import { Grid, Caption, Data, Column, Pagination } from '@highcharts/grid-lite-react'; -Type exported from the package for TypeScript support. - -```tsx -import type { GridOptions } from '@highcharts/grid-lite-react'; +export function App() { + return ( + + Team directory + + + + + + + ); +} ``` -### `GridRefHandle` - -Type for the gridRef handle that provides access to the underlying grid instance. +## Grid props -```tsx -import type { GridRefHandle } from '@highcharts/grid-lite-react'; +The grid is rendered inside a container. You can pass layout and theme props directly to `Grid`: -const gridRef = useRef | null>(null); -// Access the grid instance via gridRef.current?.grid +```jsx + + Full-width grid + + ``` -### `GridInstance` +- `className` applies to the React mount container +- `tableClassName` applies to the rendered table +- `theme` sets the Grid theme (`rendering.theme`) -Type for the grid instance returned by gridRef or callback. +## TypeScript -```tsx -import type { GridInstance } from '@highcharts/grid-lite-react'; -``` - -### Using gridRef and Callback - -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-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 +186,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 +194,7 @@ const Grid = dynamic( export default function Page() { const [options] = useState({ - dataTable: { + data: { columns: { name: ['Alice', 'Bob', 'Charlie'], age: [23, 34, 45] @@ -160,12 +206,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..900396c 100644 --- a/packages/grid-pro-react/README.md +++ b/packages/grid-pro-react/README.md @@ -1,135 +1,198 @@ -# @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) + + +

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.

+ +NPM Version +NPM Downloads +Discord + +
+ +## Why Highcharts Grid Pro React? + +- **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 +- **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 + +## License + +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: + +- [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) + +Looking for the free edition? See [@highcharts/grid-lite-react](https://www.npmjs.com/package/@highcharts/grid-lite-react). ## Installation +Install Highcharts Grid Pro React from npm: + ```bash npm install @highcharts/grid-pro-react ``` -## Requirements +Or using yarn: -- React 18 or higher +```bash +yarn add @highcharts/grid-pro-react +``` + +> **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. ## Quick Start -```tsx -import React, { useState } from 'react'; +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'; -function App() { +export function App() { const [options] = useState({ - dataTable: { + caption: { text: 'Team directory' }, + data: { columns: { name: ['Alice', 'Bob', 'Charlie'], age: [23, 34, 45], city: ['New York', 'Oslo', 'Paris'] } - }, - caption: { - text: 'My Grid' } }); - return ; + return ; } ``` -## API - -### `Grid` - -React component that wraps Highcharts Grid Pro. - -#### Props - -- `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` +### Using components -### `GridOptions` +```jsx +import { + Grid, + Caption, + Data, + Column, + Pagination +} from '@highcharts/grid-pro-react'; -Type exported from the package for TypeScript support. - -```tsx -import type { GridOptions } from '@highcharts/grid-pro-react'; +export function App() { + return ( + + Team directory + + + + + + + ); +} ``` -### `GridRefHandle` - -Type for the gridRef handle that provides access to the underlying grid instance. - -```tsx -import type { GridRefHandle } from '@highcharts/grid-pro-react'; - -const gridRef = useRef | null>(null); -// Access the grid instance via gridRef.current?.grid +## 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 + + ``` -### `GridInstance` +- `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 -Type for the grid instance returned by gridRef or callback. +## TypeScript -```tsx -import type { GridInstance } from '@highcharts/grid-pro-react'; -``` +Use `GridOptions` for the `Grid` component `options` prop. -### Using gridRef and Callback - -You can access the grid instance in two ways: - -**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 +200,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 +208,7 @@ const Grid = dynamic( export default function Page() { const [options] = useState({ - dataTable: { + data: { columns: { name: ['Alice', 'Bob', 'Charlie'], age: [23, 34, 45] @@ -155,16 +216,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/).