Array-table 是一个可以方便地将数组转换为 HTML 表格的 npm 包。它提供了简单易用的 API，支持排序、筛选等功能，非常适合用于前端开发的数据展示，比如数据分析、报表等场景。本文将详细介绍 Array-table 的使用方法，并附有示例代码。
安装
使用 npm 安装 Array-table：
--- ------- ----------- ------
基本用法
首先，在 HTML 页面中引入 Array-table 的 CSS 和 JavaScript 文件：
----- ---------------- ----------------------------------------------------- ------- ------------------------------------------------------------
然后，将一个空的 <table> 元素标记为 Array-table：
------ ---------------------
接着，在 JavaScript 中定义一个数组，并将其转换为表格：
--- ---- - ---------- --- ---------- ------- --- --------- --- ----- - ----------------------------- ------
现在，我们已经将一个数组转换为了一个 HTML 表格。Array-table 会自动将第一行作为表头，其余行作为表格中的数据行。我们可以通过 table 对象来操作表格，比如修改表格数据，排序表格等。
数据源格式
Array-table 支持的数据源格式有以下两种：
- 二维数组，每行数据由一维数组表示。第一行为表头，其余行为数据行。
- JSON 数组，数组中的每个对象表示一行数据。对象的属性名为表头，属性值为数据行的单元格数值。
下面是两种数据源格式的示例：
-- ------ --- ---- - - -------- ------ ---------- --------- --- ---------- ------- --- ------- -- -- ---- -- --- ---- - - ------ -------- ---- --- ------- ---------- ------ ------ ---- --- ------- ------- --
API
Array-table 提供了简单易用的 API，支持对表格进行排序、筛选等操作。
ArrayTable.create(target, data, options)
将一个数组转换为表格。target 可以是一个 CSS 选择器或 DOM 元素，表示目标表格的容器。data 是数据源，可以是二维数组或 JSON 数组。options 是一个可选的配置对象，支持以下属性：
attributeMap：一个对象，定义了表格中每一列的属性名，用于数据排序和筛选。例如{Name: 'data-name', Age: 'data-age'}表示表格中的第一列使用data-name属性，第二列使用data-age属性。默认值为null，表示使用表头作为属性名。search：一个布尔值，表示是否显示搜索框。默认值为true。sort：一个布尔值，表示是否允许对表格进行排序。默认值为true。
返回一个 Table 对象，表示表格对象。
Table.rows()
返回表格中的所有行，以数组的形式返回。每一行都是一个数组，表示该行数据行的所有单元格值。
Table.getRow(index)
返回表格中指定行的数据。
index：行的索引，从 0 开始。
Table.setRow(index, row)
设置表格中指定行的数据。
index：行的索引，从 0 开始。row：该行数据行的所有单元格值，以数组的形式表示。
Table.sort(column, order)
按照指定列进行排序。
column：列的索引或属性名，从 0 或表头开始。order：排序顺序，为'asc'（升序）或'desc'（降序）。
Table.filter(column, value)
对指定列进行筛选。
column：列的索引或属性名，从 0 或表头开始。value：筛选条件，为一个函数，该函数接受单元格的值作为参数，返回一个布尔值。如果该函数返回true，则表示该行将保留，否则将从表格中删除。
Table.refresh()
刷新表格，重新渲染表格内容。常用于修改表格数据后的更新操作。
示例代码
下面是一个完整的示例代码，演示了 Array-table 的基本用法和 API 的使用方法：
--------- -----
------
------
----- ----------------
------------------ ---------------
----- ---------------- -----------------------------------------------------
-------
------
--------------- ------------
---- ---------------------------
------- ------------------------------------------------------------
--------
--- ---- - -
-------- ------ ----------
--------- --- ----------
------- --- --------
----------- --- --------
--------- --- ----------
---------- --- --------
--------- --- ---------
--
--- ----- - ------------------------------------- ----- -
------- -----
----- -----
------------- -
----- ------------
---- -----------
------- -------------
-
---
---------------- ------- --------------
------------------ ------ -----------------
--------------- ------- ----- --- ---------
----------------- --------
---------------------- --------------- -
------ ----- --- ---------
---
---------
-------
-------在控制台中查看输出结果，可以看到表格数据已经被修改、排序、筛选了。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/60055feb81e8991b448dda80