asb_cloud_front/src/components/EditableTable.jsx

import { Form, Input, Table, Button, Popconfirm } from "antd"
import { EditOutlined, SaveOutlined, PlusOutlined, CloseCircleOutlined, DeleteOutlined } from '@ant-design/icons'
import { useState, useEffect } from "react";

const newRowKeyValue = 'newRow'

const EditableCell = ({
  editing,
  record,
  dataIndex,
  input,
  isRequired,
  title,
  formItemClass,
  formItemRules,
  children,
  initialValue,
}) => {

  const inputNode = input ?? <Input/>
  const rules = formItemRules ?? [{
      required: isRequired,
      message: `Please Input ${title}!`,
    }]

  const editor = <Form.Item
    name={dataIndex}
    style={{margin:0}}
    className={formItemClass}
    rules={rules}
    initialValue={initialValue}>
    {inputNode}
  </Form.Item>

  return (<td>
      {editing ? editor: children}
    </td>)
}

export const EditableTable = ({
    columns, 
    dataSource, 
    onChange, // Метод вызывается со всем dataSource с измененными элементами после любого действия
    onRowAdd, // Метод вызывается с новой добавленной записью. Если метод не поределен, то кнопка добавления строки не показывается
    onRowEdit,// Метод вызывается с новой отредактированной записью. Если метод не поределен, то кнопка редактирования строки не показывается
    onRowDelete,// Метод вызывается с удаленной записью. Если метод не поределен, то кнопка удаления строки не показывается
    ...otherTableProps}) => {

  const [form] = Form.useForm()
  const [data, setData] = useState(dataSource?? [])
  const [editingKey, setEditingKey] = useState('')

  useEffect(()=>{
    setData(dataSource??[])
  },[dataSource])

  const isEditing = (record) => record.key === editingKey

  const edit = (record) => {
    form.setFieldsValue({...record})
    setEditingKey(record.key)
  }

  const cancel = () => {
    if(editingKey === newRowKeyValue)
    {
      const newData = [...data]
      const index = newData.findIndex((item) => newRowKeyValue === item.key)
      newData.splice(index, 1)
      setData(newData)
    }
    setEditingKey('')
  }

  const addNewRow = async () => {
    let newRow = {
      ...form.initialValues,
      key:newRowKeyValue
    }
    const newData = [...data, newRow]
    setData(newData)
    edit(newRow)
  }

  const save = async (record) => {
    try {
      const row = await form.validateFields()
      const newData = [...data]
      const index = newData.findIndex((item) => record.key === item.key)
      const item = newData[index]
      const newItem = { ...item, ...row }

      newData.splice(index, 1, newItem)

      if(item.key === newRowKeyValue)
        item.key = newRowKeyValue + newData.length
        
      setEditingKey('')
      setData(newData)

      if (editingKey === newRowKeyValue)
        onRowAdd(newItem)
      else
        onRowEdit(newItem)
      
      if(onChange)
        onChange(newData)

    } catch (errInfo) {
      console.log('Validate Failed:', errInfo)
    }
  }

  const deleteRow = (record) =>{
    const newData = [...data]
    const index = newData.findIndex((item) => record.key === item.key)
    
    newData.splice(index, 1)
    setData(newData)
    
    onRowDelete(record)

    if(onChange)
      onChange(newData)
  }

  const operationColumn = {
    title: (!!onRowAdd) && <Button 
      onClick={addNewRow}
      disabled={editingKey !== ''}
      icon={<PlusOutlined/>}
      />,
    dataIndex: 'operation',
    render: (_, record) => {
      const editable = isEditing(record)
      return editable 
      ?(<span>
          <Button 
            onClick={() => save(record)}
            icon={<SaveOutlined/>}/>
          <Button 
            onClick={cancel}
            icon={<CloseCircleOutlined/>}/>
        </span>) 
        :(<span>
          <Button 
            disabled={editingKey !== ''} 
            onClick={() => edit(record)}
            icon={<EditOutlined/>}/>
          {onRowDelete&&
          <Popconfirm title="Удалить?" onConfirm={()=>deleteRow(record)}>
            <Button icon={<DeleteOutlined/>}/>
          </Popconfirm>}          
        </span>)
    },
  }

  const handleColumn = (col) => {
    if (col.children)
      col.children = col.children.map(handleColumn)

    if (!col.editable) 
      return col    

    return {
      ...col,
      onCell: (record) => ({
        editing: isEditing(record),        
        record,        
        dataIndex: col.dataIndex ?? col.key,
        input: col.input,
        isRequired: col.isRequired,
        title: col.title,
        dataType: col.dataType,
        formItemClass: col.formItemClass,
        formItemRules: col.formItemRules,
        initialValue: col.initialValue,
      }),
    }
  }

  const mergedColumns = [...columns.map(handleColumn), operationColumn]

  return (
    <Form form={form} component={false}>
      <Table
        components={{
          body: {
            cell: EditableCell,
          },
        }}
        columns={mergedColumns}
        dataSource={data}
        {...otherTableProps}
      />
    </Form>
  )
}