Remove duplicate logic to edit table

src/components/EditorSidePanel/TablesTab/TableInfo.jsx

@@ -24,15 +24,7 @@ export default function TableInfo({ data }) {
   const [editField, setEditField] = useState({});
 
   return (
-    <div id={`scroll_table_${data.id}`}>
-      <Collapse.Panel
-        header={
-          <div className="overflow-hidden text-ellipsis whitespace-nowrap">
-            {data.name}
-          </div>
-        }
-        itemKey={`${data.id}`}
-      >
+    <div>
       <div className="flex items-center mb-2.5">
         <div className="text-md font-semibold">Name: </div>
         <Input
@@ -260,7 +252,6 @@ export default function TableInfo({ data }) {
           />
         </Col>
       </Row>
-      </Collapse.Panel>
     </div>
   );
 }

src/components/EditorSidePanel/TablesTab/TablesTab.jsx

@@ -36,7 +36,18 @@ export default function TablesTab() {
           accordion
         >
           {tables.map((t) => (
-            <TableInfo data={t} key={t.id} />
+            <div id={`scroll_table_${t.id}`} key={t.id}>
+              <Collapse.Panel
+                header={
+                  <div className="overflow-hidden text-ellipsis whitespace-nowrap">
+                    {t.name}
+                  </div>
+                }
+                itemKey={`${t.id}`}
+              >
+                <TableInfo data={t} />
+              </Collapse.Panel>
+            </div>
           ))}
         </Collapse>
       )}