RevoGrid DataGrid MCP

使用 StencilJS 构建的强大数据网格组件。

高效渲染 100 多万行、数百万个单元格和数千列，网格没有硬性行数上限。

欧洲和美国的一些大型公司都在使用。

演示和 API • 主要功能 • 专业版功能 • 使用方法 • 安装 • 文档 • 许可证

RevoGrid Material 主题。

主要功能

• 高性能：渲染 100 多万行和数百万个单元格，网格没有硬性行数上限。虚拟化让 DOM 专注于可见视口。

• 无障碍支持：遵循 WAI-ARIA 最佳实践。

• RTL 支持：全面支持阿拉伯语、希伯来语、波斯语及其他 RTL 语言。提供自动列重排、正确的文本对齐方式以及针对 RTL 界面的布局调整。

• 键盘支持：

  • 类似 Excel 的焦点操作，便于高效导航和编辑。
  • 可与 Excel、Google Sheets 或其他任何表格格式无缝复制和粘贴。

• 轻量：初始包体积小。可搭配 polyfill 导入，也可作为模块用于现代浏览器。

• 智能虚拟 DOM：智能重组行，尽可能减少重绘。

• 虚拟滚动：处理大型数据集时，无需将每一行或每一列都渲染到 DOM 中。

• 拖放：行和列均支持拖放。

• 排序：提供多种选项，可按列自定义，并支持高级事件处理。

• 筛选：

  • 预定义系统筛选器。
  • 多列筛选。
  • 条件筛选。
  • 保留现有集合。
  • 选择。
  • 滑块。
  • 表头筛选。
  • 自定义筛选器，可扩展系统筛选器并加入自定义选项。 空白筛选器会保留源值的身份和自有属性的存在状态。默认情况下， null、自有的 undefined、恰好为 "" 的值以及缺少的自有属性都视为空白； 仅含空白字符的字符串、false、0、NaN、数组和对象则不视为空白。此 策略可在网格级别配置，并可通过 blankSemantics 按列逐字段覆盖。现有保存的 empty 和 notEmpty 操作符 ID 仍兼容，标签显示为“为空白”和“非空白”。

  const filter = {
    blankSemantics: {
      whitespaceOnlyString: true,
      emptyArray: true,
      isBlank(value, context, fallbackResult) {
        return value === 'N/A' || fallbackResult;
      },
    },
  };
  
  const columns = [{
    prop: 'tags',
    filter: 'array',
    // Partial column policy; other fields inherit the grid policy.
    blankSemantics: { emptyArray: false },
  }];
  

  继承的属性视为缺失。cellParser 为普通比较提供值，但不会替代空白检查所用的 原始值。回调会接收源值、行模型、列、属性、解析后的值、自有属性状态、有效 策略和回退结果。“非空白”是已解析空白谓词的精确反向结果。类型化操作符 仍保持严格；空白配置绝不会将 false、0 或数组规范化为其他源值。

• 导出：

  • CSV：为 RevoGrid 核心数据工作流提供内置文件导出。
  • PDF：使用轻量级 @revolist/revogrid-pdf-export 插件在浏览器端导出 PDF。
  • Excel（Pro）：为 RevoGrid Pro 导出工作簿，支持布局、样式、冻结窗格、合并单元格和公式。

• 自定义尺寸：为列和行定义自定义尺寸。根据内容自动调整尺寸。

• 调整列宽：调整列宽。

• 调整行高：从行标题边缘调整大小，或启用整行调整边缘，并可设置高度限制。

• 自动调整列宽：智能调整列宽以自动适应内容，确保最佳可读性和布局效率。

• 固定／粘性／冻结元素：

  • 列（设为左侧或右侧）。
  • 行（设为顶部或底部）。

• 分组：

  • 列分组（嵌套表头）。
  • 列分组下钻：折叠分组列以精简网格视图，移除不必要的列并改善数据组织。非常适合专注于最重要的信息，同时保持工作区整洁高效。
  • 行分组（嵌套行）。

• 列类型：更多详情

  • 文本／字符串（默认）。
  • 数字。
  • 选择／下拉列表。
  • 日期。
  • 自定义（使用任意模板创建扩展样式）。

• 范围操作：

  • 选择。
  • 编辑。

• 主题包：

  • 类 Excel（默认）。
  • Material（紧凑、深色或浅色）。

• 可扩展性：提供现代 VNode 功能和 tsx 支持，便于扩展。

• 修剪行：按需隐藏行。

