# @equinor/fusion-framework-react-ag-grid 中文文档

规范地址：https://npmcn.com/package/%40equinor/fusion-framework-react-ag-grid/

版本：37\.1\.5
npm 元数据更新时间：2026-11-12T09:55:16.112Z
中文译文更新时间：2026-11-13T20:53:07.228Z
软件包许可：ISC

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40equinor/fusion-framework-react-ag-grid
原文对照：https://npmcn.com/package/%40equinor/fusion-framework-react-ag-grid/?lang=original
源码仓库：https://github.com/equinor/fusion-framework

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：548 kB，28 个文件
- 模块格式：ES Module
- TypeScript 类型：包内自带
- 运行依赖：4 个
- peer 依赖：react ^18\.0\.0 \|\| ^19\.0\.0，react-dom ^18\.0\.0 \|\| ^19\.0\.0，@equinor/fusion-framework-react-module ^4\.0\.7
- 首次发布：2025-02-11T14:19:16.798Z
- 最新版本发布：2026-11-12T09:55:15.743Z
- 近 30 天下载量：4791（2026-10-14 至 2026-11-12，npm 官方下载统计）
- 已发布版本数：66（近 12 个月 30 个）

## 中文简介

使用 AG 网格的聚合模块

## 安装

```sh
npm install @equinor/fusion-framework-react-ag-grid
```

也可以使用：`pnpm add @equinor/fusion-framework-react-ag-grid`、`yarn add @equinor/fusion-framework-react-ag-grid`、`bun add @equinor/fusion-framework-react-ag-grid`

## README

# @ equinor/ 聚变框架- 反应- ag- grid

