非常有用的JavaScript数据网格库

虽然世界上存在许多具有类似功能的数据网格库，但并非所有库都可能完全适合你的业务和应用程序用例。在为你的应用程序选择合适的数据网格库时，必须考虑其功能集、性能等因素。在本文中，将了解一些流行的数据网格库，这些库将是任何数据繁重的应用程序的绝佳补充。

但首先，让我们分解一下什么是数据网格。数据网格是一个表组件，通常加载、呈现和操作大型数据集。它们通常附带扩展功能，如数据过滤、排序、选择、流、聚合、高度可配置的列和行等，以帮助用户更好地读取和处理海量数据集。更专业的数据网格甚至嵌入图表等其他组件，并启用表内编辑。由于它们处理的数据量巨大，数据网格的构建通常考虑到了效率和简化的性能。此外，它们往往具有高度可定制性和可扩展性，以满足与它们所提供的数据相关的利基用例。

数据网格可以应用于各种用例。首先，你可以将它们用于简单的表格，同时利用它们增强的搜索、过滤、聚合和功能。数据网格在 KPI 仪表板上至关重要，以便从多个数据源获得多个指标的统一视图。它们可能有用的另一个领域是在财务仪表板上，其中跟踪和可视化会计和财务信息至关重要。数据网格还有助于库存管理系统跟踪和管理货物、订单、销售和其他商业运营。这些只是它们可以发挥作用的几个个例。

本文将介绍专门用于处理大型数据集的流行数据网格库列表。将根据许多不同的因素对它们进行评估：

• 功能集
• 许可选项和开源状态
• 前端框架支持
• 易于定制和可扩展性
• 性能
• 文档、学习资源、社区和提供的支持

AG 网格

AG 网格是一个成熟而快速的数据网格，具有以下功能：

• 行和范围选择；
• 跨多种数据类型进行过滤；
• 单元格渲染；
• 高级表内编辑；
• 分组、枢轴、聚合和 tree data；
• CSV 和 Excel 导入和导出；
• 拖放功能；
• 剪贴板功能；
• 可嵌入组件和配件，如工具面板、边栏、菜单等；
• 图表集成；
• 国际化；
• 键盘导航。

它最初是为 Angular 设计的，现在还支持 JavaScript、React 和 Vue。它支持实时数据流。网格的布局及其列和行的样式可以通过主题和 CSS/SASS 样式进行自定义。“配件”、外部组件和图表可以添加到其中以扩展其功能。

虽然它提供了一个免费的开源社区版本，但它确实提供了一个具有扩展功能的许可付费企业版本。其网站上提供的文档非常详细，但 AGGrid 仅为其企业产品提供专门支持。

Bryntum 网格

Bryntum 网格是一个纯 JavaScript 跨浏览器兼容的高性能数据网格。虽然它有一个丰富的功能集，但它的一些更值得注意的功能包括：

• 内联单元格编辑；
• Cell tooltips；
• 可定制的单元格；
• 本地化和响应能力；
• 拖放列和行；
• 列重新排序和调整大小；
• 行过滤；
• 键盘导航和辅助功能；
• 可滚动网格部分；
• 行分组；
• 分组标题；
• 摘要和汇总；
• 搜索和快速查找；
• 分类；
• 树形视图；
• PDF、PNG 和 Excel 导出；
• 虚拟渲染；
• 寻呼；
• 多个主题。

它可以与任何前端框架集成，包括 Angular、React 和 Vue。BryntumGrid 通过其虚拟渲染进行了优化，以实现卓越的渲染和滚动性能。

Bryntum 提供培训、网络研讨会、指南和各种级别的广泛支持，在学习使用网格时派上用场。它的 API 文档是强大的，涵盖了多个前端框架，其网站上有大量实时演示，展示了网格的强大功能。

Handsontable

Handsontable 是一个类似电子表格的数据网格，具有以下值得注意的功能：

• 自定义列标题和菜单；
• 摘要；
• 列和行隐藏、移动和冻结；
• 列过滤、排序、分组；
• 列和行虚拟化；
• 自定义行标题；
• 行排序、预填充和修剪；
• 剪贴板功能；
• 选择；
• 单元格合并和渲染；
• 单元格编辑器和验证器；
• 评论；
• 多个单元格类型，如日期、密码、复选框等；
• CSV 和其他文件类型导出；
• 国际化。

