antdesign-etable

Ant Design Editable Table

Usage

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>
  );
}

API

EditableTable

Attributes

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

events

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

methods

Name	Description	Parameters	Return Value
resetTable	Reset table page number	None	None

Config

changedData

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

cols

Parameter example

[{
   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();
     },
   },
}]

editable：Set editable status

editor：The default type of the object is text and Supported types include select、number、datetime、checkbox，

If you need to pass in the options parameter for select

rowKey

The unique identifier of the data, must be unique, used to judge the editing status and matching data

onAdd

When you click Add, the method of initializing data can be configured to return a new data object, which can be used to set some default values

onChangedDataUpdate

This method is triggered every time you add, update, or delete, and pass in the updated array

onSelectRow

This method will pass in an array of selected objects. If it is a single-selection mode, the array only contains the objects of the currently clicked row

onDownload

Triggered when you click the toolbar to download. If the method is configured, the method will receive two parameters of filter and sorter. If there is no configuration method, the excel download of the current page will be generated by default.