介绍
frypan-react-mobx-grid是一个用于制作可编辑数据表格的React组件库。它是基于React和MobX构建的，用于简化了React表格的数据管理。
安装
安装npm包：
npm install frypan-react-mobx-grid
用法
以下是一个简单的示例，展示如何使用frypan-react-mobx-grid来创建一个带有编辑功能的数据表格：
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ - -------- - ---- -------------
------ - ----- ------ - ---- -------------------------
----- --- ------- --------- -
-------- -
----- ----- - -
----- -
- ----- -------- ------ ---- --
- ----- --------- ------ ---- --
- ----- --------- ------ ---- --
--
---- ------ -- -
----------------------
--
------- ------- -- -
------------------------ ---
--
------- ------- ----- -- -
----------------- - -----
--
--
------ -
----- --------------
------- ------------ ------------ --
------- ------------- ------------- --
-------
--
-
-
------ ------- --------------在上面的示例中，我们首先定义了一个store对象，它保存我们的数据和一些操作数据的方法，如添加、删除和更新项。接着，我们创建了Grid和Column组件，并从store中获取数据和方法。最后，我们将Grid和Column组件渲染到页面上。
API
<Grid />
Grid组件用于包裹我们的表格，并且从store中获取数据和操作数据的方法。
Props
store
类型: Object
必需项。
一个对象，包含着我们的数据和一些操作数据的方法。
editable
类型: boolean
一个布尔值，表示表格是否可以编辑。默认为true。
emptyText
类型: string
一个字符串，表示当表格没有任何数据时，显示在表格上的文本。默认为"No data."
height
类型: number/string
一个数字或字符串，表示表格的高度。默认为"auto"。
loading
类型: boolean
一个布尔值，表示是否正在加载数据。默认为false。
onAdd
一个回调函数，当添加数据时被调用。
onDelete
一个回调函数，当删除数据时被调用。
onUpdate
一个回调函数，当更新数据时被调用。
plugins
类型: Array
一个数组，表示需要使用的插件。默认为空数组。
selection
类型: boolean/object
一个布尔值或对象，表示是否启用单元格选择。默认为false。
如果启用了单元格选择，可以使用以下选项：
Properties
mode：表示选择模式。支持的值为："cell"（单元格选择模式）或 "row"（行选择模式）。默认为"cell"。
onChange：选择单元格或行后的回调函数。
<Column />
Column组件用于表示表格的每一列，并且从store中获取该列的数据。
Props
field
类型: string
必需项。
一个字符串，表示该列的数据在store中的属性名。
title
类型: string
一个字符串，表示该列的标题。
width
类型: number/string
一个数字或字符串，表示该列的宽度。默认为100。
editor
类型: function
一个函数，用于自定义该列的编辑器。函数应当返回一个React组件。
插件
frypan-react-mobx-grid包含了以下可选插件：
FilterPlugin
FilterPlugin用于为表格添加筛选功能。
Props
fields
类型: Object
必需项。
一个对象，表示每列的筛选条件。对象的属性名应当对应每列的数据属性名，在每列中可以设置如下条件：
emptyText：该列没有数据时显示的文本。
filterType：筛选数据时所使用的过滤器类型。过滤器可以是以下之一："like"（表示匹配），"eq"（表示相等），"neq"（表示不相等），"gte"（表示大于或等于），"gt"（表示大于），"lte"（表示小于或等于），或 "lt"（表示小于）。默认为"like"。
filterValue：筛选数据所使用的匹配值。
PaginationPlugin
PaginationPlugin用于为表格添加分页功能。
Props
current
类型: number
必需项。
一个数字，表示当前页码数。
pageSize
类型: number
一个数字，表示每页的数据量。
pageSizeOptions
类型: Array
一个数组，表示分页器所支持的每页数据量选项。默认为[10, 20, 50, 100]。
totalRecords
类型: number
一个数字，表示数据的总记录数。
onChange
类型: function
当页数或每页数据量发生变化时调用的回调函数。该函数接受两个参数：page（表示变化后的页码数）和 pageSize（表示变化后每页的数据量）。
结论
frypan-react-mobx-grid是一个非常简单但实用的组件库，可以帮助在React应用中快速实现可编辑的数据表格，并且也提供了可自定义的插件。如果你正在寻找一种简单的方法来管理React数据，我强烈建议你试试这个库。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600560c081e8991b448df096