它适用于普通的 JavaScript、Angular、React 和 Vue。Handsontable 可以高效地处理大型数据集，而不会出现性能问题。你可以构建和使用自己的自定义插件来扩展网格的功能，它的 API 文档是全面的，其网站提供了许多示例、指南、案例研究和开发人员论坛。

DHTMLXJavaScript DataGrid

DHTMLXJavaScript DataGrid 是一个网格，作为 DHTMLXSuite UI 小部件库的一部分发布。它的一些重要功能包括：

• 数据编辑、格式化、排序和过滤；
• 行和单元格选择；
• 列拖放和冻结；
• 列和行重新排序；
• 工具提示；
• Excel 导出；
• 键盘导航。

DHTMLXDataGrid 与 React、Angular 和 Vue 兼容。网格的行、单元格、页脚、页眉和工具提示可以通过其 API 使用 CSS 样式和模板进行自定义。它包含的库不是开源的。它有一个免费的标准版本，API 有限，有时会使组件适应基本的专业要求变得繁琐，几乎是不可能的。其 PRO 付费许可版附带扩展功能，可解决上述问题。在其网站上，您可以找到深入的文档、样本、演示和社区论坛。扩展技术支持仅包含在 PRO 版本中。

KendoUI 数据网格

KendoUI 网格是一个数据网格，是 KendoUI 库的一部分，该库捆绑了其他几个组件。它的一些基本功能包括：

• Excel 和 PDF 选择、复制和导出；
• 内联、弹出式和批处理数据编辑；
• 自定义数据编辑器和验证器；
• 本地和远程数据的列虚拟化；
• 过滤、排序、选择、搜索、排序和拖放；
• 行和工具栏模板；
• 冻结、粘性、可调整大小和可重新排序的列；
• 列菜单和多列标题；
• 全球化和本地化。

KendoUI 库有 jQuery、Angular、Vue 和 React 版本。该网格支持实时数据加载。这些库是为它发布的每个框架的原生的，而不是包装纸。因此，它们具有快速的原生性能。其列和行虚拟化功能仅渲染网格的可见部分，以获得更好的性能。图书馆附带的主题可用于自定义网格。库中可用的其他组件可以嵌入到网格中，以扩展其功能。库不是开源的，也不是免费的。该网格有全面的文档、演示和样本，其网站有一个知识库。它还有一个社区论坛和反馈门户。向购买许可证的客户提供扩展支持服务。

DevExtreme 数据网格

DevExtreme 数据网格作为 DevExtreme 组件套件的一部分。其值得注意的功能包括：

• 过滤、排序、分组和搜索；
• 具有聚合功能的数据摘要；
• 主细节布局；
• 行、批处理、单元格、表单和弹出式数据编辑；
• 数据验证；
• 单到多选择记录选择；
• 固定、可调整大小、可记录和隐藏的列；
• 可定制的 Excel 导出。

该套件与 jQuery、Angular、React 和 Vue 兼容。它有一个免费的非商业许可证，但功能有限。其完整的许可证版本不是免费的，但启用了专业功能。网格可以加载并绑定到大型数据集服务器端。然而，在网格中超过 10,000 行，滚动时很容易发现帧速率下降。该套件提供了一个主题构建器，你可以使用它为数据网格生成自定义主题。在 DevExtreme 网站上，提供了演示、代码示例、详尽的文档和网络研讨会，如果遇到错误，你可以提交票证。专门支持仅提供给完整的许可证持有人。

FusionGrid

FusionGrid 是一个数据网格，是 FusionCharts 库的一部分。它附带以下功能：

• 过滤、排序和搜索；
• CSV、JSON 和 Excel 导出；
• 行和单元格选择；
• 嵌套列和列分组；
• 实时数据更新。

FusionGrid 为非商业用途提供免费许可证。企业客户必须购买各种定价等级的许可证。该网格适用于普通的 JavaScript 和前端框架，如 Angular、React 和 Vue。FusionGrid 支持在不影响性能的情况下加载大型数据集。它不是开源的，其网站提供的文档和示例有限。

制表器

制表器是一个开源的免费数据网格，具有丰富的功能集，包括：

