@hpcc-js/dgrid 3.7.8 → 3.8.0

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@hpcc-js/dgrid",
-    "version": "3.7.8",
+    "version": "3.8.0",
     "description": "hpcc-js - Viz DGrid",
     "type": "module",
     "main": "./dist/index.umd.cjs",
@@ -39,13 +39,13 @@
         "update-major": "npx --yes npm-check-updates -u"
     },
     "dependencies": {
-        "@hpcc-js/common": "^3.7.8",
-        "@hpcc-js/dgrid-shim": "^3.4.5",
-        "@hpcc-js/util": "^3.5.7"
+        "@hpcc-js/common": "^3.7.9",
+        "@hpcc-js/dgrid-shim": "^3.5.0",
+        "@hpcc-js/util": "^3.5.8"
     },
     "devDependencies": {
-        "@hpcc-js/ddl-shim": "^3.3.7",
-        "@hpcc-js/esbuild-plugins": "^1.8.9",
+        "@hpcc-js/ddl-shim": "^3.3.8",
+        "@hpcc-js/esbuild-plugins": "^1.8.10",
         "@testing-library/dom": "10.4.1",
         "d3-format": "^1",
         "d3-selection": "^1"
@@ -61,5 +61,5 @@
         "url": "https://github.com/hpcc-systems/Visualization/issues"
     },
     "homepage": "https://github.com/hpcc-systems/Visualization",
-    "gitHead": "6695c9be7e44c9a4dd50e36fad2044b287685e2e"
+    "gitHead": "40c9476d944129ade31563679b2c08ee526f9df0"
 }

package/src/ColumnSetTable.ts

@@ -0,0 +1,97 @@
+import { ColumnSetGrid } from "./dgrid-shim.ts";
+import { type ColumnType } from "./RowFormatter.ts";
+import { Table } from "./Table.ts";
+
+export class ColumnSetTable extends Table {
+
+    constructor() {
+        super();
+    }
+
+    protected _buildColumnSets(): ColumnType[][][] {
+        const sets = this.columnSets();
+        const colNames = this.columns();
+        const used = new Set<string>();
+        const result: ColumnType[][][] = [];
+
+        const lookup = (name: string): ColumnType | undefined => {
+            const idx = colNames.indexOf(name);
+            if (idx < 0) return undefined;
+            const col = this._columns[idx];
+            if (!col || col.hidden) return undefined;
+            return col;
+        };
+
+        if (sets && sets.length) {
+            for (const set of sets) {
+                const cols: ColumnType[] = [];
+                for (const name of set) {
+                    const col = lookup(name);
+                    if (col) {
+                        cols.push(col);
+                        used.add(name);
+                    }
+                }
+                if (cols.length) {
+                    result.push([cols]);
+                }
+            }
+        }
+
+        if (this.autoColumnSet()) {
+            const remaining: ColumnType[] = [];
+            for (const name of colNames) {
+                if (!used.has(name)) {
+                    const col = lookup(name);
+                    if (col) remaining.push(col);
+                }
+            }
+            if (remaining.length) {
+                result.push([remaining]);
+            }
+        }
+
+        if (!result.length && this._columns.length) {
+            result.push([this._columns.filter(c => !c.hidden)]);
+        }
+
+        return result;
+    }
+
+    protected _gridColumnsConfig(): object {
+        return { columnSets: this._buildColumnSets() };
+    }
+
+    protected _createGrid(opts: any, node: HTMLElement): any {
+        return new ColumnSetGrid({ ...opts }, node);
+    }
+
+    protected _applyColumnsToGrid() {
+        const sets = this._buildColumnSets();
+        this._dgrid.set("columnSets", sets);
+        for (let i = 0; i < sets.length - 1; i++) {
+            const setWidth = sets[i][0].reduce((total: number, col: ColumnType) => total + (col.width ?? 0), 0);
+            if (setWidth > 0) {
+                (this._dgrid as any).styleColumnSet(i, `width: ${setWidth}px;`);
+            }
+        }
+        this._dgrid.resize();
+    }
+
+    dblclickColResize(column: string, dgridColumn: any): void {
+        this.guessWidth([dgridColumn], this.data());
+        this._dgrid.applyWidth(dgridColumn.id, dgridColumn.width + "px");
+        this._dgrid.resize();
+    }
+}
+ColumnSetTable.prototype._class += " dgrid_ColumnSetTable";
+
+export interface ColumnSetTable {
+    columnSets(): string[][];
+    columnSets(_: string[][]): this;
+    autoColumnSet(): boolean;
+    autoColumnSet(_: boolean): this;
+}
+
+ColumnSetTable.prototype.publish("columnSets", [], "array", "Column sets - array of arrays of column names");
+ColumnSetTable.prototype.publish("autoColumnSet", true, "boolean", "Append columns not referenced by columnSets() into a trailing column-set");

package/src/Common.ts

@@ -82,8 +82,8 @@ export class Common extends HTMLWidget {
                     .attr("class", "flat")
                     ;
             }
