如果你曾经为企业或金融科技公司开发过网络应用，你会发现他们经常用表格来组织数据。数据网格是可以在行和列中呈现数据的组件，并使用户能够执行诸如排序和过滤数据、导出数据、单元格内编辑、分页等操作。
网格是数据驱动的，是为了处理高性能的商业网络应用而建立的。它们具有这种类似电子表格的用户体验，并可以通过定制来构建复杂、可扩展和数据丰富的界面。
在这篇文章中，我们将概述为什么数据网格很重要，并讨论你在下一个项目中应该考虑的五个JavaScript数据网格。
为什么数据网格很重要
在渲染大量数据的网络应用中，数据网格是必不可少的，如实时报告、跟踪统计等。以下是你应该为你的下一个应用程序选择数据网格的一些原因。
- 数据网格可以提高你的应用程序的性能。大多数开源的数据网格库都是非常轻量级的，所以它们不需要弥补很多开销成本。另外，大多数库都有虚拟滚动功能，在滚动浏览大量数据集时，可以改善用户体验
- 数据网格有过滤、排序和分页等功能，使其更容易浏览大型数据集
排名前五的JavaScript数据网格
在看到了使用数据网格的一些重要性之后，让我们来看看其中的一些数据网格。
React Table
React Table是一个无头的、开源的、轻量级的、可扩展的数据表格。通过无头数据表，它意味着它不控制你的标记如何渲染或UI元素。这给了你自由，让你的数据表格的主题适合你的应用需求。
React Table允许你使用React Hooks来配置你的数据表格功能，如过滤、排序、分页、虚拟化行、单元格内编辑等。
要把它添加到你的项目中，请安装该软件包。
npm install react-table
// or
yarn add react-table
然后用主钩子useTable ，开始建立一个基本的数据表。这就是一个典型的React数据表格的样子，带有分页功能。
你也可以查看演示。
你可以将React Table集成到你的React应用程序中，即使你只需要使用usePagination 钩子实现分页。这是一个表格工具，你可以去结合这些Hooks来为你的应用程序建立一个强大的数据网格。
然而，如果你正在构建一个大规模的企业应用，你可能要考虑你的团队从头开始构建一些实实在在的东西所需要的时间。
AG网格
AG Grid是一个完整的、功能丰富的JavaScript数据表格。它有社区和企业版本。它支持主要的JavaScript框架，包括Vanilla JavaScripit、React、Vue和Angular。它的核心功能包括选择、过滤、数据绑定、渲染单元格、单元格内编辑、主-细节、导入和导出选项、虚拟滚动、键盘事件、测试和安全选项。
AG Grid还拥有其他UI组件来扩展网格，如火花线、工具面板、上下文菜单、状态栏以及集成和独立的图表。
要安装开源版本到你的JavaScript项目，请运行。
npm install ag-grid-community
如果你正在做一个React项目，你还必须安装ag-grid-react 包以访问所有React UI组件。
这就是一个典型的AG Grid数据表格的样子。
你可以查看基本演示，看看AG Grid如何与React一起工作。
AG Grid还包括预定义的UI主题，并让你有能力创建自己的主题。这些主题包括Alpine（带黑暗模式）、Balham（带黑暗模式）和Material UI。
然而，AG Grid社区版的功能是有限的。你需要获得企业版才能获得主-细节、集成图表、火花线、Excel导出、行分组、聚合、高级过滤、开发者支持等功能。尽管如此，如果你正在做一个大型的企业项目，你会想考虑使用这个数据表格的好处，减少从头开始建立一个数据表格的痛苦。
Grid.js
Grid.js是一个免费和开源的Javascript表格插件，用TypeScript构建。Grid.js有数据绑定、过滤、自定义和多列排序、单元格格式化、搜索和分页、选择等配置，并支持React、Angular和Vue。
就像我们之前讨论的React Table一样，Grid.js是一个先进的实用表格插件。要在你的JavaScript项目中添加Grid.js，请运行。
npm install gridjs
然后导入Grid 模块和CSS主题，开始构建。
import { Grid } from "gridjs";
import "gridjs/dist/theme/mermaid.css";
另外，React Table使用钩子工作，而Grid.js使用配置工作。配置是你传递给Grid 实例的属性，如search,sort,pagination,style, 等等。如果你正在使用任何一个JavaScript框架，Grid.js已经为每个框架推荐了封装包。
例如，如果你使用React，你必须运行npm install gridjs-react ，同时安装gridjs ，因为它是包装器工作的一个核心依赖。
<Grid
data={[
['John', 'john@example.com'],
['Mike', 'mike@gmail.com']
]}
columns={['Name', 'Email']}
search={true}
pagination={{
enabled: true,
limit: 1,
}}
/>
Grid.js对造型没有意见，所以你可以去整合你自己的主题，建立一个更复杂的数据表。
你可以看看这个演示。
然而，Grid.js并不适合企业应用，因为它没有对单元格内编辑、虚拟滚动、导出选项、类似Excel的过滤和排序等功能的本地支持。
Handsontable
Handsontable是一个用于构建快速有效的数据网格的JavaScript库。它有免费和商业许可，支持React、Vue和Angular框架。在核心部分，Handsontable实现了数据绑定（从数据源获取数据以及如何在数据网格上呈现）、本地保存数据、中间件、事件、挂钩和配置。与Grid.js类似，Handsontable的配置选项允许你根据自己的喜好配置数据表格。
要将该包添加到你的JavaScript项目中，运行。
npm install handsontable
然后导入Handsontable 模块和CSS主题。如果你正在做一个React项目，你将不得不安装Handsontable React包装包@handsontable/react 。这是一个Handsontable与React的基本代码片段。
import { HotTable } from '@handsontable/react';
const hotData = [
["", "Tesla", "Volvo", "Toyota", "Honda"],
["2020", 10, 11, 12, 13],
["2021", 20, 11, 14, 13],
["2022", 30, 15, 12, 13]
];
const App = () => {
return (
<div id="hot-app">
<HotTable
data={hotData}
colHeaders={true}
rowHeaders={true}
width="600"
height="300"
/>
</div>
);
}
你可以查看演示，了解Handsontable与React的基本工作方式。
Handsontable有这种类似电子表格的用户界面，当你想建立一个电子表格的网络应用时，它是最好的，它具有单元格功能、类型、公式、上下文菜单、键盘导航、国际化、执行批量操作等功能。然而，当你使用该库时，你的主题选项是有限的。
Toast UI网格
作为一个JavaScript开发者，你可能遇到过Toast UI网格控件，尤其是通知或弹出式控件。Toast UI网格是一个用于实现数据网格的纯JavaScript网格控件。它的功能包括：复杂的列操作、自定义编辑器、主题选项、日期选择器、验证、排序、国际化、数据汇总、自定义事件、冻结列、过滤器、分页和无限滚动。
要在你的JavaScript项目中安装Toast UI Grid，运行。
npm install tui-grid
然后从tui-grid ，导入Grid 模块。要开始构建你的JavaScript网格，创建一个Grid 的实例，并向它传递选项。就像Grid.js一样，你需要传递配置选项，调用各种API来构建你的网格。
这就是一个典型的Toast UI网格的样子。
然而，Toast UI网格只是一个纯粹的JavaScript网格，不支持其他的JavaScript框架，当你要为你的数据网格需求挑选库时，你可能要考虑这个问题。
总结
JavaScript数据网格是最好由第三方处理的控件，因为它们给你提供了很多功能，并减少了你建立自己的数据网格工具的时间。在这篇文章中，我们讨论了为什么数据网格很重要，并比较了五个开源的JavaScript数据网格，包括React Table, AG Grid, Handsontable, Grid.js, 和Toast UI。我们还强调了这些数据网格的特点和用法。
