custom data grid support

packages/datalib/src/CustomGridDisplay.ts

@@ -0,0 +1,64 @@
+import _ from 'lodash';
+import { filterName, isTableColumnUnique } from 'dbgate-tools';
+import { GridDisplay, ChangeCacheFunc, DisplayColumn, DisplayedColumnInfo, ChangeConfigFunc } from './GridDisplay';
+import type {
+  TableInfo,
+  EngineDriver,
+  ViewInfo,
+  ColumnInfo,
+  NamedObjectInfo,
+  DatabaseInfo,
+  ForeignKeyInfo,
+} from 'dbgate-types';
+import { GridConfig, GridCache, createGridCache } from './GridConfig';
+import { Expression, Select, treeToSql, dumpSqlSelect, ColumnRefExpression } from 'dbgate-sqltree';
+
+export interface CustomGridColumn {
+  columnName: string;
+  columnLabel: string;
+}
+
+export class CustomGridDisplay extends GridDisplay {
+  constructor(
+    public tableName: NamedObjectInfo,
+    columns: CustomGridColumn[],
+    driver: EngineDriver,
+    config: GridConfig,
+    setConfig: ChangeConfigFunc,
+    cache: GridCache,
+    setCache: ChangeCacheFunc,
+    dbinfo: DatabaseInfo,
+    serverVersion,
+    isReadOnly = false
+  ) {
+    super(config, setConfig, cache, setCache, driver, dbinfo, serverVersion);
+
+    this.columns = columns.map(col => ({
+      columnName: col.columnName,
+      headerText: col.columnLabel,
+      uniqueName: col.columnName,
+      uniquePath: [col.columnName],
+      isPrimaryKey: false,
+      isForeignKeyUnique: false,
+      schemaName: tableName.schemaName,
+      pureName: tableName.pureName,
+    }));
+    this.filterable = true;
+    this.sortable = true;
+    this.groupable = true;
+    this.editable = !isReadOnly;
+    this.supportsReload = true;
+  }
+
+  createSelect(options = {}) {
+    const select = this.createSelectBase(
+      this.tableName,
+      // @ts-ignore
+      this.columns.map(col => ({
+        columnName: col.columnName,
+      })),
+      options
+    );
+    return select;
+  }
+}

packages/datalib/src/index.ts

@@ -21,3 +21,4 @@ export * from './perspectiveTools';
 export * from './DataDuplicator';
 export * from './FreeTableGridDisplay';
 export * from './FreeTableModel';
+export * from './CustomGridDisplay';

packages/web/src/datagrid/DataGrid.svelte

@@ -89,6 +89,7 @@
   export let onRunMacro;
   export let hasMultiColumnFilter = false;
   export let setLoadedRows = null;
+  export let hideGridLeftColumn = false;
 
   let loadedRows;
 
@@ -162,7 +163,7 @@
 <HorizontalSplitter
   initialValue={getInitialManagerSize()}
   bind:size={managerSize}
-  hideFirst={$collapsedLeftColumnStore}
+  hideFirst={hideGridLeftColumn || $collapsedLeftColumnStore}
 >
   <div class="left" slot="1">
     <WidgetColumnBar>

packages/web/src/datagrid/DataGridCore.svelte

@@ -421,6 +421,7 @@
   export let schemaName = undefined;
   export let allowDefineVirtualReferences = false;
   export let formatterFunction;
+  export let hideGridLeftColumn;
 
   export let isLoadedAll;
   export let loadedTime;
@@ -1816,10 +1817,12 @@
             data-col="header"
             style={`width:${headerColWidth}px; min-width:${headerColWidth}px; max-width:${headerColWidth}px`}
           >
-            <CollapseButton
+            {#if !hideGridLeftColumn}
-              collapsed={$collapsedLeftColumnStore}
+              <CollapseButton
-              on:click={() => collapsedLeftColumnStore.update(x => !x)}
+                collapsed={$collapsedLeftColumnStore}
-            />
+                on:click={() => collapsedLeftColumnStore.update(x => !x)}
+              />
+            {/if}
           </td>
           {#each visibleRealColumns as col (col.uniqueName)}
             <td