表格是在一个相对较小的空间内显示大量信息的最简单的方法之一。当然，HTML也有一个内置的表格元素。然而，有一些关于表格的东西可以改进，使其更加有用和令人印象深刻。这可能包括一些事情，比如在表格的列中对数据进行排序，动态地在表格中添加更多的数据，或者能够使表格的响应速度远远超过其默认的布局和风格所允许的。
在这篇文章中，我将回顾一些最好的免费和开源的JavaScript插件和库，你可以用它们来增强你所有的HTML表格。
tablesorter
tablesorter插件为你现有的标准HTML表格增加了很多伟大的功能。它实际上是一个jQuery插件，所以要确保你已经在你的网页中包含jQuery。除此之外，你只需要用tbody 和thead 标签来创建表格。
该插件可以轻松地解析和排序不同类型的数据。它有对文本、数字、货币、IP地址、URI和日期以及时间进行排序的分析器。你甚至可以添加你自己的解析器。
对单列或单一标准的数据进行排序有时可能是不够的，但不用担心--Tablesorter可以满足你。它带有执行多列排序或二次排序的选项，在二次排序中，你通过两个不同的标准对数据进行排序，比如常规的字母排序与其他东西相结合。
使用tablesorter插件的另一个好处是，它配备了很多小工具，可以进一步扩展其功能。假设你想要一些核心插件中没有的功能，而且也没有任何小工具扩展可用，那么你就可以编写自己的小工具扩展来添加该功能。
该插件的详细文档将在你遇到困难时帮助你解决。它有一个入门指南，大量的工作实例和关于不同方法和事件的信息。
tablesaw
表格的一个可能的缺点是，它们通常在很小的屏幕尺寸上看起来不是很好。这仅仅是由于移动设备的水平空间很小，无法正确容纳表格的所有列。tablesaw插件为你解决了这个问题。
它有两个不同的变体。你可以使用无依赖性版本或jQuery插件。一旦你添加了相关的CSS和JavaScript文件，你需要做的就是给你的表格添加一些HTML类和属性。入门指南要求你加载一个JavaScript文件来初始化该插件，但你可以跳过这一点，为特定的表格手动初始化该插件。
该插件使用了一些多种技术来帮助你在狭小的垂直空间中适应你的表格。你可以使用基本的堆叠模式来创建一个两列布局，标题在左边，信息在右边。还有一种列切换模式，用户可以直接有选择地关闭列，把它们从视图中隐藏起来。第三个选项让你可以选择使列可以滑动，这样用户就可以点击按钮在列中导航。
如果你只想使用库中的堆栈模式怎么办？你可以简单地包括一个较小的专用文件，只实现堆栈模式，而没有任何其他功能。查看功能齐全的演示，看看该插件是否提供了你想要的所有功能。
Tabulator
TabulatorJavaScript库在创建交互式表格方面做得很好。该库的数据可以来自现有的HTML表格、JavaScript数组或JSON格式的数据。这个库最好的一点是，你可以把它和所有你喜欢的库和框架（如Angular、React或Vue）一起使用。只要包括该库的JavaScript和CSS文件，你就可以使用了。
该库提供了很多有用的功能。你可以随心所欲地对数据进行排序，还可以使用过滤器，只显示必要的信息。它还允许你使用AJAX请求将数据异步加载到你的表中。你可以完全控制进入或离开该表的数据。
数据也可以直接从表中下载CSV或XLSX格式。各种各样的回调函数允许你为表格添加自定义的交互行为。
诸如基于所选用户在多次访问中的偏好的持久性布局，以及为撤销和重做功能而记录的用户互动等功能使该库非常方便用户使用。功能列表并没有结束，你可以在图书馆网站上看到它们的运行情况。
tablesort库
tablesort库是jQuery Tablesorter插件的一个伟大的轻量级替代品。它是那些只想为他们的表格提供一些基本的排序功能，并且喜欢使用一个独立的库的人的理想选择。
该库的功能被分为一个主文件和其他一些小文件。较小的文件用于提供额外的排序能力，对日期、月份名称和文件大小等进行排序。
该库有两个不同的事件监听器，称为beforeSort 和afterSort ，以帮助你实现你自己的功能，除了数据的排序。有一个refresh() 方法，一旦有新的数据通过AJAX请求被添加到表中，你就可以自动对项目进行排序。
该库的其他一些功能包括能够从排序中排除行和列。你还可以使用自定义属性来指定库应该对某一列使用的排序方法，或者为某一列的排序提供经过消毒的数据。
jTable
jTable库是一个免费的jQuery插件，用于创建基于AJAX的CRUD表。该插件将自动创建表格，而不需要你编写任何HTML或JavaScript。
该插件允许你在用户对前台的表格做任何修改时，从服务器上创建、更新和删除一条记录。它还支持服务器端的分页和表格数据的排序。
有多种基于jQuery UI或Metro UI风格的预定义色彩方案。你也可以提供你自己的自定义CSS文件来创建一个独特的主题，与你的网站相融合。
用户有能力显示、隐藏或调整列的大小。他们还可以一次选择多行来批量删除它们。你可以将你自己的自定义代码与一大串事件监听器挂钩，以实现任何额外的功能。例如，有一个selectionChanged 事件，每当用户从表中选择一行时就会发生。
你可以在其官方网站上看到这个插件的所有工作演示，其中还包含详细的文档和快速入门指南。
Bootstrap Table
Bootstrap Table库最初是为了给Bootstrap框架内的普通表格提供额外功能。然而，它也支持许多其他CSS框架，如Semantic UI和Bulma。
该库的一些基本功能包括能够显示或隐藏任何表格的标题、页脚或列。你还可以使一个表格可滚动，同时保持其页眉和页脚固定。
表内用于填充不同行和列的数据可以来自普通的HTML，也可以来自JavaScript或远程URLs。该库让你有能力将多列组合在一起或在一个表中加载大量的数据。
还有很多属性，你可以用来控制用户如何在表中寻找信息，以及如何向他们显示信息。你可以添加滚动功能，把用户带到一个特定的行。表格的内容可以以各种格式导出，如JSON、XML、CSV和纯文本。
我几乎没有触及Bootstrap表格插件所提供的功能的表面。请看一下例子页面，看看它的所有功能是如何运作的。
React表格
你在你的项目中使用React吗？React Table库为你提供了钩子，可以在框架内创建你自己的快速和轻量级的表格。该库的一个独特功能是，它让你完全控制表格的标记和样式。
该库带有很多有用的功能。这包括对表格内的数据进行排序和过滤，只显示特定的信息。你还可以将列组合在一起，或为你的表格添加一个页脚。行的选择支持分页和不分页。用户还可以在表格内的不同位置拖放行。
该库也有自己的插件系统，允许你扩展或覆盖你创建的表格所发生的几乎一切。官方网站上有不少例子，告诉你如何使用该库创建从最基本到高级的任何表格。
Vue Good Table
Vue Good Table库对于想要创建能够与VueJS框架无缝集成的表格的人来说是个不错的选择。
该库的一些显著特点包括能够在表格内的所有列中进行搜索。你还可以对表内的数据进行排序，启用多列排序或完全禁用排序。该库还实现了列过滤以及分页功能。
你也可以创建具有分组行的表格。此后，排序等操作将在他们自己的行组内工作。Vue Good Table让你可以选择让行可折叠，或者自定义标题以改变其外观并添加一些额外的元素。
使用这个库创建功能丰富的表格只需要很少的时间，它支持排序、列过滤和分页。该库还允许你在服务器端而不是客户端完成所有这些工作，如果有这样的需要。
虽然Vue Good Table适用于Vue 2，但对于那些使用Vue 3的人来说，还有一个名为Vue Good Table Next的插件。
最后的思考
在这篇文章中，我们看到了一些最好的免费和有用的JavaScript表格库，可以在短时间内为你的普通HTML表格添加功能。
你可以使用jQuery Tablesorter插件来为你的表格添加高级排序功能，或者使用独立的库Tablesort。Tablesaw插件在使你的表格具有超级响应性方面做得很好，在所有的屏幕尺寸上看起来都很棒。
我们试图涵盖所有你可能想要的表格的重要功能，同时也列出了专门针对某些特定框架设计的库。还是找不到你要找的东西？试着在GitHub上搜索一个JavaScript表格库。
