React是前端领域中非常受欢迎的一个框架，它可以快速地构建复杂的单页应用程序，并可以与其他库和框架结合使用。其中用到的npm包也是很多，今天我们来介绍一款非常实用的npm包——react-edittable-table。
react-edittable-table 是一个提供了可编辑表格的 React 组件，它使用非常方便，可以用于快速构建数据录入界面。
安装
使用它前，我们需要先安装它。你可以使用 npm 来安装它，命令如下：
npm install --save react-edittable-table
使用
在安装好 react-edittable-table 之后，我们可以通过直接引入组件来使用它。
import ReactEditableTable from 'react-edittable-table';
然后我们就可以在代码中使用 ReactEditableTable 组件了。下面是一个简单的示例，演示如何在网页中渲染一个简单的可编辑表格：
-- -------------------- ---- -------
------ ----- ---- --------
------ ------------------ ---- ------------------------
----- --------------- ------- --------------- -
------------------ -
-------------
------------ - -
- ------ ------- ---------- ------- --------- ---- --
- ------ ------ ---------- ------ --------- ---- -
--
---------- - -
----- -
- ---- ---- ----- ----- ----- ---- -- --
- ---- ---- ----- ----- ----- ---- -- -
-
--
-
-------- -
------ -
-------------------
----------------------
----------------------------
------------------------
----------------------------
--
--
-
---------- - -------- -- -
-- -------
--------------------
-
------------ - -------- -- -
-- -------
--------------------
-
-
------ ------- ----------------在上面的示例中，我们定义了一个 MyEditableTable 组件，它利用 ReactEditableTable 组件显示一个可编辑的表格。表格中包含两列数据：Name 和 Age，其中 Name 和 Age 的值都可以编辑。当用户编辑了某一行之后，可以通过 onSave 属性处理保存逻辑，通过 onDelete 属性处理删除逻辑。
API
react-edittable-table 提供了几个适用于表格的配置选项：
columns
Type: Array
用于配置表格的列信息。每个数组元素代表一列，元素必须包含以下属性：
- title:String（必填）: 列标题。
- dataIndex:String（必填）：指定该列的数据源字段名称。
- editable:Boolean(可选)：指定该列的数据是否可以编辑，默认为false。
示例：
-- -------------------- ---- -------
----- ------- - -
-
------ -------
---------- -------
--------- -----
--
-
------ ------
---------- ------
--------- -----
--
--dataSource
Type: Array
用于配置表格的数据源。每个元素代表一行数据。其中每个元素必须包含一个唯一的 key 属性。示例：
const data = [
{ key: '1', name: 'John Doe', age: 30 },
{ key: '2', name: 'Jane Doe', age: 28 },
];onSave
Type: Function
用于处理表格中数据的保存。每当用户修改了一行表格数据，并点击保存按钮时，该函数会被调用，并将当前编辑数据作为参数传入。示例：
handleSave = (record) => {
console.log(record);
}onDelete
Type: Function
用于处理表格中数据的删除。每当用户点击某一行数据的删除按钮时，该函数会被调用，并将当前删除数据作为参数传入。示例：
handleDelete = (record) => {
console.log(record);
}rowClassName
Type: Function
用于指定每行表格元素的自定义CSS类。该函数接受一个参数 record，表示当前行数据。示例：
rowClassName={(record) => {
return record.age < 18 ? 'child' : '';
}}总结
react-edittable-table 是一个非常实用的 React 组件，可以帮助我们快速构建数据录入界面。通过这个组件，我们可以轻松地实现可编辑表格，让数据录入更加方便快捷。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600572ca81e8991b448e8f8f