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

反应集成 AG 网格 在内部 融合框架 应用.

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

谁应该使用这个

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

快速启动

安装

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

启用模块

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

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

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

显示网格

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 解决类型解析问题.

关键概念

API 表面

主要入口点@equinor/fusion-framework-react-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(中文(简体) )

常见模式

自定义全局主题

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

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

[TIP] AG网格有一个 主题构建器 页:1 预览和生成自定义主题参数.

每个网格实例覆盖主题

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

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数字 :

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

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-图 用于独立的图表使用.

测试

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

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

suppressAgGridLicenseBanner();

更新指南

升级到 v35

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

// 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 应安装.