SuperAPI AI 工具集

ag-grid-patterns

数据与分析

查看项目

更新于 10-16 00:04

技能介绍

用途:为 TMNL 项目提供 AG-Grid v34 的规范化集成模式,在实现数据网格、自定义单元格渲染器、主题或基于网格的 UI 时调用。

主要能力:

  1. 模块注册:必须先用 ModuleRegistry.registerModules([AllCommunityModule]) 注册,否则网格空白;使用 theme prop 时无需引入 CSS。
  2. 复合组件 API:Tmnl.DataGrid 提供 Header、Title、SettingsButton、Body、StatusBar、CornerDecorations 等子组件,每个网格拥有独立 Effect 运行时。
  3. GridVariant 变体系统:编码密度、颜色、行为、排版,含 dense/compact/normal/comfortable 密度预设与 readonly/interactive/editable/minimal 行为预设。
  4. Flash 系统:按增量映射 none/low/medium/high/critical 严重度,通过 useFlashTracker 处理更新并高亮单元格。
  5. DataGridContext:提供 gridId、runtime、variant、rowData、columnDefs、gridApi、flash 等,支持必需与可选两种获取方式。
  6. 上下文感知渲染器:使用 useDataGridContextMaybe 并提供 token 回退色。
  7. 混合拖拽:从 AG-Grid 行拖到 tldraw 画布,按是否越出网格边界切换阶段并生成 ghost 形状。
  8. 主题合成:composeAgGridTheme 将 GridVariant 转为 themeQuartz.withParams。

使用方式:按决策树选择——简单网格用 AgGridReact 加 composeAgGridTheme;带头部与状态栏用 Tmnl.DataGrid;tldraw 内用 V2 形状;实时闪烁用 useFlashTracker 加 FlashValueRenderer;自定义变体克隆 tmnlDenseDark 修改。

限制与反模式:禁止引入 ag-grid CSS 文件;禁止缺少模块注册;跨边界数据禁用 useState,改用 Atom.make 与服务方法;禁止绕过变体系统直接定制主题;渲染器必须提供上下文回退;禁止在组件内创建 Atom。

资料未提供该技能的安装命令、收费方式与适用平台信息。