An edit table component based on antd

Component introduction

An editable table component encapsulated by table, form and other components based on antd supports single line editing and multi line editing. After editing, the data is automatically saved and updated, which simplifies the linkage between controls and the editing of table data

Don’t say anything, just go to the code:

• Basic use, the whole table can be edited

import React from 'react';
import { Editable } from 'dumi';
import { Input, Button, InputNumber } from 'antd';

const fields = [
  {
    Title: 'name',
    id: 'name',
    width: '30%',
    editable: true,
  },
  {
    Title: 'Introduction',
    id: 'info',
    children: [
      {
        Title: 'age',
        id: 'age',
        editable: true,
        renderFormInput: () => {
          return <InputNumber />;
        }
      },
      {
        Title: 'height',
        id: 'height'
      }
    ]
  },
  {
    Title: 'address',
    id: 'address',
    editable: true,
    renderFormInput: () => {
      return <Input />
    },
    trigger: 'onBlur',
  }
]

export default () => {
  return <div>
    <Editable
      defaultData={{age: 90}}
      fields={fields}
      onChange={val => {
        console.log(val);
      }} />
  </div>;
};

effect:

• Option linkage

import React from 'react';
import { Editable } from 'dumi';
import { Input, Button, InputNumber } from 'antd';

const fields = [
  {
    Title: 'name',
    width: '30%',
    id: 'name',
    editable: true,
    children: [
      {
        Title: 'last name',
        id: 'firstName',
        editable: true,
        renderFormInput: (record, { value, onChange }, form) => {
          return <Input 
            value={value} 
            maxLength={3}
            onChange={(val) => {
              if (onChange) onChange(val);
              form.setFieldsValue({
                allName: `${val?.target?.value}-${record?.lastName || ''}`,
              })
            }} />
        },
      },
      {
        Title: 'name',
        id: 'lastName',
        editable: true,
        renderFormInput: (record, { value, onChange }, form) => {
          return <Input 
            value={value}
            onChange={(val) => {
              if (onChange) onChange(val);
              form.setFieldsValue({
                allName: `${record?.firstName || ''}-${val?.target?.value}`,
              })
            }} />
        },
      },
      {
        Title: 'full name',
        id: 'allName',
        column: {
          render: (text) => {
            return <div style={{width: 120}}>{text}</div>
          }
        }
      }
    ]
  },
  {
    Title: 'address',
    id: 'address',
    editable: true,
    renderFormInput: () => {
      return <Input />
    },
    trigger: 'onBlur',
  }
]

export default () => {
  return <div>
    <Editable
      defaultData={{age: 90}}
      fields={fields}
      onChange={val => {
        console.log(val);
      }} />
  </div>;
};

effect:

Use API:

• EditableProps

parameter	explain	type	Default value
value	The value of the tab list	FieldType	–
fields	The configuration description of the table column is shown in the table below	FieldType[]	–
onChange	Callback of table data change	(value: object[]) => void;	–
multiple	Enable multi line editing	boolean	true
defaultData	Default data of new cells in table	object	–
getActionRef	Gets the callback of the component operation function group	(ref: React.MutableRefObject<actionRefType>) => void;	–
deleteBtnText	Delete button copy	React.ReactNode	delete
hideAddBtn	Do you want to hide the new button at the bottom	Boolean	false
addBtnProps	Add a button configuration item, which is the same as the button of antd	ButtonProps	–
addBtnText	New button copy	React.ReactNode	Add a line
tableProps	The configuration item of the table is the same as that of the table component in antd, but the component intercepts the following in the configuration item:pagination、rowKey、components、dataSource、columns、onRow	TableProps	–
max	Maximum length of list	number	–
onRowValuesChange	The callback function of row data change can be used for data linkage;	onRowValuesChangeType	–
deleteBtnProps	Delete button configuration options	ButtonProps	–
deleteBtnText	Delete button copy	string	delete
editBtnProps	Edit button configuration options	ButtonProps	–
editBtnText	Edit button copy	string	edit
saveBtnProps	Save button configuration options	ButtonProps	–
saveBtnText	Save button copy	string	preservation
cancelBtnProps	Cancel button configuration options	ButtonProps	–
cancelBtnText	Cancel button copy	string	cancel
optionExtraBefore	The elements in front of the operation options; note:When editing a single line, it is not displayed in editing status	–	–
optionExtraAfter	Operation options; note:When editing a single line, it is not displayed in editing status	–	–
optionSpaceProps	When there are multiple elements in the operation options, the space package will be used, and the optionspaceprops will be used to configure the space component, or it will be configured as false without using the component package	`SpaceProps	Boolean`	–
optionRender	Custom action options	(r: Record, optionNodes: object) => React.ReactChild	–

fields

parameter	explain	type
title	Table title	string
id	Corresponding field name	Dataindex of table, name of formitem, default value of configuration item
formItemProps	Formitem component configuration item
column	It is the same as the column data of the table, but it intercepts the children attribute. If you need to configure it, please use the children attribute of fields
children	Sub configuration item. The configuration is the same as the field option
renderFormInput	You can edit the cell input box to generate a function. The details are as follows	renderFormInput
editable	Whether the current row can be edited

• ActionRef

name	explain	type
setRowsData	Update row data	(rowData: R, rowIndex: number) => void
handleAdd	Add a new line. The function parameter is used as the default value of the new data. It is used when there is no parameterdefaultDataAs default	(v?: R) => void
handleDelete	Delete a line	(key: rowIndex) => void
handleEdit	When editing a single line, enable editing a line	(key: rowIndex) => void

Component home page:https://yigexiaoairen.github.io/

GitHub address:https://github.com/yigexiaoairen/am-editable

Note: functions will be gradually improved in the later stage, such as new sorting function, full table editing support submission verification, etc