import React, {useContext, useState} from "react";
import EditableTable from 'antdesign-etable';
import {Button} from 'antd';
import styles from './index.css';
const data = [
{id:1,name:'Test 1',title:'Haha',status:0,desc:'Description 1',type:0,created_time:'2019-5-2'},
{id:2,name:'Test 2',title:'Haha',status:1,desc:'Description 2',type:1,created_time:'2019-5-3'},
{id:3,name:'Test 3',title:'Haha',status:2,desc:'Description 3',type:0,created_time:'2019-5-4'}
];
const type = ['Type 1','Type 2'];
const status = ['Normal','Abnormal','Stop'];
const cols = [
{
title: 'Name',
dataIndex: 'name',
editable:true,
editor: {
required: true,
},
},
{
title: 'Type',
dataIndex: 'type',
editable:true,
editor: {
type: 'select',
options: [
{key: 1, value: 'Type 1'},
{key: 2, value: 'Type 2'},
]
},
render: (text, record) => (
type[text]
),
},
{
title: 'date',
dataIndex: 'created_time',
editable:true,
editor: {
type: 'datetime'
}
},
];
const allCols = [
...cols.slice(0,2),
{
title: 'title',
dataIndex: 'title',
editable:true,
width: 120,
},
...cols.slice(2),
{
title: 'status',
dataIndex: 'status',
editable:true,
width: 120,
editor: {
type: 'select',
options: status.map((value,key) => ({key,value}))
},
render: (text, record) => (
status[text]
),
}
];
export default function() {
const [changedData,setChangedData] = useState([]);
const fetch = (pager,filter,sorter) => {
// Do Remote Fetch
};
return (
<div className={styles.root}>
<div style={{textAlign:'right',marginBottom:16}}><Button type="primary">save</Button></div>
<EditableTable
title=""
loading={false}
data={data}
changedData={changedData}
pageSize={10}
total={100}
cols={cols}
allCols={allCols}
onFetch={()=>fetch()}
onChangedDataUpdate={(d)=>{setChangedData(d)}}
/>
</div>
);
}
Name | Description | Type | Default Value |
---|---|---|---|
data | Initialization data | Array | [] |
changedData | Used to save the updated data added, deleted and modified | Array | [] |
cols | Table Columns | Array | [] |
allCols | Table columns can be displayed (the format is the same as the cols attribute) | Array | [] |
rowKey | Unique ID | String | 'id' |
newRowKeyPrefix | New data unique identification prefix | String | 'new_' |
title | Title | String or Component | '' |
loading | Read status | Boolean | false |
pageSize | Number of records per page | Number | 10 |
total | Total number of records | Number | 0 |
multiSelect | Multiple selections | Boolean | false |
showHeader | Whether to show the top bar | Boolean | true |
showFooter | Whether to show the bottom bar | Boolean | true |
showToolbar | Whether to show the top toolbar | Boolean | true |
showSelector | Whether to show the selection button | Boolean | false |
showAddBtn | Whether to show the add button | Boolean | true |
showOpBtn | Whether to show edit and delete buttons | Boolean | true |
showTopPager | Whether to show the top pager | Boolean | true |
showBottomPager | Whether to show the bottom pager | Boolean | false |
buttons | Custom action button group | Component | None |
style | style | Object | null |
expandedRowRender | Rendered content when expanding row | ReactNode | null |
expandedFirstRow | Expand the first row by default | Boolean | false |
editOnSelected | Edit when a row is clicked | Boolean | false |
parentForm | incoming form | FormInstance | null |
Name | Description | Parameters | Return Value |
---|---|---|---|
canEdit | Whether each line is editable | record | Boolean |
canRemove | Whether each row can be deleted | record | Boolean |
beforeEdit | Triggered before editing data | None | None |
afterEdit | Triggered after editing data | None | None |
onAdd | Default object for new data | None | Object |
onFetch | Request data event | pager,filter,sorter | None |
onChangedDataUpdate | Triggered when update data changes | arr | None |
onSelectRow | Number of records per page | rows | None |
onDownload | Number of records per page | filter,sorter | None |
onExpandedRow | Triggered when a row is expanded | record | None |
Name | Description | Parameters | Return Value |
---|---|---|---|
resetTable | Reset table page number | None | None |
Array, used to save the changed data, each piece of data will use isNew, isUpdate, isDelete to identify whether the data is new, updated or deleted
[{
title: 'ID',
dataIndex: 'id',
editable:false,
},{
title: 'name',
dataIndex: 'name',
sorter: true,
editable:true,
editor: {
required: true,
type: 'select',
options: [
{key: 1, value: 'Type 1'},
{key: 2, value: 'Type 2'},
],
validator: (rule,value,callback) => {
if(data.find(d => d.name === value))
callback('Name already exists!');
else
callback();
},
},
}]