An edit table component based on antd

Time:2021-1-16

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:
An edit table component based on antd

  • 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:
An edit table component based on antd

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

Recommended Today

Pandas data analysis — detailed explanation of super easy to use groupby

WeChat official account: “Python reads money”If there are any questions or suggestions, please official account message. In the daily data analysis, it is often necessary to analyze the dataDivide into different groups according to one (more) fieldFor example, in the field of e-commerce, the total sales of the whole country are divided by provinces, and […]