在前端开发中，我们经常需要将数据以表格的形式展示给用户。手写表格代码会很繁琐，何不使用一款便捷的 npm 包呢？本文将介绍一个简单易用的 npm 包 tableify，其可以将 JavaScript 对象转换成 HTML 表格。我们将详细了解如何安装、使用、以及拓展这个包。
安装
在使用 tableify 之前，我们需要安装该 npm 包。首先，确保在终端中已安装 Node.js。然后，在命令行中输入以下指令安装 tableify：
npm install tableify
安装成功后，我们就可以在项目中使用它了！
使用
使用 tableify 十分简单，只需要在 JavaScript 中导入该包并调用函数即可。以下为最基本的使用方式：
-- -------------------- ---- ------- ----- -------- - -------------------- ----- ------ - - - ----- ------ ---- -- -- - ----- -------- ---- -- -- -- ----- ------- - ----------------- ----------------------------------------------------- - --------
在以上代码中，我们使用了 require 函数导入了 tableify 包。接着定义了一个数组 myData，其中包含了两个对象，每个对象有两个属性：name 和 age。调用 tableify 函数将 myData 数组转换为 HTML 格式的表格，并将结果赋值给 myTable。最后，通过获取 DOM 的方法将 myTable 嵌入到指定的 HTML 元素 myTableContainer 中。
以上代码将在浏览器中呈现如下样式的表格：
| 名称 | 年龄 |
|---|---|
| Tom | 18 |
| Jerry | 20 |
我们可以发现，该表格是具有基本样式的，默认宽度等于屏幕宽度，同时表格没有任何额外的样式和事件。那么，如何调整表格样式以及添加事件呢？
深入学习
在使用 tableify 进行表格转换时，我们也可以使用它提供的可选项来调整样式、添加事件以及进行更深层次拓展。以下是几个常用的选项：
sortBy
如果需要对表格中的数据进行排序，我们可以使用 sortBy 选项。该选项是一个包含属性名的数组，按照数组中的属性依次进行排序。例如，我们可以按照年龄升序排列对象：
const myData = [
{ name: 'Tom', age: 18 },
{ name: 'Jerry', age: 20 },
];
const myTable = tableify(myData, { sortBy: ['age'] });排序结果如下：
| 名称 | 年龄 |
|---|---|
| Tom | 18 |
| Jerry | 20 |
注意，以上代码只是举例说明 sortBy 的用法。事实上，tableify 提供的排序功能并不够完善，我们通常需要自己编写处理排序逻辑的函数。
classPrefix
我们可以使用 classPrefix 选项指定表格的 class 前缀，这可以便于我们使用 CSS 对表格进行样式调整。例如：
const myTable = tableify(myData, { classPrefix: 'my-table' });表格将具有类名 my-table-table 和 my-table-th 等前缀，我们可以通过 CSS 来指定样式。
clickCallback
clickCallback 选项可以为表格中的每一个单元格添加点击事件回调。例如：
const myTable = tableify(myData, {
clickCallback: function(e) {
console.log('cell clicked: ' + e.target.innerHTML);
},
});通过以上代码，每次单元格被点击时，都会在控制台打印出该单元格的 HTML 内容。需要注意的是，clickCallback 回调函数的参数 e 是一个事件对象，在其中包含了点击单元格的详细信息。
customize
如果以上选项依然不能满足我们的要求，我们可以使用 customize 回调函数进行更深层次的拓展。该函数的输入参数为表格元素，通过下面的例子我们可以知道怎么使用：
-- -------------------- ---- -------
----- ------- - ---------------- -
---------- --------------- -
-- ------------------
----- ---- - ---------------------------------
--- ---- - - -- - - ------------ ---- -
----- ----- - -----------------------------------
------------------------------ - ------------
-
--
---以上示例函数选择了每一行中的第二个单元格，并为其添加了背景色。customize 回调函数的参数 table 是一个作为参数准备好的 table 标签元素。
示例代码
下面是一个完整的示例代码，展示了如何使用 tableify 进行数据可视化。
-- -------------------- ---- -------
--------- -----
------
------
--------------- ------------
----- ----------------
-------
----- -
---------------- ---------
------ ----
------- -----
-
--- -- -
------- --- ----- ------
-------- ----
----------- -----
-
-- -
----------------- -----
------ ------
-
--------------- -
----------------- ----------
-
--------
-------
------
---- ----------------------------
--------
----- -------- - --------------------
----- ------ - -
- ----- ------ ---- --- ------- ------ --
- ----- -------- ---- --- ------- -------- --
- ----- ------- ---- --- ------- ------ --
--
----- ------- - ---------------- -
------- --------
------------ -----------
-------------- ----------- -
----------------- -------- - - --------------------
--
---------- --------------- -
----- ---- - ---------------------------------
--- ---- - - -- - - ------------ ---- -
----- ----- - -----------------------------------
-------------------- - ------------------ --- ------ - ------ - ------
-
--
---
----------------------------------------------------- - --------
---------
-------
-------在代码中，我们首先导入了 tableify 包，并定义了一个对象数组 myData。接着，我们将 myData 转换为 HTML 表格的形式，将结果赋值给 myTable，最后将其嵌入到 HTML 页面中。
我们在调用 tableify 时使用了四个选项：sortBy、classPrefix、clickCallback 和 customize。其中，sortBy 按照年龄排序，classPrefix 为表格添加了前缀 my-table，clickCallback 为每个单元格添加了点击事件，并在 customize 回调函数中对每一行的第三个单元格进行了特殊样式的处理。
以上代码将产生如下所示的表格：
| 名称 | 年龄 | 性别 |
|---|---|---|
| Tom | 18 | male |
| Jerry | 20 | female |
| Tony | 22 | male |
总之，tableify 是一个简单易用的 npm 包，可以轻松将 JavaScript 对象转换为 HTML 表格，为我们的开发工作提供了极大的便利。希望今天的学习对你有所启发，感谢你的阅读！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/tableify