前言
在日常工作中，后端的数据展现中我们经常需要用到表格组件，在我所用过的所有组件中大家对于功能的实现都种不相同。以下是我对一个表格的基本要求。例如：一个表格应具备的基础功能、有丰富的交互功能、有丰富的API、性能要高、支持用户操作配置持久化、方便用户扩展、友好的阅读文档等。
个人认为比较好实用的一些功能：
- 支持多级表头
- 列与列之间的宽度可以拖动
- 支持列的隐藏与显示
- 支持列的排序
- 支持列的固定
- 支持列的合并
- 支持列的分组
- 支持列的筛选
- 支持列的搜索
- 支持列的编辑
- 支持用户操作配置持久化
- 性能要好
- 表格的基本功能
- 丰富的表格交互功能
- 丰富的API
我从最原始的Table标签在到 Bootstarp 又经历 Layui 在到后面的 Element Plus Table, AdGrid, ExtJs Grid Tabulator 等都是我在工作中使用的过的 Grid 组件。这些组件每个都有自己的优点和缺点，在使用时本着能不动手坚决不写组件的原则。给大家介绍一下这些组件的优缺点。
Element Plus Table
Element Plus Table 是 Element Plus 提供的表格组件，它是一个基于 Vue 3 的组件库，提供了丰富的表格功能，包括多级表头、列的拖动、列的隐藏与显示、列的排序、列的固定、列的合并、列的分组、列的筛选、列的搜索、列的编辑等。Element Plus Table 的优点是功能丰富，使用简单，文档齐全，社区活跃。缺点是性能一般，不支持用户操作配置持久化，扩展性较差。数据超过 1000 条时，页面展现效果不是那么的理想。源于它开源免费，所以如果是些简单的展现数据的话这个组件应该够用了。
AdGrid
AdGrid 是最近工作中使用的、功能很强大。开源版本的功能已经能满足日常需要。它的主题跟 Element Plus 一样也是随系统变化的。文档是英文的。性能也够好。但是如果是表格中需要展示树状数据、求和、分组、过滤等功能的话只有企业版本才有。
ExtJs Grid
ExtJs Grid 是一个功能非常强大的表格组件，它提供了丰富的表格功能，包括多级表头、列的拖动、列的隐藏与显示、列的排序、列的固定、列的合并、列的分组、列的筛选、列的搜索、列的编辑等。ExtJs Grid 的优点是功能非常齐全丰富, 支持用户操作配置持久化，扩展性很强。但是它并不是免费的。我记得一个公司规模不超过他们官方的设定的人数的话也是能够使用的（企业内部）。虽然它并不开源。而且框架本身还很重。与现在的 vue , React, Angular 等框架的结合也不是很理想。但是在它的官方DEMO中可以为表格的展现方式提供很多思路。
Tabulator
Tabulator 是一个老牌的表格组件。它在功能交互上差不多跟 ExtJS Grid 差不多。官方文档也是英文的。在我目前的项目中也是大量替换 Element Plus Table 的组件。它在使用上不管是原生页面、vue、React 等常见的框架中的都能正常使用。在最新版本的使用中我对于一些扩展或是需求都比较容易实现。也不知道是不是我的错觉。在使用它的时候老觉得它慢半拍。虽然实现的功能没有问题，但是那种小卡的感觉给人很不舒服。好在领导同事们还能接受它这些小缺点。还有一个比较不好的地方就是它的主题跟 ExtJS 一样的丑。
结语
在我经历过的项目中还有其它的组件，但都不好用。目前比较推荐 Tabulator。 Api简单，扩展也方便，性能也够用。惟一不好的就是它丑。