介绍
在前端开发过程中，展示数据是必不可少的一个功能。我们可以使用表格来展示数据，而 react-tabledata-async 是一个方便快捷的开源库，可以帮助我们更加轻松地实现数据分页、排序、过滤等功能。
安装
npm install react-tabledata-async
使用
我们首先需要在代码中引入 TableData 组件：
import TableData from "react-tabledata-async";
然后，我们可以将 TableData 放到我们的组件中，如下所示：
-- -------------------- ---- -------
------ --------- ---- ------------------------
-------- ----- -
------ -
-----
----------
--------------------------------------------------
----------
- ------ ----- ------ ---- --
- ------ -------- ------ ------- --
- ------ ------------ ------ ----------- --
--
--
------
--
-
------ ------- ----上面的例子展示了如何使用 TableData 来展示从 https://jsonplaceholder.typicode.com/todos 中获取的数据，并且该数据只包含了 id、title 和 completed 三个字段。
参数
api
必须参数，指定获取数据的接口地址。
api={"https://jsonplaceholder.typicode.com/todos"}columns
必须参数，指定表格的列信息。
columns={[
{ title: "ID", field: "id" },
{ title: "Title", field: "title" },
{ title: "Completed", field: "completed" },
]}每个列由一个 title 和 field 组成，分别表示列标题和接口返回的数据中对应的字段名。
pageLength
可选参数，指定每页显示的条数，默认为 10。
pageLength={20}paginated
可选参数，指定是否开启分页功能，默认为 true。
paginated={false}sortable
可选参数，指定是否开启排序功能，默认为 true。
sortable={false}filterable
可选参数，指定是否开启过滤功能，默认为 true。
filterable={false}示例
-- -------------------- ---- -------
------ ----- ---- --------
------ --------- ---- ------------------------
-------- ----- -
------ -
-----
----------
--------------------------------------------------
----------
- ------ ----- ------ ---- --
- ------ -------- ------ ------- --
- ------ ------------ ------ ----------- --
--
---------------
----------------
---------------
-----------------
--
------
--
-
------ ------- ----总结
react-tabledata-async 是一个功能强大的开源库，可以帮助我们更加方便快捷地展示数据。在开发过程中，我们可以根据具体的需求配置相应的参数，以达到最佳的展示效果。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600552b981e8991b448d0221