在前端开发中，表格是不可避免的一部分，但是开发一个功能完善、使用方便且美观的表格并不容易。因此，这里介绍了一个优秀的 npm 包：@tongdun/react-ui-table。本文将深入介绍如何使用这个 npm 包。
安装
npm 安装：
--- - -----------------------
yarn 安装：
---- --- -----------------------
使用
安装完之后，在你的 React 组件中引入它即可使用：
------ ----- ---- --------
------ - ------ --------------- ------------- --------------- - ---- --------------------------
----- ---- - -
- --- -- -------- ---------- ------ -- --
- --- -- -------- -------- ------ -- --
- --- -- -------- -------- ------ -- --
--
----- --- ------- --------------- -
------------------ -
-------------
---------- - -
-------- -
- ----- ----- ------ ---- --
- ----- ---------- ------ --------- --
- ----- -------- ------ ------- --
--
---------------------- -
- ----------- ----- ------ ------ --
- ----------- ---------- ------ ------- --
- ----------- -------- ------ ------- --
--
-------------- ---
--
------------------ - ------------------------------
------------------------ - ------------------------------------
-
---------------------------------- -
--------------- ------------- ---
-
--------------- ------ -------- ------- -- -
--- - ---- - - -----------
-- ------- -
----- ---------- - ----------- - - - ---------------- - ----- - - - --
---- - -
--------
------------------ ------ -- -
------ -
--- ---------- - ------
-------
--
---
--
-
-- --------- -
---- - -------------- -- ---------------- - - ------- ------------------ - - ------
-
-- --------- -
----- ---------- - --- -------------
---- - ----------------- -- -------------------------
-
--------------- ---- ---
-
-------- -
----- - ----- -------- ---------------------- ------------- - - -----------
------ -
-----
------ ----------- ----------------- ------------
--------------- --
------------- ----------------------------- ------------------------------------------------ --
---------------- ------ --
--------
------
--
-
-
------ ------- ----API
<Table data={data} columns={columns} rowKey="id" />
| Props | 类型 | 描述 |
|---|---|---|
| data | Array | 渲染的数据数组 |
| columns | Array | 列的配置 |
| rowKey | string | 每个行的唯一标识符，默认为 id |
<TableHeaderRow />
表头组件，用于渲染表格的列名。
<TableEditRow editingRowIds={editingRowIds} onEditingRowIdsChange={onEditingRowIdsChange} />
编辑行组件，用于渲染一个可编辑行。其中 editingRowIds 为当前正在编辑的行的 id 的数组，onEditingRowIdsChange 为行的编辑状态发生变化时的回调函数。
<TableEditColumn addRow />
编辑列组件，用于渲染一个添加行的按钮。当点击该按钮时，它会将一个新的编辑行添加到表格中。
总结
npm 包 @tongdun/react-ui-table 是一个功能完善、使用方便且美观的表格组件，它可以帮助我们快速构建复杂的表格。上面的示例代码可以帮助你快速上手使用这个组件。希望本文对你有所帮助！
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/60066b5651ab1864dac66c33