@preamp/tables 是一款基于 React 的数据表格组件库，由 Preamp 团队开发维护。它提供了丰富的表格组件，包括基础表格、带筛选和排序的表格、带分页的表格等。这款组件库提供了简单易用的 API，支持定制和扩展，适用于各种场景的数据展示和数据处理。
安装和使用
使用 @preamp/tables 非常简单，只需要在项目中安装即可。下面是具体的安装方式：
- 首先，打开终端，进入项目的根目录，执行以下命令安装
@preamp/tables：
npm install @preamp/tables
- 安装完成后，在代码中引入
@preamp/tables：
import { Table, Column } from '@preamp/tables';- 然后，可以在组件中使用
Table和Column组件：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------ ------ - ---- -----------------
------ ------- -------- -------------- -
----- ------- - -
-
------ -----
---- -------
---------- ------
--
-
------ -----
---- ------
---------- -----
-
--
----- ---- - -
- ----- ----- ---- -- --
- ----- ----- ---- -- -
--
------ -
------ ----------------- ------------------
------- ---------- ---------------- ---------- --
------- ---------- --------------- --------- --
--------
--
-基础表格
下面是一个基本的表格示例，包含列名和数据列。这个表格没有排序、筛选和分页功能。
<Table dataSource={data} columns={columns}>
<Column title="姓名" dataIndex="name" key="name" />
<Column title="年龄" dataIndex="age" key="age" />
</Table>表格属性
columns: 列定义dataSource: 数据源数组rowKey: 每行数据的唯一标识符loading: 数据是否正在加载pagination: 分页配置项
列属性
title: 列名key: 列的唯一标识符dataIndex: 列数据在数据源数组中的键名
带筛选和排序的表格
@preamp/tables 提供了用于筛选和排序的多种表头组件，可以轻松地添加筛选和排序功能。下面是一个示例，包含了筛选框和排序功能。这个表格的数据规模较小，只有两条数据，因此并没有启用分页功能。
-- -------------------- ---- -------
------ ------ - -------- - ---- --------
------ - ------ ------- ------ ------ - ---- -----------------
------ ------- -------- -------------------- -
----- ------ -------- - ----------
- ----- -------- ---- --- -------- ------------ --
- ----- ------ ---- --- -------- ---- ----- --
- ----- ------- ---- --- -------- ---- -------- --
- ----- -------- ---- --- -------- ---- ---------- -
---
----- ------------ -------------- - -------------
----- ----------- ------------- - -------------
----- ----------- ------------- - -------------
----- ----------- ------------- - -------------
----- ---------------------- - - -- -
------------------------------
--
----- --------------------- - ----- -- -
--------------------
--
----- ----------------- - ------------ -------- ------- -- -
---------------------------
---------------------------
--
----- ---------- - ----
------------ -- ----------------------------- - ---
------------ -- --------- - -------- --- --------- - -----
--------- -- -- --------- --- --------
- ------------ - ------------
- ------------ - ------------
--
----- ------- - -
-
------ -----
---------- -------
---- -------
--------------- -- -- -
---- -------- -------- - ---
------
----------------
------------------
---------------------------------
--
------
--
----------- -- -- -
----- ------------------------------------
--
--------- ------- ------- -- -
-------------------------- - --
--
------- --- -- -- -
----------------------------
-
--
-
------ -----
---------- ------
---- ------
--------------- -- -- -
---- -------- -------- - ---
-------
----------------
-----------------
--------------------------------
-------- ------ --- --
-
-------------- -----------------------------
-------------- -----------------------------
-------------- -----------------------------
-------------- -----------------------------
---------
------
--
----------- -- -- -
----- ------------------------------------
--
-------- -
- ----- ----- ------ -- --
- ----- ----- ------ -- --
- ----- ----- ------ -- --
- ----- ----- ------ -- --
--
--------- ------- ------- -- -
---------- --- -----
--
------- --- -- -- -
----- - -----
-
-
--
------ -
------
-----------------------
-----------------
----------------------------
------------------
--
--
-表头属性
筛选和排序功能都是通过表头的属性来实现的。
filterDropdown: 筛选框（Node）filterIcon: 筛选图标（Node）onFilter: 筛选回调函数filters: 筛选选项数组sorter: 排序回调函数
操作属性
onChange: 筛选和排序的回调函数
带分页的表格
@preamp/tables 还支持带分页的表格，可以通过属性配置启用分页功能。下面是一个示例，实现了带分页、筛选和排序的表格。这个表格的数据规模较大，共有 100 条数据。
-- -------------------- ---- -------
------ ------ - --------- --------- - ---- --------
------ - ------ ------- ------ ------ - ---- -----------------
------ ------- -------- ------------------------ -
----- ------ -------- - -------------
----- ------------ -------------- - -------------
----- ----------- ------------- - -------------
----- ----------- ------------- - -------------
----- ----------- ------------- - -------------
----- ------------ -------------- - ----------
---------------- ---- --- --- ----
---------------- -----
---------------- -----
-------- --
--------- ---
------ -
---
----- --------- - ------- - --- -- -
----- - -------- -------- - - -------
----- --- - ----------------------------------------------------------------
------------
----------
-------------- -- ----------------
------------ -- -
----- ----- - ----------------------- -- --
--- ----------------
----- ------------------- -------------------
---- -------------
------ ----------
----
---------------
---------------
--------------
--------
---------
------ ---
---
---
--
------------ -- -
----------------------
-- --------------
----- ---------------------- - - -- -
------------------------------
---------------
--------------
-------- -
---
--
----- --------------------- - ----- -- -
--------------------
---------------
--------------
-------- -
---
--
----- ----------------- - ------------ -------- ------- -- -
------------------------- - ------------ - ----
------------------------- - ------------ - ----
---------------
-------------
---
--
----- -------------------- - --------- --------- -- -
---------------
--------------
--------
--------
---
--
----- ---------- - ----
------------ -- ----------------------------- - ---
------------ -- --------- - -------- --- --------- - -----
--------- -- -- --------- --- --------
- ------------ - ------------
- ------------ - ------------
--
----- ------- - -
-
------ -----
---------- -------
---- -------
--------------- -- -- -
---- -------- -------- - ---
------
----------------
------------------
---------------------------------
--
------
--
----------- -- -- -
----- ------------------------------------
--
--------- ------- ------- -- -
-------------------------- - --
--
------- --- -- -- -
----------------------------
-
--
-
------ -----
---------- ------
---- ------
--------------- -- -- -
---- -------- -------- - ---
-------
----------------
-----------------
--------------------------------
-------- ------ --- --
-
-------------- -----------------------------
-------------- -----------------------------
-------------- -----------------------------
-------------- -----------------------------
---------
------
--
----------- -- -- -
----- ------------------------------------
--
-------- -
- ----- ----- ------ -- --
- ----- ----- ------ -- --
- ----- ----- ------ -- --
- ----- ----- ------ -- --
--
--------- ------- ------- -- -
---------- --- -----
--
------- --- -- -- -
----- - -----
-
--
-
------ -----
---------- --------
---- -------
-
--
------ -
------
-----------------------
-----------------
----------------------------
-----------------------
---------------------------------------
--
--
-分页属性
pagination: 分页配置项onPageSizeChange: 每页数量更改回调函数
定制
@preamp/tables 的设计思路是尽量简单易用，同时也提供了一定程度的定制功能，可以满足一些特殊的需求。
自定义表格单元格
@preamp/tables 的表格单元格默认是文本单元格，可以通过自定义单元格渲染函数来定制单元格的样式和结构。下面是一个自定义单元格渲染函数的示例：
-- -------------------- ---- -------
----- ------- - -
-
------ -----
---------- -------
---- -------
------- ------ ------- -- -
--------
--------------------------
-------------------
-
-- ----------------- --------------- ------------- ------------
------
----
----------
-
--
-
------ -----
---------- ------
---- -----
-
--自定义筛选菜单
@preamp/tables 的筛选菜单默认是一个下拉菜单，可以通过自定义筛选菜单的渲染函数来定制筛选菜单的样式和结构。下面是一个自定义筛选菜单的示例：
-- -------------------- ---- -------
----- ------- - -
-
------ -----
---------- -------
---- -------
--------------- -- ---------------- ------------ -- -- -
---- -------- -------- - ---
------
----------------
-----------------------
----------- -- ----------------------------------
--
---- -------- ---------- - ---
-------
--------------
------------
-------- ------ -- --
----------- -- ----------------------------
-
--
---------
-------
------------
-------- ----------- -- ------ -- --
----------- -- -----------------------------
-
--
---------
------
------
--
----------- -- -- -
----- ------------------------------------
--
--------- ------- ------- -- -
-------------------------- - --
-
-
--
----- ------------- - -------------- -- -
-------------------------------
----------------
--------------------
--
----- ----------- - ----------------- -- -
--------------------
----------------
------------------
--------------------
--定制样式
@preamp/tables 没有默认的样式，可以通过 CSS 或 LESS 文件来自定义样式。可以通过全局样式、局部样式、覆盖样式、继承样式等方式对组件样式进行定制。
下面是一个简单的全局样式的示例：
-- -------------------- ---- ------- --------------- - ------------- ----- -------------- ----- ----------- ------- - ---------------- - -- - -- - ----------------- -------- ------------ ----- ----------- ------- - ---------------- - -- - -- -------- - ------------ ---- - ---------------- - -- - -- - ----------- ------- --------------- ------- - ---------------------------- --------------------------- - - - ----------------- ------- ----------- ------------- ------- ----------- ------ ------- ----------- -
总结
@preamp/tables 为 React 应用提供了一款高效、灵活的表格组件库，支持基础表格、筛选和排序、分页、自定义、样式定制等多种功能。通过本文的介绍和示例，读者应该能够对 @preamp/tables 的使用和定制有初步的了解和掌握。在实际开发过程中，可以根据实际需求，灵活使用组件提供的 API 和样式，让前端表格展示和数据处理更加简洁高效。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/preamp-tables