• 插件系统：轻松创建自定义插件或扩展现有插件。

• 自定义项：

  • 列标题模板。
  • 行标题模板。
  • 单元格属性（为渲染后的单元格定义自定义属性）。
  • 单元格模板（创建自己的单元格视图）。
  • 单元格编辑器（使用预定义编辑器，或应用自己的自定义编辑器和单元格类型）。

• AI Agent 和 MCP：将 Codex、Cursor、Claude Code 和 VS Code 连接到 RevoGrid 文档、示例、迁移指南、功能可用性和类型化 API 上下文，并确保内容与版本对应。

• 丰富的 API 和其他改进：探索 RevoGrid 中数百项其他小型自定义和改进。

RevoGrid Pro 功能

RevoGrid Pro 通过面向生产环境的插件扩展核心网格，支持高级数据录入、分析、布局、验证、远程数据工作流和企业级规划。

• 高级数据结构：

  • 分层数据视图：显示树形数据，并支持展开行、嵌套关系、排序、筛选、编辑和便于拖放的层级处理。
  • 行转置：当用户需要像纵向表单式网格一样查看单个实体时，将记录转换为按行显示的视图。

• 标题、列和网格结构：

  • 多级标题 / 列分组：构建堆叠式嵌套标题，使相关列可以归入共享的父级分组。
  • 多行标题：渲染多行标题，适用于密集表格、分组标签或类似电子表格的标题布局。
  • 列分组面板：允许用户将列拖入分组面板，以交互方式创建行分组。
  • 列分组渲染同步：在移动列、调整列大小和更新虚拟化内容时，保持分组标题渲染对齐。
  • 带分组的列移动：移动列时保留分组标题关系和有效的分组边界。
  • 列折叠与展开（下钻）：折叠分组列以聚焦摘要信息，并在需要查看详情时展开。
  • 隐藏列：隐藏和显示列以创建聚焦视图，而不修改底层数据集。
  • 添加列弹出窗口：提供从可用字段定义中添加列的 UI 流程。
  • 列选择：从标题中选择整列，以便进行批量操作、复制、格式设置或分析。
  • 列拉伸：在遵循尺寸约束的同时，分配列宽以填满可用网格空间。
  • 列自动调整大小：测量内容并自动调整列宽，以提高可读性。
  • 合并单元格：跨行和跨列合并单元格，用于分组标签、报告或类似电子表格的布局。
  • 自动合并 / 相同值合并：自动合并值相同的相邻单元格，以减少视觉重复。
  • 粘性单元格和行：滚动时保持重要的行、单元格、总计、标签或操作区域可见。
  • 覆盖层：在网格上方显示临时 UI 层，以实现更丰富的交互，同时保留主网格。

• 远程数据和大型数据集工作流：

  • 服务器加载与无限滚动：在用户滚动时加载远程数据，并控制大型数据集的内存和 DOM 用量。
  • 无限滚动：支持基于总数或动态的滚动模式，按块获取和释放行。
  • 分页：将大型数据集拆分为按页显示的视图，并提供内置导航控件。
  • 远程分页：保持页索引、页大小、总数和服务器加载的行与网格同步。
  • 服务器端分组：从远程来源请求分组行块，按需展开分组路径，并将分组与远程筛选、排序和导出结合使用。

• 数据管理和变更跟踪：

  • 审计跟踪历史记录：记录数据变更历史，以便追溯、审查并支持合规工作流。
  • 历史记录：跟踪用户编辑，并为网格变更提供撤销/重做控件。
  • 历史记录控件：添加现成的 UI 控件，用于在撤销和重做堆栈中导航。
  • 范围应用预览：在将复制、粘贴或填充变更应用到目标单元格之前进行预览。
  • 智能自动填充：根据初始值、序列或模式填充范围，加快重复数据录入。
  • Excel 导出/导入：导出和导入包括 xlsx、xlsm、xlsb 和 xls 在内的 Excel 工作簿格式。
  • 多列导出标题：导出结构化网格时保留分组和多级列标题。
  • 支持 JSON 的剪贴板：复制和粘贴结构化 JSON/对象值，同时保留对解析和渲染的控制。

• 选择和范围操作：

  • 多范围选择：使用多个选定范围，支持类似电子表格的复制、编辑和交互工作流。
  • 范围选择限制：通过可配置的限制约束选定范围，以保护性能并遵循工作流规则。
  • 行复选框选择：通过复选框控件选择行，支持批量选择并提供便于键盘操作的行为。
  • 高级行拖放：通过自定义拖动手柄、多行操作和受控的放置处理来重新排序行。
  • 行展开：添加可展开的行控件，用于显示详情视图、子项或自定义行内容。
  • 自定义行标题：自定义行标题内容，用于显示标签、操作或上下文行信息。

