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