Add autokeys

src/components/EditableTable.jsx

@@ -37,6 +37,14 @@ const EditableCell = ({
     </td>)
 }
 
+const tryAddKeys = (items) => {
+  if(!items?.length)
+    return []
+  if(items[0].key)
+    return items
+  return items.map((item, index) => ({...item, key: item.key ?? item.id ?? index }))
+}
+
 export const EditableTable = ({
     columns, 
     dataSource, 
@@ -47,11 +55,11 @@ export const EditableTable = ({
     ...otherTableProps}) => {
 
   const [form] = Form.useForm()
-  const [data, setData] = useState(dataSource?? [])
+  const [data, setData] = useState(tryAddKeys(dataSource))
   const [editingKey, setEditingKey] = useState('')
 
   useEffect(()=>{
-    setData(dataSource??[])
+    setData(tryAddKeys(dataSource))
   },[dataSource])
 
   const isEditing = (record) => record.key === editingKey
@@ -168,6 +176,7 @@ export const EditableTable = ({
         editing: isEditing(record),        
         record,        
         dataIndex: col.dataIndex ?? col.key,
+        key: col.key ?? col.dataIndex,
         input: col.input,
         isRequired: col.isRequired,
         title: col.title,
@@ -180,7 +189,7 @@ export const EditableTable = ({
   }
 
   const mergedColumns = [...columns.map(handleColumn), operationColumn]
-
+  
   return (
     <Form form={form} component={false}>
       <Table