• 筛选、搜索和分组：

  • 高级选择筛选：使用多条件选择控件筛选分类数据。
  • 选择筛选级联：级联筛选条件，使每个选项都能缩小依赖筛选器中的可用值范围。
  • 高级滑块筛选：通过范围滑块筛选数值。
  • 标题输入筛选：在标题区域放置筛选输入框，以便快速搜索各列。
  • 日期筛选：根据特定日期条件和范围筛选时间数据。
  • 行分组拖放：将字段拖入面板，动态对行进行分组。
  • 分组聚合：计算分组摘要，例如总和、平均值、计数、最小值和最大值。
  • 服务端分组聚合：结合远程分组数据与服务端返回的聚合值。

• 计算和公式：

  • 公式引擎：添加类似 Excel 的公式，支持单元格引用、动态计算和丰富的函数集。
  • 公式栏：为用户提供专用区域，用于查看和编辑公式。
  • 公式名称管理器：为公式定义可重复使用的命名引用。
  • 公式依赖项高亮：高亮相关单元格，帮助用户理解公式的输入和输出。
  • 摘要标题：在标题级 UI 中呈现计算后的摘要值。

• 数据可视化和单元格渲染：

  • 单元格图表：呈现紧凑的可视化内容，例如进度线、带数值的进度线、迷你图、条形图、时间线、评分星级、徽章、变更指示器、点赞图标和饼图。
  • 冷热图：使用渐变色和图例对数值进行颜色编码，帮助用户快速比较大小。
  • 条件格式：根据单元格值、行数据或自定义逻辑应用样式规则。
  • 多单元格格式：根据行级条件，在同一列中选择不同的渲染器或编辑器。
  • 单元格闪烁：突出显示最近变更的值，方便发现实时更新。
  • 头像、徽章、进度、评分、链接和图表列类型：使用现成的渲染器展示常见的数据可视化模式。
  • 数组渲染器：使用专用渲染器在单元格中显示类数组值。
  • 按钮：在网格单元格中添加操作按钮，以执行行级命令。

• 编辑与数据录入：

  • 动态表单编辑：通过生成的表单编辑行数据，支持自定义选项和更丰富的输入方式。
  • 整行编辑：将一行中的多个列作为一个协调的编辑流程进行编辑。
  • 单元格复选框编辑器：使用既可作为渲染器又可作为编辑器的复选框单元格。
  • 单元格滑块编辑器：通过内嵌滑块编辑有界数值。
  • 单元格计数器编辑器：通过加减控件和可配置步长调整数值。
  • 文本区域编辑器：无需离开网格即可编辑较长的文本值。
  • 下拉列表编辑器：通过下拉列表或自定义弹出窗口编辑值。
  • 时间线编辑器：通过可视化控件编辑日期范围和类似时间线的值。
  • 单元格验证：突出显示无效单元格，并通过自定义规则阻止或引导无效编辑。
  • 输入验证：在编辑器输入提交到网格之前进行验证。

• 用户交互与用户体验：

  • 上下文菜单：为单元格、行、列和表头构建菜单，提供剪切、复制、粘贴、插入、删除和自定义命令等操作。
  • 工具提示：悬停在单元格或自定义网格元素上时显示上下文信息。
  • 下一行焦点（WCAG）：在数据录入工作流中自动将焦点移至下一行。
  • WCAG 辅助工具：改进面向键盘和屏幕阅读器的网格工作流。
  • 单元格焦点辅助工具：扩展自定义编辑和导航场景中的焦点行为。
  • 信息面板：在网格交互周围显示上下文状态或辅助信息。
  • 加载器：远程数据、导出或长时间运行的操作进行时显示加载状态。

• 开发与集成：

  • 事件管理器：通过一个受管理的层协调网格事件，以便更轻松地自定义和清理。
  • 可观察属性：响应属性变化，并将插件状态与网格配置同步。
  • 插件依赖项：当功能需要协同工作时，声明并解析插件之间的关系。
  • 尺寸动画：为行和列的尺寸变化添加动画，使布局过渡更流畅。
  • 下拉列表基础设施：为自定义编辑器和插件 UI 重用弹出窗口／下拉列表服务。
  • 网格预设和实用工具：组合可重用的网格配置、辅助函数和共享插件行为。

