diff --git a/packages/datalib/src/TableGridDisplay.ts b/packages/datalib/src/TableGridDisplay.ts
index d72604b65..4b4b04113 100644
--- a/packages/datalib/src/TableGridDisplay.ts
+++ b/packages/datalib/src/TableGridDisplay.ts
@@ -26,9 +26,10 @@ export class TableGridDisplay extends GridDisplay {
) {
super(config, setConfig, cache, setCache, driver);
- this.table = this.cache.tables.basetbl;
+ const baseTblCacheKey = `basetbl_${tableName.schemaName}_${tableName.pureName}`;
+ this.table = this.cache.tables[baseTblCacheKey];
if (!this.table) {
- this.loadTableIntoCache('basetbl', tableName);
+ this.loadTableIntoCache(baseTblCacheKey, tableName);
this.isLoadedCorrectly = false;
} else {
if (!this.table.columns || this.table.columns.length == 0) {
diff --git a/packages/web/src/datagrid/TableDataGrid.js b/packages/web/src/datagrid/TableDataGrid.js
new file mode 100644
index 000000000..3d734c77c
--- /dev/null
+++ b/packages/web/src/datagrid/TableDataGrid.js
@@ -0,0 +1,71 @@
+import React from 'react';
+import DataGrid from './DataGrid';
+import { TableGridDisplay, createGridConfig, createGridCache } from '@dbgate/datalib';
+import { useConnectionInfo, getTableInfo } from '../utility/metadataLoaders';
+import engines from '@dbgate/engines';
+import useSocket from '../utility/SocketProvider';
+
+export default function TableDataGrid({
+ conid,
+ database,
+ schemaName,
+ pureName,
+ tabVisible,
+ toolbarPortalRef,
+ cache,
+ setCache,
+ changeSetState,
+ dispatchChangeSet,
+}) {
+ const [config, setConfig] = React.useState(createGridConfig());
+
+ const connection = useConnectionInfo({ conid });
+
+ const display = React.useMemo(
+ () =>
+ connection
+ ? new TableGridDisplay(
+ { schemaName, pureName },
+ engines(connection),
+ config,
+ setConfig,
+ cache,
+ setCache,
+ (name) => getTableInfo({ conid, database, ...name })
+ )
+ : null,
+ [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 (
+
+ );
+}
diff --git a/packages/web/src/tabs/TableDataTab.js b/packages/web/src/tabs/TableDataTab.js
index d3baa34db..8d09b4d08 100644
--- a/packages/web/src/tabs/TableDataTab.js
+++ b/packages/web/src/tabs/TableDataTab.js
@@ -1,71 +1,27 @@
import React from 'react';
-import useFetch from '../utility/useFetch';
-import styled from 'styled-components';
-import theme from '../theme';
-import DataGrid from '../datagrid/DataGrid';
-import { TableGridDisplay, createGridConfig, createGridCache, createChangeSet } from '@dbgate/datalib';
-import { useTableInfo, useConnectionInfo, getTableInfo } from '../utility/metadataLoaders';
-import engines from '@dbgate/engines';
+import { createGridCache, createChangeSet } from '@dbgate/datalib';
import useUndoReducer from '../utility/useUndoReducer';
import usePropsCompare from '../utility/usePropsCompare';
import { useUpdateDatabaseForTab } from '../utility/globalState';
-import useSocket from '../utility/SocketProvider';
+import TableDataGrid from '../datagrid/TableDataGrid';
export default function TableDataTab({ conid, database, schemaName, pureName, tabVisible, toolbarPortalRef }) {
- const [config, setConfig] = React.useState(createGridConfig());
const [cache, setCache] = React.useState(createGridCache());
const [changeSetState, dispatchChangeSet] = useUndoReducer(createChangeSet());
useUpdateDatabaseForTab(tabVisible, conid, database);
- const connection = useConnectionInfo({ conid });
- // console.log('GOT CONNECTION', connection);
-
- // usePropsCompare({ tableInfo, connection, config, cache });
-
- const display = React.useMemo(
- () =>
- connection
- ? new TableGridDisplay(
- { schemaName, pureName },
- engines(connection),
- config,
- setConfig,
- cache,
- setCache,
- (name) => getTableInfo({ conid, database, ...name })
- )
- : null,
- [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 (
-
);
}