简介
react-grid-blues 是一个轻量级的 React 表格组件，用于呈现数据、支持排序、筛选、分页和自定义样式。它基于 React Hooks 实现，易于拓展，并提供了丰富的 API 和事件回调。
安装
使用 npm 安装 react-grid-blues 最新版本：
npm install react-grid-blues
或者使用 yarn：
yarn add react-grid-blues
使用
使用 react-grid-blues 需要先引入它：
import React from 'react'; import Grid from 'react-grid-blues'; // 引入组件 import 'react-grid-blues/styles.css'; // 引入组件样式
然后配置数据和列的信息：
-- -------------------- ---- ------- ----- ------- - - - ---- ----- ------ ------ - ---- ------- ------ -------- - ---- ------ ------ ------- -- ----- ---- - - ---- -- ----- ----- ----- ---- ---- ---- -- ----- ----- ----- ---- ---- ---- -- ----- ----- ------- ---- ---- ---- -- ----- ----- ------- ---- ---- --
最后在组件中使用：
<Grid columns={columns} data={data} />API
下面是 react-grid-blues 的主要 API：
Grid
Grid 组件，用于呈现表格。
Props
columns: 列信息，必需。data: 数据，必需。onSort: 排序事件回调。onFilter: 筛选事件回调。onPage: 分页事件回调。pageSize: 分页大小。pageIndex: 当前页索引。total: 总数据量。loading: 是否正在加载。noDataLabel: 没有数据时的文本提示。noResultsLabel: 没有结果时的文本提示。className: 自定义样式类名。
Column
Column 组件，用于定义列。
Props
key: 列的唯一标识，必需。title: 列的标题，必需。width: 列的宽度。sortable: 是否可排序。filterable: 是否可筛选。formatter: 格式化函数。className: 自定义样式类名。
Event objects
下面是 react-grid-blues 支持的事件对象。
SortEvent
排序事件对象，记录排序相关的信息。
{
field: string, // 排序字段
direction: 'asc' | 'desc', // 排序方向
}FilterEvent
筛选事件对象，记录筛选相关的信息。
{
field: string, // 筛选字段
operator: FilterOperator, // 筛选条件
value: any, // 筛选值
}PageEvent
分页事件对象，记录分页相关的信息。
{
pageIndex: number, // 当前页索引
pageSize: number, // 分页大小
total: number, // 总数据量
}Formatter functions
下面是 react-grid-blues 支持的格式化函数。
currency(value: number) -> string
将数字格式化为货币格式。
const columns = [
{ key: 'price', title: 'Price', formatter: currency },
];date(value: string | Date, format: string) -> string
将日期格式化为特定格式。
const columns = [
{ key: 'date', title: 'Date', formatter: (value) => date(value, 'YYYY-MM-DD') },
];Filter operators
下面是 react-grid-blues 支持的筛选条件。
Equal
等于
{ operator: FilterOperator.Equal, value: 10 }NotEqual
不等于
{ operator: FilterOperator.NotEqual, value: 10 }GreaterThan
大于
{ operator: FilterOperator.GreaterThan, value: 10 }GreaterThanOrEqual
大于等于
{ operator: FilterOperator.GreaterThanOrEqual, value: 10 }LessThan
小于
{ operator: FilterOperator.LessThan, value: 10 }LessThanOrEqual
小于等于
{ operator: FilterOperator.LessThanOrEqual, value: 10 }Contains
包含
{ operator: FilterOperator.Contains, value: 'john' }NotContains
不包含
{ operator: FilterOperator.NotContains, value: 'john' }StartsWith
以...开头
{ operator: FilterOperator.StartsWith, value: 'j' }EndsWith
以...结尾
{ operator: FilterOperator.EndsWith, value: 'n' }示例代码
下面是一个完整的示例，包含了外部 CSS 样式和事件回调函数：
-- -------------------- ---- -------
------ ------ - -------- - ---- --------
------ ----- - ------- -------------- - ---- -------------------
------ ------------------------------
----- ---- - -
- --- -- ----- ----- ----- ---- --- ------ ------ ----- ------------ --
- --- -- ----- ----- ----- ---- --- ------ ------ ----- ------------ --
- --- -- ----- ----- ------- ---- --- ------ ------ ----- ------------ --
- --- -- ----- ----- ------- ---- --- ------ ------ ----- ------------ --
--
----- ------- - -
- ---- ----- ------ ----- ------ ------ --
- ---- ------- ------ ------- ----------- ---- --
- ---- ------ ------ ------ ----------- ----- --------- ---- --
- ---- -------- ------ -------- ---------- --------- --------- ---- --
- ---- ------- ------ ------- ---------- ------- -- ----------- -------------- --------- ---- --
--
-------- --------------- -
------ --- - -----------------
-
-------- ----------- ------- -
------ --- ---------------------------- ---------- ------ ---------- -------------------- -------------
-
-------- ----- -
----- ----------- ------------- - ------------
----- ---------- ------------ - -------------
----- --------- ----------- - -------------
-------- ----------------- -
----------------- ------- -------
-
-------- ------------------- -
------------------- ------- -------
--------------------
-
-------- ----------------- -
----------------- ------- -------
------------------------------
----------------------------
-
----- ------------ - ----------------------- ------- -- -
----- -------- - ----------------
----- ----- - -------------
------ -------------------- -- -
----- ---------- - -------------------
------ ---------- -
---- ---------------------
------ ---------- --- ------
---- ------------------------
------ ---------- --- ------
---- ---------------------------
------ ---------- - ------
---- ----------------------------------
------ ---------- -- ------
---- ------------------------
------ ---------- - ------
---- -------------------------------
------ ---------- -- ------
---- ------------------------
------ -------------------------------------------
---- ---------------------------
------ --------------------------------------------
---- --------------------------
------ ---------------------------------------------
---- ------------------------
------ -------------------------------------------
--------
------ -----
-
---
-- ------
----- -------------- - --------- - ---------
----- ------------ - -------------- - ---------
----- --------- - ---------------------------------- --------------
----- ----- - --------------------
------ -
---- ----------------------
-----
-----------------
----------------
-------------------
-----------------------
-------------------
---------------------
-------------------
-------------
---------------
--------------- ---- ------
------------------ ------- ------
-------------------
--
------
--
-
------ ------- ----参考资料：
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60065f91238a385564ab6fab