• 企业分析与规划：

  • 数据透视表：构建多维分析，支持动态行、列和值维度；内置和自定义聚合；分层行；生成的列组；扁平表头；总计和小计；值置于行中的布局；行和列下钻；分组聚合值；拖放配置；紧凑字段面板；服务端引擎／存储契约；远程排序和筛选；下钻契约；字段注册表验证；缓存键；可序列化错误；以及状态保存／加载。
  • 数据透视表配置器：为用户提供拖放式 UI，以选择数据透视表的行、列、值、筛选器和字段布局。
  • 甘特图与调度：使用任务、依赖项、日历、资源、分配和基线模型规划项目；支持摘要任务和里程碑；WBS 层级；自动调度；工作日历和节假日；受约束的调度；依赖项验证；FS、SS、FF 和 SF 依赖项及提前量／滞后量；关键路径和时差；基线；资源筛选；任务移动、调整大小、创建和进度控件；缩进／取消缩进；时间线缩放；高亮范围；非工作时间阴影；标签；以及自定义标记。
  • 甘特图工具栏：为甘特图视图提供现成的时间线导航、基线、关键路径和导出操作。
  • 甘特图任务编辑器对话框：通过结构化对话框编辑任务字段、依赖项、资源和调度详情。

• 高级支持：

  • AI Agent 支持：使用 Pro AI 工具生成插件、渲染器、模板和网格配置。
  • RevoGrid MCP - AI 原生网格智能：将 AI 编码工具连接到带版本信息的文档、示例、迁移指南、功能解析和类型化 API 上下文。
  • 通过 GitHub 获取支持：通过基于 GitHub 的工作流获取工程支持。
  • 通过电子邮件获取支持：针对 Pro 和企业实施问题获取直接支持。

友好的框架支持

我是 RevoGrid，帮助你高效呈现大型数据集
，可将其显示为“类似 Excel”的数据表或列表。还可在每个单元格中渲染原生组件！

安装

该库以带作用域的 NPM 包的形式发布在 NPMJS Revolist 账号中。 在我们的演示页面查看更多信息。

使用 NPM：

npm i @revolist/revogrid --save;

使用 Yarn：

yarn add @revolist/revogrid;

浏览器支持

最新 ✔	最新 ✔	最新 ✔	最新 ✔	最新 ✔

框架

在 <revo-grid /> 中，我们开发了一套由 GitHub Actions 驱动的先进持续交付（CD）系统。该系统会自动构建并交付多个框架的网格版本，包括 React、Angular、Svelte、Vue 2、Vue 3 和 Python 的 Plotly Dash，并提供完整的类型支持。这确保了版本持续交付，让所有受支持框架都能获得最新的网格增强功能和升级 ✨。未来（版本 5）我们计划转向基于单体仓库的开发。

• Vue 3 和 Vue 2
• React
• Angular
• Svelte
• Dash / Python
• JavaScript

基本用法

RevoGrid 是一个 Web 组件。只需将该组件放置在页面上，即可像访问其他 HTML 元素一样访问其属性。它还提供了多种将网格集成到项目中的方式：

• 将网格导入项目

JavaScript 数据网格简单用法

// Select the RevoGrid element from the DOM
const grid = document.querySelector('revo-grid');

// Define the columns for the grid
grid.columns = [{ prop: 'name', name: 'First Column' }, { prop: 'details' }];
// Define the data source for the grid
grid.source = [{ name: 'New Item', details: 'Item Description' }];

自定义单元格模板

// Select the RevoGrid element from the DOM
const grid = document.querySelector('revo-grid');

// Define the columns for the grid
grid.columns = [
  {
    prop: 'name',
    name: 'Custom cell template',
    // Custom cell template
    cellTemplate(h, { value }) {
      return h(
        'div',
        {
          style: { backgroundColor: 'red' }, // Styling the cell background
          class: { 'inner-cell': true }, // Adding a CSS class
        },
        value || '' // Display the cell content or an empty string if undefined
      );
    },
  },
];
// Define the data source for the grid
grid.source = [{ name: 'New Item' }];

示例和指南

• Vue 3 和 Vue 2
• React
• Angular
• Svelte
• Dash / Python
• JavaScript

版本

• 2.0+：引入了插件系统、分组、排序和筛选。

