React 中原生支持使用 JSX 组件配置自定义表格 Highcharts Grid

前言

在线可编辑表格 Highcharts Grid 迎来了对 React 更加友好的全新开发方式。经过重构的 Highcharts Grid React 包，现在支持使用 JSX 组件来配置 Grid Lite（轻量版表格）与 Grid Pro（专业版表格），开发者可以直接在 React 项目里更轻松地搭建、自定义数据表格。

你不再需要把全部配置写在一个 JS 配置对象中，而是可以通过独立组件来描述表格的数据、列、表头、分页等能力。

如果你已经在 React 项目中接入了 Highcharts Grid，无需重写原有代码。传统基于 options 的配置 API 仍然完全可用，甚至可以在同一个表格实例里混合两种写法。

用 React 的方式构建表格

React 开发者早已习惯基于组件的开发模式。这套全新的 JSX API，把同样的组件化思想带到了 Highcharts Grid。

举个例子，下面是一个展示员工信息的简易表格：

javascript 复制代码

import { Grid, Data, Column, Caption } from '@highcharts/grid-lite-react';

export default function EmployeeGrid() {
  return (
    <Grid>
      <Caption>团队通讯录</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>
  );
}

结构非常清晰：

<Grid> 是表格根容器，<Data> 用于注入数据源，每一个 <Column> 单独配置一列的展示规则。

由于表格配置和其他业务 JSX 写在一起，表格结构一目了然。想要调整某一项配置时，不用在庞大的 options 对象里逐层查找。

这套设计思路和新版 Highcharts React 图表包保持一致，让 Highcharts 的图表组件、Grid 表格组件在 React 项目里拥有统一的开发体验。

JSX、Options 配置，或是两者混用，随你选择

不同项目的开发习惯不一样。

有的开发者偏爱 JSX 直观的可读性，也有不少项目已经基于 Highcharts Grid 传统 JS 配置API沉淀了大量配置代码。重构后的包同时支持两种模式。

你可以全部使用 JSX 组件搭建表格；也可以继续通过 options 属性传入配置对象；还可以两种方案混合使用。

混合写法示例：

javascript 复制代码

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>
  );
}

在这个示例中，JS 配置对象开启了行虚拟滚动，而数据和列定义交给 JSX 组件声明。两套配置会自动合并；如果同一个配置项在两处同时定义，根节点上的 options 优先级更高。

这种灵活度，方便团队渐进式接入新 JSX API，不用一次性改造存量业务，不会破坏已有功能。

样式、事件、实例获取

本次升级还给根组件 <Grid> 新增了一批常用属性，大幅简化和 React 项目的集成工作：

className：给外层 React 容器添加 CSS 类名
tableClassName：给底层原生表格标签添加样式类
theme：直接通过属性配置表格主题

如果业务代码需要拿到底层 Grid 实例，可以通过 gridRef 或者回调 callback 获取实例对象。

Grid Pro 还支持 React 风格事件绑定，以 on* 开头的事件属性，支持加载、单元格交互、排序、分页等各类表格事件。

这些能力组合起来，让 Highcharts Grid 更容易和周边 React 业务代码联动，同时表格配置代码清晰、便于长期维护。

内置 TypeScript 类型支持

新版 npm 包自带完整 TS 类型定义，包含表格配置项、组件属性、实例引用类型；Grid Pro 额外提供所有事件属性的类型。

使用 TypeScript 开发的同学，可以直接获得编辑器自动补全、静态类型校验，不用再靠猜属性名和入参格式，减少类型相关bug。

完全向后兼容

已经在用 Highcharts Grid React 的项目不用担心：原有代码可以照常运行。

新版本完整保留 options 属性，100% 向下兼容旧版本 。之前直接写 <Grid options={...} /> 的代码无需任何修改。

你可以继续沿用传统 options 写法，也可以在合适的时候，在项目里逐步引入 JSX 组件。

快速上手

这套全新 JSX API 同时支持 Grid Lite 和 Grid Pro。根据需求安装对应包：

bash 复制代码

# Grid Lite（轻量版）
npm install @highcharts/grid-lite-react

# Grid Pro（专业版）
npm install @highcharts/grid-pro-react

两个包都要求 React 版本 ≥ 18。

注意：在 Next.js 项目中，Highcharts Grid 依赖浏览器 BOM API，必须在客户端渲染。可以查阅官方 Next.js 集成文档获取推荐方案。 Grid Pro 用户可以直接通过 gridKey 属性传入授权密钥。

参考资料：

官方React快速入门文档：Getting started | Highcharts
Github仓库：GitHub - highcharts/grid-react · GitHub
Highcharts Grid产品主页：https://www.highcharts.com/products/grid/