• 键盘导航和触摸友好性；
• 树形结构；
• 连接表格；
• 行、单元格和列上下文菜单；
• 用户操作历史记录、撤销或重做操作以及剪贴板；
• 专栏摘要和计算；
• 本地化和 RTL 文本指导支持；
• CSV 和 Excel 导出；
• 主题；
• 数据编辑、验证、格式化、持久性和突变；
• 行选择和分组；
• 过滤和排序；
• 列和行冻结。

它用纯 JavaScript 编写，适用于几个前端框架，包括 Angular、React 和 Vue。使用虚拟化的 DOM 快速渲染大型数据集。网格的自定义仅限于 CSS 样式。它的网站上有全面的文档和示例。它背后的充满活力的贡献者社区可以在 Discord 和 GitHub 上进行交互。

ToastUI 网格

ToastUI 网格是 ToastUI 库的一部分。它的一些显著特点是：

• 数据摘要和计算；
• 分层树形数据表示；
• 自定义数据输入和编辑元素；
• 主题；
• 键盘导航；
• 剪贴板功能；
• 自定义单元格渲染器；
• 虚拟滚动；
• 冻结、隐藏、可调整大小和可重新排序的列；
• 选择和排序；
• 数据验证。

网格是免费的开源的。它分布在三个软件包中，用于普通的 Javascript、React 和 Vue。其增强的虚拟滚动功能可让您加载大型数据集，而不会降低性能。网格可以使用主题进行定制，以获得独特的外观和感觉。其网站在网格上提供了详尽的文档和详细示例。

FlexGrid

FlexGrid 是 GrapeCityWijmo UI 组件库的一部分。它的一些功能包括：

• 客户端和服务器端数据绑定；
• 单元格定制；
• 虚拟滚动；
• 剪贴板功能；
• 编辑、排序和过滤；
• 分组和聚合；
• 树形网格和主细节模式；
• Excel 进出口；
• PDF 导出和打印；
• 全球化和从右到左的文本方向支持；
• 行和列固定和冻结；
• 粘性标题；
• 搜索和过滤；
• 列拖放重新排序和调整大小；

FlexGrid 适用于 Angular、React、Vue 和 PureJS。它的捆绑包很小，网格速度快，加载速度快。你可以使用数据映射自定义单元格内容。但是，Wijmo 不是免费的或开源的。GrapeCity 网站提供深入的文档、知识库、论坛、案例研究、白页、演示、网络研讨会和视频内容。技术支持以溢价提供，与许可证购买分开。

FancyGrid

FancyGrid 是一个具有图表集成的网格库。其显著特点包括：

• 过滤和排序；
• 图表集成；
• 命名；
• 复选框选择；
• 行和标题分组；
• 表格；
• Excel 和 CSV 导出；
• 国际化；
• 列重新排序；
• 网格到网格拖放；
• 树形网格、子网格和子形式

此库适用于普通的 JavaScript、Angular、React、Vue 和 jQuery。您可以通过嵌入图表并使用它提供的主题对其进行自定义来扩展其功能。它的源代码在 Github 上可用，许可证在几层可用。它的文档很好，包含详细的示例。通过 Slack 和其他通信渠道为许可证持有人提供技术支持。

Webix 数据表

• 编辑、排序、过滤和验证；
• 行和列拖放和调整大小；
• 剪贴板支持；
• 列分组；
• 标题菜单；
• Sparklines；
• 子行和子视图。

Webix 以免费和付费许可证等级提供。它适用于 jQuery、Angular、React 和 Vue。它的组件很小，用纯 JavaScript 编写。但是，缺乏行虚拟化使该组件不适合大数据集，除非使用分页。你只能使用 CSS 自定义网格。该库的标准版本是免费的开源的，而你需要购买许可证才能访问其企业版本。详细的文档、网络研讨会、教程和示例可在其网站上找到。技术支持仅适用于许可证持有人。

写在最后

数据网格对于开发任何现代 SaaS 或内部业务关键型应用程序至关重要。好的表组件应该提供高级功能，如可配置的单元格、行和列、排序、过滤、分组、摘要等。

数据网格主要提高可读性，并使大型数据集的操作更容易。专业数据网格还应该能够在不影响应用程序性能的情况下处理大量数据。它们还需要可定制和可扩展，以适应与它们提供的数据相关的利基用例。在选择数据网格库时，你必须考虑其使用的框架、定价、许可、技术支持，以及其功能集是否适合你的业务需求。