feat: enhance Table class with dynamic column width sampling

Fixes issue when calculating "auto" width with HTMLcontent

Signed-off-by: Gordon Smith <GordonJSmith@gmail.com>

Author: GordonSmith

packages/dgrid/src/Table.ts

@@ -95,6 +95,7 @@ ColumnFormat.prototype.publish("valueColumn", null, "set", "Column", function (t
 export class Table extends Common {
     private _prevColsHash;
     private _prevFieldsHash;
+    protected _fakeCell: HTMLDivElement;
     _colsRefresh = false;
     _dataRefresh = false;
 
@@ -142,6 +143,7 @@ export class Table extends Common {
 
     enter(domNode, element) {
         super.enter(domNode, element);
+        this._fakeCell = document.createElement("div");
     }
 
     guessWidth(columns, data) {
@@ -155,9 +157,13 @@ export class Table extends Common {
                 this.guessWidth(column.children, sampleData);
             } else {
                 column.width = data.reduce((prevVal: number, row) => {
-                    const cell = ("" + row[column.idx]).trim();
-                    return Math.max(prevVal, this.textSize(cell).width);
-                }, this.textSize("" + column.label, undefined, undefined, true).width + sortablePadding) + 8; // +12 for the sort icon, +8 for the cell padding.
+                    let cell = ("" + row[column.idx]).trim();
+                    if (this.renderHtml() && cell[0] === "<") {
+                        this._fakeCell.innerHTML = cell;
+                        cell = this._fakeCell.textContent ?? cell;
+                    }
+                    return Math.max(prevVal, this.textSize(cell, this.columnWidthAutoFontName(), this.columnWidthAutoFontSize()).width);
+                }, this.textSize("" + column.label, this.columnWidthAutoFontName(), this.columnWidthAutoFontSize(), true).width + sortablePadding) + 8; // +12 for the sort icon, +8 for the cell padding.
             }
         }
     }
@@ -174,8 +180,8 @@ export class Table extends Common {
             this._columns = this._store.columns(this.sortable(), this.formatterFunc(), this.renderCellFunc());
             switch (this.columnWidth()) {
                 case "auto":
-                    const tenRows = this.data().filter((row, idx) => idx < 10);
-                    this.guessWidth(this._columns, tenRows);
+                    const sampleRows = this.data().filter((row, idx) => idx < this.columnWidthAutoSampleSize());
+                    this.guessWidth(this._columns, sampleRows);
                     break;
             }
             const columns = this.columns();
@@ -205,6 +211,8 @@ export class Table extends Common {
     }
 
     exit(domNode, element) {
+        this._fakeCell.remove();
+        delete this._fakeCell;
         delete this._prevColsHash;
         delete this._prevFieldsHash;
         super.exit(domNode, element);
@@ -238,9 +246,18 @@ Table.prototype._class += " dgrid_Table";
 export interface Table {
     columnWidth(): "auto" | "none";
     columnWidth(_: "auto" | "none"): this;
+    columnWidthAutoSampleSize(): number;
+    columnWidthAutoSampleSize(_: number): this;
+    columnWidthAutoFontName(): string;
+    columnWidthAutoFontName(_: string): this;
+    columnWidthAutoFontSize(): number;
+    columnWidthAutoFontSize(_: number): this;
     columnFormats(): ColumnFormat[];
     columnFormats(_: ColumnFormat[]): this;
 }
 
 Table.prototype.publish("columnWidth", "auto", "set", "Default column width", ["auto", "none"]);
+Table.prototype.publish("columnWidthAutoSampleSize", 10, "number", "Number of rows to sample for auto column width");
+Table.prototype.publish("columnWidthAutoFontName", "Verdana", "string", "Font name for auto column width calculation");
+Table.prototype.publish("columnWidthAutoFontSize", 12, "number", "Font size for auto column width calculation");
 Table.prototype.publish("columnFormats", [], "propertyArray", "Source Columns", null, { autoExpand: ColumnFormat });