• 3.0+：引入了不兼容变更：

  • 移除了冗余的视口组件。
  • 重命名类以支持 Bootstrap 和其他库：
    • row -> rgRow
    • col -> rgCol
    • data-cell -> rgCell
    • data-header-cell -> rgHeaderCell
  • 将所有方法名改为小写，以符合现代事件命名惯例。例如，afterEdit 现在是 afteredit。详情请查阅 API。
  • 增加了对纯 ESM 模块的支持，以便在 Vite、Parcel 等所有现代前端工具中使用网格。现在可以在不延迟加载的情况下导入自定义元素。请注意，polyfill 需要由你自行负责。

• 4.0+：引入了不兼容变更。请参阅迁移指南。

• 重新设计了类型支持： - 移除了已弃用的命名空间： - 之前：RevoGrid.ColumnRegular - 现在：ColumnRegular； - 改进了类型导入： - 之前：import { RevoGrid } from '@revolist/revogrid/dist/types/interfaces' - 现在：import { ColumnRegular } from '@revolist/revogrid'。 - 更改了所有位置的视口类型名称。例如，之前：rowDefinitions: [{ type: "row", index: 0, size: 145 }]，之后：rowDefinitions: [{ type: "rgRow", index: 0, size: 145 }]。

  • 更新了 event 命名惯例。请检查你的 event 用法。Event names 现在全部为小写，并符合现代事件命名惯例。例如，afterEdit -> afteredit。
  • 引入了多项事件不兼容变更：beforerowrender 现在返回 BeforeRowRenderEvent。详情请检查所有事件。

• 重大改进：

  • 重新思考了整个框架方案。推出了 Pro 版本，提供高级支持和专业功能。
  • 引入了插槽支持。
  • 更新了滚动系统，以更好地支持移动设备。
  • 提供高级模板支持。为模板和编辑器引入了 additionalData。Prop 可以访问父级／根应用上下文。
  • 重新设计了文档。
  • 修复了重大问题，并显著提升了整体性能，使网格速度提升数倍。
  • 增强了插件支持——现在可完全访问网格提供程序。
  • 更新了文档。
  • 为 Angular、React、Svelte 和 Vue 提供了完整的框架支持和原生渲染。

• 接下来呢？

  • 查看我们的路线图

我们的赞助商

我们衷心感谢赞助商给予的大力支持。他们的贡献帮助我们维护和开发 RevoGrid。

成为赞助者

如果您或您的公司希望支持 RevoGrid 的持续开发，请考虑 ，或使用 Pro 版本。您的支持将帮助我们继续改进项目，并为社区提供尽可能出色的工具。

感谢您支持 RevoGrid！🙏

测试

RevoGrid 经过全面测试，以确保可靠性和稳定性。

套件	命令	范围
单元测试	npm run test	服务、实用工具、纯逻辑
端到端测试（Playwright）	npm run test:e2e	真实浏览器中的渲染与交互

端到端测试

端到端测试使用 @stencil/playwright，在真实的 Chromium 浏览器中运行 <revo-grid>。运行以下命令时，开发服务器会自动启动：

npm run test:e2e

测试文件位于 e2e/，并共用 e2e/helpers.ts 中的辅助函数：

本地启动故障排查

进行有针对性的本地开发时，请在启动开发服务器前确认新增或修改的测试可被发现：

./node_modules/.bin/playwright test e2e/pinning.spec.ts --grep "test name" --list

然后运行一次非监听模式的 Stencil 构建，在不触发 Playwright Web 服务器生命周期的情况下捕获编译错误：

./node_modules/.bin/stencil build --dev --serve --no-open

如果 Playwright 在任何测试运行前就因 Stencil 开发服务器启动错误而失败，例如出现 ERR_SOCKET_BAD_PORT 和端口 65536，请将其视为环境或启动问题，而非端到端断言失败。检查 node -v，并确认是否有其他本地服务器正在使用 localhost:3333；只有在更改相应环境状态后再重试。

贡献

参与其中，您将有机会提升技能、积累宝贵经验，并为一个创新项目带来重大影响。无论贡献大小，您的贡献都很有价值。

为什么要贡献？

• 拓展知识：参与复杂库的开发，让您深入了解现代 Web 技术，提升编码技能，并学习性能优化、数据处理和基于组件的架构方面的最佳实践。
• 积累经验：为这样的开源项目做贡献，能为您的作品集增添宝贵的实践经验。这体现了您协作共事、解决复杂问题并为项目成功做出贡献的能力。
• 职业成长：通过贡献，您将成为优秀开发者社群的一员。这可能带来导师指导、合作机会和有益于您职业发展的专业人脉。

许可证

MIT

---