Улучшение редактируемой таблицы.

раздельные методы на добавление, удаление, редактирование.

src/components/EditableTable.jsx

@@ -1,6 +1,9 @@
-import { Form, Input, Popconfirm, Typography, Table } from "antd"
+import { Form, Input, Table, Button, Popconfirm } from "antd"
+import { EditOutlined, SaveOutlined, PlusOutlined, CloseCircleOutlined, DeleteOutlined } from '@ant-design/icons'
 import { useState } from "react";
 
+const newRowKeyValue = 'newRow'
+
 const EditableCell = ({
   editing,
   record,
@@ -32,8 +35,17 @@ const EditableCell = ({
     </td>)
 }
 
-export const EditableTable = ({columns, dataSource, onUpdateData: onChange, ...otherTableProps}) => {
+export const EditableTable = ({
+    columns, 
+    dataSource, 
+    onChange, // Метод вызывается со всем dataSource с измененными элементами после любого действия
+    onRowAdd, // Метод вызывается с новой добавленной записью. Если метод не поределен, то кнопка добавления строки не показывается
+    onRowEdit,// Метод вызывается с новой отредактированной записью. Если метод не поределен, то кнопка редактирования строки не показывается
+    onRowDelete,// Метод вызывается с удаленной записью. Если метод не поределен, то кнопка удаления строки не показывается
+    ...otherTableProps}) => {
+
   const [form] = Form.useForm()
+  const [data, setData] = useState(dataSource?? [])
   const [editingKey, setEditingKey] = useState('')
 
   const isEditing = (record) => record.key === editingKey
@@ -44,57 +56,94 @@ export const EditableTable = ({columns, dataSource, onUpdateData: onChange, ...o
   }
 
   const cancel = () => {
+    if(editingKey == newRowKeyValue)
+    {
+      const newData = [...data]
+      const index = newData.findIndex((item) => newRowKeyValue === item.key)
+      newData.splice(index, 1)
+      setData(newData)
+    }
     setEditingKey('')
   }
 
-  const save = async (key) => {
+  const addNewRow = () => {
+    let newRow = {
+      key:newRowKeyValue
+    }
+    const newData = [...data, newRow]
+    setData(newData)
+    edit(newRow)
+  }
+
+  const save = async (record) => {
     try {
       const row = await form.validateFields()
-      const newData = [...dataSource]
-      const index = newData.findIndex((item) => key === item.key)
+      const newData = [...data]
+      const index = newData.findIndex((item) => record.key === item.key)
+      let item = newData[index]
 
-      if (index > -1) {
-        const item = newData[index]
-        newData.splice(index, 1, { ...item, ...row })
-      } else {
-        newData.push(row)
-      }
+      newData.splice(index, 1, { ...item, ...row })
 
+      if(item.key === newRowKeyValue)
+        item.key = newRowKeyValue + newData.length
+        
       setEditingKey('')
+      setData(newData)
+
+      if (editingKey === newRowKeyValue)
+        onRowAdd(item)
+      else
+        onRowEdit(item)
+      
       if(onChange)
         onChange(newData)
-      else
-        console.error(`EditableTable.onChange doesn't connected`)      
+
     } 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: '',
+    title: (!!onRowAdd) && <Button 
+      onClick={addNewRow}
+      disabled={editingKey !== ''}
+      icon={<PlusOutlined/>}
+      />,
     dataIndex: 'operation',
     render: (_, record) => {
       const editable = isEditing(record)
-      return editable ? (
-        <span>
-          <a
-            href="javascript:"
-            onClick={() => save(record.key)}
-            style={{
-              marginRight: 8,
-            }}
-          >
-            Save
-          </a>
-          <Popconfirm title="Sure to cancel?" onConfirm={cancel}>
-            <a>Cancel</a>
-          </Popconfirm>
-        </span>
-      ) : (
-        <Typography.Link disabled={editingKey !== ''} onClick={() => edit(record)}>
-          Edit
-        </Typography.Link>
-      )
+      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>)
     },
   }
 
@@ -132,7 +181,7 @@ export const EditableTable = ({columns, dataSource, onUpdateData: onChange, ...o
           },
         }}
         columns={mergedColumns}
-        dataSource={dataSource}
+        dataSource={data}
         {...otherTableProps}
       />
     </Form>

src/pages/WellStat.jsx

@@ -59,6 +59,10 @@ export default function WellStat({idWell}){
     update();
   } ,[idWell])
 
+  const onChange = (newData) =>{
+    setData(newData)
+  }
+
   return(
     <LoaderPortal show={showLoader}>
       <EditableTable
@@ -67,6 +71,10 @@ export default function WellStat({idWell}){
         size={'small'}
         bordered
         pagination={false}
+        onChange={onChange}
+        onRowAdd={()=>{}}
+        onRowEdit={()=>{}}
+        onRowDelete={()=>{}}
       />
     </LoaderPortal>)
 }