反应集成 [AG 网格](https://www.ag-grid.com/) 在内部 **融合框架** 应用.

这个软件包提供了预配置的AG Grid设置,与Equinor设计系统的主题,许可证管理,模块注册——因此应用程序中的每个网格都共享了盒子中一致的样式和配置.

## 谁应该使用这个

任何Fusion Framework React 应用程序都需要一个数据网格,其中包含排序,过滤,分组,内置编辑,或Excel导出. 如果你在Fusion框架之外建立一个独立应用程序,请使用 `ag-grid-react` 直接换成.

## 快速启动

### 安装

```sh
pnpm add @equinor/fusion-framework-react-ag-grid
```

### 启用模块

在应用程序配置中注册 AG 网格模块 :

```ts
import { enableAgGrid } from '@equinor/fusion-framework-react-ag-grid';

export const configure = (configurator) => {
  enableAgGrid(configurator);
};
```

### 显示网格

```tsx
import { AgGridReact } from '@equinor/fusion-framework-react-ag-grid';
import { useTheme } from '@equinor/fusion-framework-react-ag-grid';
import type { ColDef } from '@equinor/fusion-framework-react-ag-grid/community';

const columns: ColDef[] = [
  { field: 'name' },
  { field: 'age', filter: 'agNumberColumnFilter' },
];

const MyGrid = ({ rows }) => {
  const theme = useTheme();
  return <AgGridReact theme={theme} rowData={rows} columnDefs={columns} />;
};
```

> \[大 由于AG Grid 类型是从此套件再导出, TypeScript 可能有 很难解决他们。 设定 `"moduleResolution": "bundler"` 在你身边 `tsconfig.json` 解决类型解析问题.

## 关键概念

| 概念 | 说明 |
| --- | --- |
| **`enableAgGrid`** | 注册 AG 网格融合模块。 为主题、许可证和模块定制接受可选的构建者调用. |
| **`useTheme`** | 返回活动的 AG 网格的反应钩子 `Theme` 从模块系统. |
| **`fusionTheme`** | AG Grid Alpine上方应用 Equinor 字体和 EDS 口音颜色的默认主题. |
| **`createTheme`** | 为完全自定义样式创建新的空白 AG 网格主题. |

## API 表面

### 主要入口点`@equinor/fusion-framework-react-ag-grid`(中文(简体) )

| 导出 | 仁爱 | 说明 |
| --- | --- | --- |
| `AgGridReact` | 构成部分 | 用于渲染 AG Grid 实例的回放包装 . |
| `AgGridReactProps` | 类型 | 接受的主张 `AgGridReact`。 。 。 . |
| `enableAgGrid` | 函数 | 在聚合配置器上注册 AG 网格模块. |
| `IAgGridProvider` | 接口 | 只读提供者曝光已解决的许可密钥和主题 . |
| `fusionTheme` | 常数 | 预建的基于EDS的AG Grid主题. |
| `createTheme` | 函数 | 创建空白的 AG 网格主题. |
| `Theme` | 类型 | AG Grid主题类型. |

### 社区入口`@equinor/fusion-framework-react-ag-grid/community`(中文(简体) )

再出口一切从 `ag-grid-community` ——列定义,单元格渲染器,行模型,事件,以及公用设施.

### 企业入口`@equinor/fusion-framework-react-ag-grid/enterprise`(中文(简体) )

再出口一切从 `ag-grid-enterprise` ——行组,树数据,服务器侧行模型,Excel导出,集成图等. 需要有效的许可密钥 .

### 反应出入口( R)`@equinor/fusion-framework-react-ag-grid/react`(中文(简体) )

再出口一切从 `ag-grid-react` ——部件,道具,钩子等公用事业.

### 主题入站点( E)`@equinor/fusion-framework-react-ag-grid/themes`(中文(简体) )

| 导出 | 仁爱 | 说明 |
| --- | --- | --- |
| `fusionTheme` | 常数 | 默认融合/ EDS AG Grid 主题 . |
| `createTheme` | 函数 | 创建空白主题. |
| `createThemeFromTheme` | 函数 | 克隆一个跨模块边界的主题( 由于 AG Grid 需要) `instanceof` 检查). |
| `Theme` | 类型 | AG Grid主题类型. |

## 常见模式

### 自定义全局主题

模块配置时覆盖主题参数 :

```ts
enableAgGrid(configurator, (builder) => {
  builder.setTheme((theme) => {
    return theme.withParams({
      backgroundColor: '#1f2836',
      browserColorScheme: 'dark',
      foregroundColor: '#FFF',
      headerFontSize: 14,
    });
  });
});
```

> \[TIP\] AG网格有一个 [主题构建器](https://www.ag-grid.com/theme-builder/) 页:1 预览和生成自定义主题参数.

### 每个网格实例覆盖主题

使用 `useTheme` 以获取基准主题,然后为特定网格自定义:

```tsx
import { useTheme } from '@equinor/fusion-framework-react-ag-grid';
import { AgGridReact } from '@equinor/fusion-framework-react-ag-grid';
import { useMemo, useState } from 'react';

const MyComponent = () => {
  const baseTheme = useTheme();
  const [hasError, setHasError] = useState(false);

  const theme = useMemo(
    () => baseTheme.withParams({ cellTextColor: hasError ? '#FF0000' : undefined }),
    [baseTheme, hasError],
  );

  return <AgGridReact theme={theme} /* ...other props */ />;
};
```

### 使用 AG 网格集成图

安装单独的图表包并注册 `IntegratedChartsModule`数字 :

```sh
pnpm add @equinor/fusion-framework-react-ag-charts
```

```ts
import { IntegratedChartsModule } from '@equinor/fusion-framework-react-ag-grid/enterprise';
import { AgChartsEnterpriseModule } from '@equinor/fusion-framework-react-ag-charts/enterprise';

enableAgGrid(configurator, (builder) => {
  builder.addModule(IntegratedChartsModule.with(AgChartsEnterpriseModule));
});
```

> \[注\] AG Charts是自v35起的独立包. 见 [@equinor/核聚变-框架-反应-ag-图](https://npmcn.com/package/%40equinor/ag-charts/README.md) 用于独立的图表使用.

## 测试

没有许可证密钥, AG Grid Entertainment 登录一个"License Key Not found" 横幅通过 `console.error` 每个网格挂起。 打电话 `suppressAgGridLicenseBanner` 一次从测试设置文件中过滤到这个横幅:

```ts
// src/test/setupTests.ts
import { suppressAgGridLicenseBanner } from '@equinor/fusion-framework-react-ag-grid/testing';

suppressAgGridLicenseBanner();
```

## 更新指南

### 升级到 v35

**AG 图表已分离**: 图表功能已移动到 `@equinor/fusion-framework-react-ag-charts`。 。 。 .

```ts
// Before (v34)
import { AgChartsEnterpriseModule } from '@equinor/fusion-framework-react-ag-grid/enterprise';

// After (v35)
import { IntegratedChartsModule } from '@equinor/fusion-framework-react-ag-grid/enterprise';
import { AgChartsEnterpriseModule } from '@equinor/fusion-framework-react-ag-charts/enterprise';

enableAgGrid(configurator, (builder) => {
  builder.addModule(IntegratedChartsModule.with(AgChartsEnterpriseModule));
});
```

**同伴依赖关系**: 更新到 `ag-grid-community` 财务报告和审定财务报表 `ag-grid-enterprise` >= 35.1.0.

### 从v32升级到v33

删除以前所有引用 `@equinor/fusion-react-ag-grid-styles`, (中文(简体) ), `@ag-grid-community/*`,以及 `@ag-grid-enterprise/*` 从您的项目 依赖性。 仅 `@equinor/fusion-framework-react-ag-grid` 应安装.

## 常见问题

### @equinor/fusion-framework-react-ag-grid 是什么？

使用 AG 网格的聚合模块

### 如何安装 @equinor/fusion-framework-react-ag-grid？

在项目目录运行 npm install @equinor/fusion-framework-react-ag-grid，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：react（^18\.0\.0 \|\| ^19\.0\.0）、react-dom（^18\.0\.0 \|\| ^19\.0\.0）、@equinor/fusion-framework-react-module（^4\.0\.7）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @equinor/fusion-framework-react-ag-grid 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @equinor/fusion-framework-react-ag-grid 支持 ESM 还是 CommonJS？

以 ES Module 形式发布，推荐使用 import 引入。在 CommonJS 项目中，Node\.js 20\.19\+ / 22\.12\+ 可以直接 require\(\) 不含顶层 await 的 ES Module，更早的版本需要改用动态 import\(\)。

### @equinor/fusion-framework-react-ag-grid 可以商用吗？

@equinor/fusion-framework-react-ag-grid 使用 ISC 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @equinor/fusion-framework-react-ag-grid 的下载量有多少？

根据 npm 官方下载统计，@equinor/fusion-framework-react-ag-grid 在 2026/10/14 – 2026/11/12 这 30 天内被下载 4,791 次，日均约 160 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @equinor/fusion-framework-react-ag-grid 还在维护吗？

最新版本 37\.1\.5 发布于 2026/11/12（1 天前）；至今共发布 66 个版本，其中过去 12 个月发布了 30 个；首次发布于 2025/02/11。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。