在前端开发中，数据展示是一个重要的需求。而其中表格是比较常见的形式。随着数据的增加，我们需要对表格进行排序、过滤等操作。这个时候，一个好用的 npm 包就显得格外重要了。本文介绍了一个 npm 包 @evercode-lab/electrode-sortable-table，可以帮助我们轻松实现可排序的表格。
介绍
@evercode-lab/electrode-sortable-table 是一个基于 React 开发的表格组件。它通过 Props 方式将表格渲染需要的数据传递到组件内部，提供列宽度、列名、列数据类型、排序等功能。
安装
使用 npm 进行安装:
npm install @evercode-lab/electrode-sortable-table
使用
引入组件：
import SortableTable from "@evercode-lab/electrode-sortable-table";
传入需要渲染的数据：
-- -------------------- ---- -------
----- ------- - -
-
------ -------
---------- -------
------- --- -- -- -----------------------------
----------------- --------
--
-
------ ------
---------- ------
------- --- -- -- ----- - -----
--
-
------ ----------
---------- ----------
------- --- -- -- ----------------------------------
-
--
----- ---- - -
-
---- ----
----- ----- -------
---- ---
-------- ---- ---- --- - ---- -----
--
-
---- ----
----- ---- -------
---- ---
-------- ------- --- - ---- -----
--
-
---- ----
----- ---- -------
---- ---
-------- ------- --- - ---- -----
-
--
----- --- - -- -- -
------ -
--------------
-----------------
-----------
------------------
------------
--
--
--Props
SortableTable 接受以下 Props：
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| columns | 表格列的配置描述，具体项见下表 | ColumnProps[] | 无 |
| data | 数据数组 | any[] | 无 |
| pagination | 分页配置 | boolean | true |
| rowKey | 表格行 key 的取值，可以是 string 或者 function | string| | 无 |
| loading | 是否加载中 | boolean | false |
| showHeader | 是否显示表头 | boolean | true |
| bordered | 是否展示外边框和列边框 | boolean | false |
| size | 表格大小 | string | default |
| scroll | 设置横向或纵向滚动，也可用于指定滚动区域宽高 | Object | 无 |
其中 columns 的类型定义为：
-- -------------------- ---- -------
--------- -------------- -
---
- ------
--
------- ------ - ----------------
---
- ----------- ---
--
----------- -------
---
- --------
--
-------- ------- - ---- -- -- -- -- ------ - --------
---
- ------------ -------- ---------
--
------------------ -------- - ----------
---
- ---
--
------- ------ - -------
---
- ------
--
------
- --------
- --------
- ----------
- -------
- -------
- ------
- --------
- ---------
---
- --------------
--
-------- -
---------------- ---------
----------------------- --------
------------------------------- --------- -------- -- -----
--------- - ----- ------- ------ ------ ----
---------- ------- ---- ------- -- -- --------
---------------- --------
--------------- ------
----------- --------- - ---------
---------- --------
--
-实现原理
@evercode-lab/electrode-sortable-table 的主要实现原理为通过设置需要排序的列属性 sorter (可为函数，也可以为 Boolean)来实现排序。同时提供了搜索属性 filter，并支持自定义筛选器。
结果展示
最终的表格效果如下：
总结
@evercode-lab/electrode-sortable-table 是一个非常好用的可排序的表格组件。它提供了许多功能和丰富的 Props 来满足日常开发中的需求。我们可以根据实际需求来使用它，同时也可以根据自己的需求对其进行扩展。感谢 @evercode-lab 的开发者们为开发者提供优秀的开源工具，让我们能够更加高效、便捷地进行开发。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055fc781e8991b448dd3b5