-            this._dgrid = new (this._prevPaging ? PagingGrid : Grid)({
-                columns: this._columns,
+            this._dgrid = this._createGrid({
+                ...this._gridColumnsConfig(),
                 collection: this._store,
                 sort: this.formatSortBy(),
                 selectionMode: this.multiSelect() ? "extended" : "single",
@@ -142,6 +142,14 @@ export class Common extends HTMLWidget {
 
     dblclickColResize(column, dgridColumn) {
     }
+
+    protected _gridColumnsConfig(): object {
+        return { columns: this._columns };
+    }
+
+    protected _createGrid(opts: any, node: HTMLElement): any {
+        return new (this._prevPaging ? PagingGrid : Grid)(opts, node);
+    }
 }
 Common.prototype._class += " dgrid_Common";
 

package/src/Table.ts

@@ -193,7 +193,7 @@ export class Table extends Common {
                     }
                 }
             }
-            this._dgrid.set("columns", this._columns.filter(col => !col.hidden));
+            this._applyColumnsToGrid();
             this._colsRefresh = false;
         }
         if (this._colsRefresh || this._dataRefresh) {
@@ -213,6 +213,10 @@ export class Table extends Common {
         super.exit(domNode, element);
     }
 
+    protected _applyColumnsToGrid() {
+        this._dgrid.set("columns", this._columns.filter(col => !col.hidden));
+    }
+
     //  Cell  ---
     formatterFunc(): CellFormatter | undefined {
         return function (this: ColumnType, cell: any, row: RowType): string | any {

package/src/dgrid-shim.ts

@@ -17,4 +17,5 @@ export const Memory = globalThis["@hpcc-js/dgrid-shim"].Memory as typeof dgrid_s
 export const QueryResults = globalThis["@hpcc-js/dgrid-shim"].QueryResults as typeof dgrid_shim.QueryResults;
 export const Grid = globalThis["@hpcc-js/dgrid-shim"].Grid as typeof dgrid_shim.Grid;
 export const PagingGrid = globalThis["@hpcc-js/dgrid-shim"].PagingGrid as typeof dgrid_shim.PagingGrid;
+export const ColumnSetGrid = globalThis["@hpcc-js/dgrid-shim"].ColumnSetGrid as typeof dgrid_shim.ColumnSetGrid;
 export const domConstruct = globalThis["@hpcc-js/dgrid-shim"].domConstruct as typeof dgrid_shim.domConstruct;

package/src/index.ts

@@ -1,5 +1,6 @@
 export * from "./__package__.ts";
 export * from "./Common.ts";
+export * from "./ColumnSetTable.ts";
 export * from "./DatasourceStore.ts";
 export * from "./DatasourceTable.ts";
 export * from "./DBStore.ts";
@@ -7,4 +8,4 @@ export * from "./RowFormatter.ts";
 export * from "./Table.ts";
 
 //  Must be last...
-export { Deferred, Memory, QueryResults, Grid, PagingGrid, domConstruct } from "./dgrid-shim.ts";
+export { Deferred, Memory, QueryResults, Grid, PagingGrid, ColumnSetGrid, domConstruct } from "./dgrid-shim.ts";

package/types/ColumnSetTable.d.ts

@@ -0,0 +1,16 @@
+import { type ColumnType } from "./RowFormatter.ts";
+import { Table } from "./Table.ts";
+export declare class ColumnSetTable extends Table {
+    constructor();
+    protected _buildColumnSets(): ColumnType[][][];
+    protected _gridColumnsConfig(): object;
+    protected _createGrid(opts: any, node: HTMLElement): any;
+    protected _applyColumnsToGrid(): void;
+    dblclickColResize(column: string, dgridColumn: any): void;
+}
+export interface ColumnSetTable {
+    columnSets(): string[][];
+    columnSets(_: string[][]): this;
+    autoColumnSet(): boolean;
+    autoColumnSet(_: boolean): this;
+}

package/types/Common.d.ts

@@ -25,6 +25,8 @@ export declare class Common extends HTMLWidget {
     exit(domNode: any, element: any): void;
     click(row: any, col: any, sel: any, more: any): void;
     dblclickColResize(column: any, dgridColumn: any): void;
+    protected _gridColumnsConfig(): object;
+    protected _createGrid(opts: any, node: HTMLElement): any;
 }
 export interface Common {
     noDataMessage(): string;

package/types/Table.d.ts

@@ -43,6 +43,7 @@ export declare class Table extends Common {
     _prevHash: any;
     update(domNode: any, element: any): void;
     exit(domNode: any, element: any): void;
+    protected _applyColumnsToGrid(): void;
     formatterFunc(): CellFormatter | undefined;
     renderCellFunc(): CellRenderer | undefined;
     click(row: any, col: any, sel: any): void;

package/types/dgrid-shim.d.ts

@@ -4,4 +4,5 @@ export declare const Memory: typeof dgrid_shim.Memory;
 export declare const QueryResults: typeof dgrid_shim.QueryResults;
 export declare const Grid: typeof dgrid_shim.Grid;
 export declare const PagingGrid: typeof dgrid_shim.PagingGrid;
+export declare const ColumnSetGrid: typeof dgrid_shim.ColumnSetGrid;
 export declare const domConstruct: typeof dgrid_shim.domConstruct;

package/types/index.d.ts

@@ -1,8 +1,9 @@
 export * from "./__package__.ts";
 export * from "./Common.ts";
+export * from "./ColumnSetTable.ts";
 export * from "./DatasourceStore.ts";
 export * from "./DatasourceTable.ts";
 export * from "./DBStore.ts";
 export * from "./RowFormatter.ts";
 export * from "./Table.ts";
-export { Deferred, Memory, QueryResults, Grid, PagingGrid, domConstruct } from "./dgrid-shim.ts";
+export { Deferred, Memory, QueryResults, Grid, PagingGrid, ColumnSetGrid, domConstruct } from "./dgrid-shim.ts";