diff --git a/packages/datalib/src/index.ts b/packages/datalib/src/index.ts
index 044727893..2e1788de6 100644
--- a/packages/datalib/src/index.ts
+++ b/packages/datalib/src/index.ts
@@ -11,3 +11,4 @@ export * from './MacroDefinition';
 export * from './runMacro';
 export * from './FormViewDisplay';
 export * from './TableFormViewDisplay';
+export * from './CollectionGridDisplay';
diff --git a/packages/web/src/datagrid/ChangeSetGrider.ts b/packages/web/src/datagrid/ChangeSetGrider.ts
index 2136789a6..af3167d58 100644
--- a/packages/web/src/datagrid/ChangeSetGrider.ts
+++ b/packages/web/src/datagrid/ChangeSetGrider.ts
@@ -39,7 +39,7 @@ export default class ChangeSetGrider extends Grider {
   ) {
     super();
     this.changeSet = changeSetState && changeSetState.value;
-    this.insertedRows = getChangeSetInsertedRows(this.changeSet, display.baseTable);
+    this.insertedRows = getChangeSetInsertedRows(this.changeSet, display?.baseTable);
     this.setChangeSet = value => dispatchChangeSet({ type: 'set', value });
     this.rowCacheIndexes = new Set();
     this.rowDataCache = {};
@@ -66,7 +66,7 @@ export default class ChangeSetGrider extends Grider {
     if (this.rowCacheIndexes.has(index)) return;
     const row = this.getRowSource(index);
     const insertedRowIndex = this.getInsertedRowIndex(index);
-    const rowDefinition = this.display.getChangeSetRow(row, insertedRowIndex);
+    const rowDefinition = this.display?.getChangeSetRow(row, insertedRowIndex);
     const [matchedField, matchedChangeSetItem] = findExistingChangeSetItem(this.changeSet, rowDefinition);
     const rowUpdated = matchedChangeSetItem
       ? { ...row, ...matchedChangeSetItem.fields }
diff --git a/packages/web/src/datagrid/ColumnManager.svelte b/packages/web/src/datagrid/ColumnManager.svelte
index 745491dcf..985542564 100644
--- a/packages/web/src/datagrid/ColumnManager.svelte
+++ b/packages/web/src/datagrid/ColumnManager.svelte
@@ -21,8 +21,8 @@
 </SearchBoxWrapper>
 <ManagerInnerContainer width={managerSize}>
   {#each display
-    .getColumns(filter)
-    .filter(column => filterName(filter, column.columnName)) as column (column.uniqueName)}
+    ?.getColumns(filter)
+    ?.filter(column => filterName(filter, column.columnName)) || [] as column (column.uniqueName)}
     <ColumnManagerRow {display} {column} />
   {/each}
 </ManagerInnerContainer>
diff --git a/packages/web/src/datagrid/DataGridCore.svelte b/packages/web/src/datagrid/DataGridCore.svelte
index 520dc14ec..38876f92f 100644
--- a/packages/web/src/datagrid/DataGridCore.svelte
+++ b/packages/web/src/datagrid/DataGridCore.svelte
@@ -494,7 +494,7 @@
   // $: visibleRowCountUpperBound = 25;
 
   // $: console.log('grider', grider);
-  $: columns = display.allColumns;
+  $: columns = display?.allColumns || [];
 
   $: columnSizes = countColumnSizes(grider, columns, containerWidth, display);
 
@@ -551,7 +551,7 @@
 
   // $: console.log('DISPLAY.config', display.config);
   $: {
-    if (display.groupColumns && display.baseTable) {
+    if (display?.groupColumns && display?.baseTable) {
       onReferenceClick({
         referenceId: stableStringify(display && display.groupColumns),
         schemaName: display.baseTable.schemaName,
@@ -1026,7 +1026,7 @@
   }
 </script>
 
-{#if !isDynamicStructure && (!columns || columns.length == 0)}
+{#if !display || (!isDynamicStructure && (!columns || columns.length == 0))}
   <LoadingInfo wrapper message="Waiting for structure" />
 {:else if errorMessage}
   <ErrorInfo message={errorMessage} />
diff --git a/packages/web/src/datagrid/LoadingDataGridCore.svelte b/packages/web/src/datagrid/LoadingDataGridCore.svelte
index 78ad81328..9005d18c7 100644
--- a/packages/web/src/datagrid/LoadingDataGridCore.svelte
+++ b/packages/web/src/datagrid/LoadingDataGridCore.svelte
@@ -99,12 +99,12 @@
     // loadNextDataToken = 0;
   }
 
-  $: if (display.cache.refreshTime > loadedTime) {
+  $: if (display?.cache?.refreshTime > loadedTime) {
     reload();
   }
 
   $: {
-    if (masterLoadedTime && masterLoadedTime > loadedTime) {
+    if (masterLoadedTime && masterLoadedTime > loadedTime && display) {
       display.reload();
     }
   }
diff --git a/packages/web/src/datagrid/gridutil.ts b/packages/web/src/datagrid/gridutil.ts
index d1bce1f50..2bf4529e1 100644
--- a/packages/web/src/datagrid/gridutil.ts
+++ b/packages/web/src/datagrid/gridutil.ts
@@ -6,7 +6,7 @@ import Grider from './Grider';
 
 export function countColumnSizes(grider: Grider, columns, containerWidth, display: GridDisplay) {
   const columnSizes = new SeriesSizes();
-  if (!grider || !columns) return columnSizes;
+  if (!grider || !columns || !display) return columnSizes;
 
   let canvas = document.createElement('canvas');
   let context = canvas.getContext('2d');
diff --git a/packages/web/src/tabs/CollectionDataTab.svelte b/packages/web/src/tabs/CollectionDataTab.svelte
index 5a2f82e9e..354f2b147 100644
--- a/packages/web/src/tabs/CollectionDataTab.svelte
+++ b/packages/web/src/tabs/CollectionDataTab.svelte
@@ -5,19 +5,22 @@
 
 <script lang="ts">
   import App from '../App.svelte';
-  import TableDataGrid from '../datagrid/TableDataGrid.svelte';
+  import DataGrid from '../datagrid/DataGrid.svelte';
   import useGridConfig from '../utility/useGridConfig';
   import {
     createChangeSet,
     createGridCache,
     createGridConfig,
     TableFormViewDisplay,
-    TableGridDisplay,
+    CollectionGridDisplay,
   } from 'dbgate-datalib';
   import { findEngineDriver } from 'dbgate-tools';
   import { writable } from 'svelte/store';
   import createUndoReducer from '../utility/createUndoReducer';
   import invalidateCommands from '../commands/invalidateCommands';
+  import CollectionDataGridCore from '../datagrid/CollectionDataGridCore.svelte';
+  import { useCollectionInfo, useConnectionInfo } from '../utility/metadataLoaders';
+  import { extensions } from '../stores';
 
   export let tabid;
   export let conid;
@@ -34,9 +37,25 @@
     $changeSetStore;
     invalidateCommands();
   }
+
+  $: connection = useConnectionInfo({ conid });
+  $: collectionInfo = useCollectionInfo({ conid, database, schemaName, pureName });
+
+  $: display =
+    $collectionInfo && $connection
+      ? new CollectionGridDisplay(
+          $collectionInfo,
+          findEngineDriver($connection, $extensions),
+          //@ts-ignore
+          $config,
+          config.update,
+          $cache,
+          cache.update
+        )
+      : null;
 </script>
 
-<TableDataGrid
+<DataGrid
   {...$$props}
   config={$config}
   setConfig={config.update}
@@ -44,6 +63,8 @@
   setCache={cache.update}
   changeSetState={$changeSetStore}
   focusOnVisible
+  {display}
   {changeSetStore}
   {dispatchChangeSet}
+  gridCoreComponent={CollectionDataGridCore}
 />
diff --git a/packages/web/src/utility/metadataLoaders.ts b/packages/web/src/utility/metadataLoaders.ts
index e7e1056af..e8fb11d7f 100644
--- a/packages/web/src/utility/metadataLoaders.ts
+++ b/packages/web/src/utility/metadataLoaders.ts
@@ -268,6 +268,11 @@ export function useViewInfo(args) {
   return useDbCore(args, 'views');
 }
 
+/** @returns {import('dbgate-types').CollectionInfo} */
+export function useCollectionInfo(args) {
+  return useDbCore(args, 'collections');
+}
+
 export function getSqlObjectInfo(args) {
   return getDbCore(args);
 }