antdesign-etable v0.1.9

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

events

methods

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.