Package Exports
- wumu-edit-table
- wumu-edit-table/dist/index.js
This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (wumu-edit-table) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.
Readme
wumu-edit-table
A simple react edit-table component
在线示例
🎊features
- 🏳🌈 简单易用，点哪编辑哪
- 🚀 虚拟滚动，再多数据都不怕卡顿啦
📌 todo list
- 📑 行内新增和删除
- 📑 自定义 cellRender
- 📑 其他类型 input：select、checkbox
- 📑 固定列
- 📑 表头可伸缩
🔨Usage
引入包
$ npm i wumu-edit-table简单使用
设计 api 时参考了antd design table
定义表头和数据;定义当前编辑的单元格editId；定义当前数据dataSource
import React, { useState } from 'react';
import { EditTable } from 'wumu-edit-table';
export default () => {
const [editId, onEdit] = useState('');
const columns = [
{ title: 'A', dataIndex: 'A',width: 300,},
{ title: 'B', dataIndex: 'B'},
{ title: 'C', dataIndex: 'C',width: 300,},
{ title: 'D', dataIndex: 'D'},
{ title: 'E', dataIndex: 'E', width: 380},
{ title: 'F', dataIndex: 'F', width: 200},
];
const dataSource = [
{ A: '四川成都', B: '前端开发', C: '益州大道', D: '1998-08-01', E: '攒够10万块钱' },
{ A: '四川广元', B: '出纳',C: '金融城',D: '1996-07-17', E: '能够开心的玩耍' },
{ A: '四川绵阳', B: '文字工作者', C: '居家',D: '1996-XX-XX', E: '佛系' },
];
const [list, setList] = useState(dataSource)
const onChange = (newList)=>{
console.log('newList', newList)
setList(newList)
}
return (
<EditTable
editId={editId}
onEdit={onEdit}
columns={columns}
dataSource={list}
maxHeight={320}
onChange={onChange}
/>
);
};
⚙ Options
👊 power by
based on dumi v2
📊 LICENSE
MIT