feat: move add button to first column in the tables

fix: assign unique keys to table headers and rows

packages/form/src/table/TableFieldTemplate.css

@@ -17,3 +17,11 @@
 {
     display: none;
 }
+
+.table .table-actions{
+    vertical-align: middle;
+}
+
+th > label{
+    font-size: 0.875rem;
+}

packages/form/src/table/TableFieldTemplate.tsx

@@ -37,9 +37,10 @@ export const TableFieldTemplate = (props: ArrayFieldTemplateProps): JSX.Element
   let indexColumnCell = (_index: number): JSX.Element => <></>
   const [indexable, indexLookup] = useIndexable(props.uiSchema)
   if (indexable) {
-    indexColumnHeader = <th key='index-th' className='index-th' />
+    indexColumnHeader = <th key={`${props.title}-index-th`} className='index-th' />
     indexColumnCell = (index: number) => <td style={{ verticalAlign: 'middle' }}>{indexLookup(index)}</td>
   }
+
   const headers = Object.entries(rowSchema).map(
     ([key, s]: [string, any], i: number) => {
       const title = required.has(key)
@@ -59,18 +60,21 @@ export const TableFieldTemplate = (props: ArrayFieldTemplateProps): JSX.Element
         const srequired = new Set(s.required)
         const propDescs = Object.entries(s.properties)
           .filter((d: any) => d[1].description)
-          .map(([skey, sschema]: any) => (
-            <li key={skey}>
-              <label className='control-label'>
-                {sschema.title}
-                {srequired.has(skey) && <span className='required'>*</span>}
-              </label>
-              <p
-                dangerouslySetInnerHTML={{ __html: sschema.description }}
-                className='field-description'
-              />
-            </li>
-          ))
+          .map(([skey, sschema]: any) => {
+            // debugger
+            return (
+              <li key={skey}>
+                <label className='control-label'>
+                  {sschema.title}
+                  {srequired.has(skey) && <span className='required'>*</span>}
+                </label>
+                <p
+                  dangerouslySetInnerHTML={{ __html: sschema.description }}
+                  className='field-description'
+                />
+              </li>
+            )
+          })
         description = (
           <>
             <span dangerouslySetInnerHTML={{ __html: s.description }} />
@@ -83,7 +87,7 @@ export const TableFieldTemplate = (props: ArrayFieldTemplateProps): JSX.Element
       const width = widths[key]
       return (
         <th
-          key={key}
+          key={`${props.title}-${key}`}
           title={s.description}
           style={{ width }}
         >
@@ -107,8 +111,10 @@ export const TableFieldTemplate = (props: ArrayFieldTemplateProps): JSX.Element
       )
     }
   )
+
   headers.unshift(indexColumnHeader)
-  headers.push(
+  // add button as first column
+  headers.unshift(
     <th key='actions-th' className='actions-th'>
       <Button
         className='array-item-add'
@@ -124,10 +130,10 @@ export const TableFieldTemplate = (props: ArrayFieldTemplateProps): JSX.Element
   let rows: JSX.Element[] = []
   if ('items' in props) {
     rows = props.items.map((element: any, index) => {
+      const unique: string = `${props.title}-${element?.key as string}-${index.toString()}`
       return (
-        <tr key={element.key} className={element.className}>
-          {indexColumnCell(index)}
-          {element.children}
+        // remove button as first column
+        <tr key={unique} className={element.className}>
           <td className='table-actions'>
             <Button
               type='danger'
@@ -140,6 +146,8 @@ export const TableFieldTemplate = (props: ArrayFieldTemplateProps): JSX.Element
               <BsDash />
             </Button>
           </td>
+          {indexColumnCell(index)}
+          {element.children}
         </tr>
       )
     })