当我们需要在前端项目中使用表格时，我们通常会选择开源的表格库，比如 Ant Design 的 Table 或者 Element-UI 的 Table。但是在某些场景下，我们需要自己编写一些表格组件，那么如何能够快速、方便地完成呢？这时候就可以参考 @xhubio/table-common 这个 npm 包了。
什么是 @xhubio/table-common
@xhubio/table-common 是一个基于 React 和 TypeScript 的 npm 包，它提供了一些组件和 hooks，帮助我们快速构建表格，同时也允许我们自定义一些表格的样式和行为。
如何安装
使用 npm 进行安装：
npm install @xhubio/table-common
如何使用
Table 组件
Table 组件是 @xhubio/table-common 包中最核心的组件之一。它允许我们将数据以表格的形式展示在页面上，并且支持排序、分页、自定义列等功能。
基本使用
在使用 Table 组件之前，我们需要先安装和引入它：
-- -------------------- ---- -------
-- -- ----- ----- -----
------ - ------ ------------ --------- - ---- -----------------------
--------- ---- -
--- -------
----- -------
---- -------
-
--------- ----- -
----------- -------
-
----- --------- - -- ---------- -- ------ -- -
-- -----
----- -------- ----------------- - -
-
------ -----
---------- -----
------- --- -- -- ---- - -----
--
-
------ -----
---------- -------
--
-
------ -----
---------- ------
------- --- -- -- ----- - ------
----------------- --------- -- ----------
--
--
------ -
------ ----------------------- ----------------- --
--
--自定义列
除了基本的表格列之外，@xhubio/table-common 也允许我们自定义列。例如，我们可以通过使用 render 函数来渲染自定义的列：
-- -------------------- ---- -------
-- -----------
----- ------------------ ----------------- - -
-
------ -----
---------- -----
--
-
------ -----
---------- -------
--
-
------ -----
---------- ------
------- --- -- -- ----- - ------
----------------- --------- -- ----------
--
-- ----
-
------ -----
------- ------ ------- -- -
---------------------- - -- - ---------------------
--
--
--分页
如果我们的数据量较大，可以使用 Table 组件的 pagination 属性来开启分页功能：
-- -------------------- ---- -------
----- ----------------------- - -- ---------- -- ------ -- -
----- -------- ----------------- - -
-- ---
--
------ -
------
-----------------------
-----------------
-------------
--------- ---
--
--
--
--事件
@xhubio/table-common 还支持一些表格的事件，例如：
- onRowClick：行点击事件。
- onRowDoubleClick：行双击事件。
- onRowMouseEnter：鼠标移入行事件。
- onRowMouseLeave：鼠标移出行事件。
-- -------------------- ---- -------
----- ------------------- - -- ---------- -- ------ -- -
----- -------- ----------------- - -
-- ---
--
----- -------------- - -------- ----- -- -
---------------- -- - ------------ -----
--
------ -
------
-----------------------
-----------------
---------------------------
--
--
--useColumnsEffect hook
@xhubio/table-common 中的 useColumnsEffect hook 可以帮助我们快速实现一些常见的表格列操作，例如选中列、筛选列、隐藏列等操作。
-- -------------------- ---- -------
-- -- ---------------- ----
------ - ---------------- - ---- -----------------------
----- -------------------------- - -- ---------- -- ------ -- -
----- ----------------- ------------------- - -----------------------
----- --------------- ----------------- - ---------- ----- -------- --- -------
----- --------------- ----------------- - -----------------------
----- -------- ----------------- - -
-- ---
--
-- -- ---------------- ----
------------------
--------
----------------
-------------------
--------------
-----------------
--------------
-----------------
---
------ -
------ ----------------------- ----------------- --
--
--更多组件和 hooks
除了上述介绍的 Table 组件和 useColumnsEffect hook 之外，@xhubio/table-common 还提供了一些其他的组件和 hooks。例如：
- TableRowEditable：可编辑行组件。
- useEditModalEffect：可编辑模态框 hook。
- useApiPagination：后端分页 hook。
如果您对这些组件和 hooks 感兴趣，可以查看官方文档。
总结
在前端项目中使用表格是一件比较常见的事情，而使用 @xhubio/table-common 可以帮助我们更加方便、快速地完成表格组件的开发。通过本文的介绍，您已经了解了 @xhubio/table-common 的基本用法和一些高级用法，下一步可以尝试在自己的项目中使用它。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600672673660cf7123b36597