前言
在前端开发中，常常需要用到表格组件。但是，自己写一个表格组件的工作量有些大，而且往往会被一些细节问题所困扰。因此，我们可以使用@minedeljkovic/react-datagrid这个npm包来快速地实现一个易用、美观且丰富功能的表格组件。
安装
我们可以使用npm或yarn来安装@minedeljkovic/react-datagrid：
--- ------- ----------------------------- -- -- ---- --- -----------------------------
用法
我们需要在代码中引入@minedeljkovic/react-datagrid：
------ ----- ---- -------- ------ - -------- - ---- --------------------------------
然后，我们就可以开始使用组件了：
-------- ----- -
----- ------- - -
- ----- ----- ------- ---- --
- ----- ------- ------- ------ --
- ----- ------ ------- ----- -
--
----- ---- - -
- --- -- ----- -------- ---- -- --
- --- -- ----- ------ ---- -- -
--
------ -
---------
-----------------
-----------
--
--
-这样，我们就可以得到一个简单的表格：
当然，我们可以通过props来实现更多自定义的功能。比如，我们可以对表格进行分页：
-------- ----- -
----- ------- - -
- ----- ----- ------- ---- --
- ----- ------- ------- ------ --
- ----- ------ ------- ----- -
--
----- ---- - -
- --- -- ----- -------- ---- -- --
- --- -- ----- ------ ---- -- --
- --- -- ----- -------- ---- -- --
- --- -- ----- -------- ---- -- --
- --- -- ----- -------- ---- -- --
- --- -- ----- -------- ---- -- --
- --- -- ----- --------- ---- -- --
- --- -- ----- -------- ---- -- --
- --- -- ----- -------- ---- -- --
- --- --- ----- ------- ---- -- -
--
----- ------------- --------------- - ------------------
----- ---------- ------------ - ------------------
----- ------------ - --------------- -- -
------------------------------
--
----- ---------------- - ------------- -- -
-------------------------
--
------ -
---------
-----------------
-----------
-------------------------
---------------------------
-------------------
-----------------------------------
--
--
-我们现在可以得到一个具有分页功能的表格：
API
columns
包含列的数组，每个列对象包含name和header属性。
----- ------- - - - ----- ----- ------- ---- -- - ----- ------- ------- ------ -- - ----- ------ ------- ----- - --
rows
包含行的数组，每个行对象包含与对应列相同的属性名。
----- ---- - - - --- -- ----- -------- ---- -- -- - --- -- ----- ------ ---- -- - --
currentPage
当前页数（从1开始）。
----- ------------- --------------- - ------------------ --------- -- --- ------------------------- ----------------------------- --
onPageChange
页数更改时的回调函数。它接收一个新的页数作为参数。
----- ------------ - --------------- -- - ------------------------------ -- --------- -- --- --------------------------- --
pageSize
每页显示的行数。
----- ---------- ------------ - ------------------ --------- -- --- ------------------- ------------------------------ --
onPageSizeChange
每页显示的行数更改时的回调函数。它接收一个新的每页显示行数作为参数。
----- ---------------- - ------------- -- - ------------------------- -- --------- -- --- ----------------------------------- --
以上是一些常用的API，更多API可以在Github上进行学习和参考。
结语
@minedeljkovic/react-datagrid是一个非常实用的npm包，能够大大方便我们的表格展示工作。当然，前端的技术栈是非常广泛的，我们也应该根据自己的业务和需求，在茫茫的前端技术中，选择最合适的工具和框架。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/134463