#2

packages/datalib/src/GridDisplay.ts

@@ -54,6 +54,7 @@ export abstract class GridDisplay {
   sortable = false;
   filterable = false;
   editable = false;
+  isLoadedCorrectly = true;
 
   setColumnVisibility(uniquePath: string[], isVisible: boolean) {
     const uniqueName = uniquePath.join('.');

packages/datalib/src/TableGridDisplay.ts

@@ -29,6 +29,11 @@ export class TableGridDisplay extends GridDisplay {
     this.table = this.cache.tables.basetbl;
     if (!this.table) {
       this.loadTableIntoCache('basetbl', tableName);
+      this.isLoadedCorrectly = false;
+    } else {
+      if (!this.table.columns || this.table.columns.length == 0) {
+        this.isLoadedCorrectly = false;
+      }
     }
 
     this.columns = this.getDisplayColumns(this.table, []);

packages/web/src/tabs/TableDataTab.js

@@ -9,6 +9,7 @@ import engines from '@dbgate/engines';
 import useUndoReducer from '../utility/useUndoReducer';
 import usePropsCompare from '../utility/usePropsCompare';
 import { useUpdateDatabaseForTab } from '../utility/globalState';
+import useSocket from '../utility/SocketProvider';
 
 export default function TableDataTab({ conid, database, schemaName, pureName, tabVisible, toolbarPortalRef }) {
   const [config, setConfig] = React.useState(createGridConfig());
@@ -36,6 +37,23 @@ export default function TableDataTab({ conid, database, schemaName, pureName, ta
     [connection, config, cache]
   );
 
+  const handleDatabaseStructureChanged = React.useCallback(() => {
+    setCache(createGridCache());
+  }, []);
+
+  const socket = useSocket();
+
+  React.useEffect(() => {
+    if (display && !display.isLoadedCorrectly) {
+      if (conid && socket) {
+        socket.on(`database-structure-changed-${conid}-${database}`, handleDatabaseStructureChanged);
+        return () => {
+          socket.off(`database-structure-changed-${conid}-${database}`, handleDatabaseStructureChanged);
+        };
+      }
+    }
+  }, [conid, database, display]);
+
   if (!display) return null;
 
   return (