@guiexpert/demo-table-models 1.0.20 → 1.0.22

package/index.js

@@ -258,8 +258,8 @@ const D = class D {
           const d = [];
           for (let i = m.r1; i <= m.r2; i++) {
             const u = [];
-            for (let l = m.c1; l <= m.c2; l++) {
-              const c = r.isSelected(i, l) ? e.getBodyModel().getTextValueAt(i, l) : "";
+            for (let p = m.c1; p <= m.c2; p++) {
+              const c = r.isSelected(i, p) ? e.getBodyModel().getTextValueAt(i, p) : "";
               u.push(c);
             }
             d.push(u.join(D.columnSeparatorChar));
@@ -597,15 +597,15 @@ class R {
     this.header = e, this.body = r, this.footer = a;
   }
 }
-class p {
+class l {
   constructor(e = 100, r = "px") {
     this.value = e, this.unit = r;
   }
 }
 const g = () => !0, B = () => !1;
 class y {
-  constructor(e, r, a = new p(100, "px"), t = new C(), n = new C(), m = new p(100, "px"), d = new p(100, "px"), i, u, l, c, N, G, v, k, b = () => this.visible) {
-    this.property = e, this.headerLabel = r, this.width = a, this.classes = t, this.rendererMap = n, this.minWidth = m, this.maxWidth = d, this.sortable = i, this.sortComparator = u, this.sortState = l, this.sortStatesOrder = c, this.sortIconVisible = N, this.editable = G, this.getEditRenderer = v, this.editInputPipe = k, this.isVisible = b, this.visible = !0;
+  constructor(e, r, a = new l(100, "px"), t = new C(), n = new C(), m = new l(100, "px"), d = new l(100, "px"), i, u, p, c, N, G, v, k, b = () => this.visible) {
+    this.property = e, this.headerLabel = r, this.width = a, this.classes = t, this.rendererMap = n, this.minWidth = m, this.maxWidth = d, this.sortable = i, this.sortComparator = u, this.sortState = p, this.sortStatesOrder = c, this.sortIconVisible = N, this.editable = G, this.getEditRenderer = v, this.editInputPipe = k, this.isVisible = b, this.visible = !0, a.unit !== "px" && (this.minWidth = new l(0, "px"), this.maxWidth = new l(1e5, "px"));
   }
   static bodyRenderer(e) {
     return new C(
@@ -627,11 +627,11 @@ class y {
     return new y(
       e.property ?? "",
       e.headerLabel ?? "",
-      e.width ?? new p(100, "px"),
+      e.width ?? new l(100, "px"),
       a,
       r,
-      e.minWidth ?? new p(100, "px"),
-      e.maxWidth ?? new p(100, "px"),
+      e.minWidth ?? new l(100, "px"),
+      e.maxWidth ?? new l(100, "px"),
       e.sortable,
       e.sortComparator,
       e.sortState,
@@ -644,7 +644,7 @@ class y {
     );
   }
 }
-const Be = new p(300, "px"), Ie = new p(250, "px"), fe = new p(220, "px"), A = new p(200, "px"), qe = new p(160, "px"), Te = new p(150, "px"), re = new p(140, "px"), L = new p(120, "px"), T = new p(100, "px"), oe = new p(90, "px"), he = new p(80, "px"), Ve = new p(70, "px"), x = new p(60, "px"), He = new p(50, "px");
+const Be = new l(300, "px"), Ie = new l(250, "px"), fe = new l(220, "px"), A = new l(200, "px"), qe = new l(160, "px"), Te = new l(150, "px"), re = new l(140, "px"), L = new l(120, "px"), T = new l(100, "px"), oe = new l(90, "px"), he = new l(80, "px"), Ve = new l(70, "px"), x = new l(60, "px"), He = new l(50, "px");
 class ae {
   constructor(e, r = [], a = -1) {
     this.areaIdent = e, this.columnDefs = r, this.defaultRowHeight = a, this.rowSelectionModel = void 0, this.yPositions = [], this.cellRenderers = r.map((t) => t.rendererMap[e]);
@@ -1071,14 +1071,17 @@ class $e {
   }
 }
 class W {
-  constructor(e, r, a, t = 0, n = 0, m = !1, d = new R(), i = [], u = [], l = -1, c = 0, N = 400, G = () => {
+  constructor(e, r, a, t = 0, n = 0, m = !1, d = new R(), i = [], u = [], p = -1, c = 0, N = 400, G = () => {
   }) {
     var v, k, b, F;
-    this.headerAreaModel = e, this.bodyAreaModel = r, this.footerAreaModel = a, this.fixedLeftColumnCount = t, this.fixedRightColumnCount = n, this.rowCheckboxVisible = m, this.defaultRowHeights = d, this.columnDefs = i, this.columnSizes = u, this.overridingColumnWidth = l, this.columnCount = c, this.parentSize = N, this.getSelectionModel = G, this.rowCount = 0, this.contentHeightInPx = 0, this.contentWidthInPx = 0, this.padding = new ue(0, 0, 0, 0), this.xPositions = [], e.areaIdent = "header", r.areaIdent = "body", a.areaIdent = "footer", this.columnCount || ((v = this.columnDefs) != null && v.length ? this.columnCount = this.columnDefs.length : (k = this.columnSizes) != null && k.length && (this.columnCount = (b = this.columnSizes) == null ? void 0 : b.length)), (F = this.columnDefs) != null && F.length && xe(this.columnDefs[0]) && !r.rowSelectionModel && (r.rowSelectionModel = new $e());
+    this.headerAreaModel = e, this.bodyAreaModel = r, this.footerAreaModel = a, this.fixedLeftColumnCount = t, this.fixedRightColumnCount = n, this.rowCheckboxVisible = m, this.defaultRowHeights = d, this.columnDefs = i, this.columnSizes = u, this.overridingColumnWidth = p, this.columnCount = c, this.parentSize = N, this.getSelectionModel = G, this.rowCount = 0, this.contentHeightInPx = 0, this.contentWidthInPx = 0, this.padding = new ue(0, 0, 0, 0), this.xPositions = [], e.areaIdent = "header", r.areaIdent = "body", a.areaIdent = "footer", this.columnCount || ((v = this.columnDefs) != null && v.length ? this.columnCount = this.columnDefs.length : (k = this.columnSizes) != null && k.length && (this.columnCount = (b = this.columnSizes) == null ? void 0 : b.length)), (F = this.columnDefs) != null && F.length && xe(this.columnDefs[0]) && !r.rowSelectionModel && (r.rowSelectionModel = new $e());
   }
   init() {
     this.recalcSize(this.parentSize), this.overridingColumnWidth === -1 && this.calcXPositions(), this.headerAreaModel && this.headerAreaModel.init(), this.bodyAreaModel && this.bodyAreaModel.init(), this.footerAreaModel && this.footerAreaModel.init();
   }
+  setParentWidth(e) {
+    this.parentSize = e;
+  }
   /**
    * Retrieves the count of columns in the current instance.
    *
@@ -1126,7 +1129,7 @@ class W {
    * @return {void} - This method does not return a value.
    */
   recalcSize(e) {
-    this.recalcColumnWidthes(e), this.recalcHeightAndPadding();
+    this.recalcColumnWidths(e), this.recalcHeightAndPadding();
   }
   /**
    * Recalculates the height and padding for the body area.
@@ -1393,23 +1396,49 @@ class W {
     var a, t, n;
     this.arrayMove(this.columnDefs, e, r), this.arrayMove(this.columnSizes, e, r), (a = this.headerAreaModel) == null || a.changeColumnOrder(e, r), (t = this.bodyAreaModel) == null || t.changeColumnOrder(e, r), (n = this.footerAreaModel) == null || n.changeColumnOrder(e, r), this.calcXPositions();
   }
-  recalcColumnWidthes(e) {
+  recalcColumnWidths(e) {
     var r, a, t;
-    !((r = this.columnDefs) != null && r.length) && !((a = this.columnSizes) != null && a.length) && (this.columnSizes = new Array(this.getColumnCount()).fill(this.overridingColumnWidth)), (t = this.columnDefs) != null && t.length && (this.columnSizes = this.columnDefs.map((n) => {
-      if (n.width.unit === "%" && e) {
-        let m = Math.floor(n.width.value * e / 100);
-        if (n.minWidth) {
-          const d = n.minWidth.unit === "px" ? n.minWidth.value : Math.floor(n.minWidth.value * e / 100);
-          m = Math.max(d, m);
-        }
-        if (n.maxWidth) {
-          const d = n.maxWidth.unit === "px" ? n.maxWidth.value : Math.floor(n.maxWidth.value * e / 100);
-          m = Math.min(d, m);
+    if (!((r = this.columnDefs) != null && r.length) && !((a = this.columnSizes) != null && a.length) && (this.columnSizes = new Array(this.getColumnCount()).fill(this.overridingColumnWidth)), (t = this.columnDefs) != null && t.length) {
+      const n = this.columnDefs.filter((i) => {
+        var u;
+        return ((u = i.width) == null ? void 0 : u.unit) === "weight";
+      });
+      this.columnSizes = this.columnDefs.map((i) => {
+        if (i.width.unit === "%" && e) {
+          let u = Math.floor(i.width.value * e / 100);
+          if (i.minWidth) {
+            const p = this.sizeToPixel(i.minWidth, e);
+            u = Math.max(p, u);
+          }
+          if (i.maxWidth) {
+            const p = this.sizeToPixel(i.maxWidth, e);
+            u = Math.min(p, u);
+          }
+          return u;
+        } else if (i.width.unit === "px" && e)
+          return i.width.value;
+        return 0;
+      });
+      const m = this.columnSizes.reduce((i, u) => i + u), d = e - m;
+      if (d > 0 && n.length) {
+        const i = n.map((u) => u.width.value).reduce((u, p) => u + p);
+        for (let u = 0; u < this.columnDefs.length; u++) {
+          const p = this.columnDefs[u];
+          p.width.unit === "weight" && (this.columnSizes[u] = p.width.value * d / i);
         }
-        return m;
       }
-      return n.width.value;
-    }));
+    }
+  }
+  /**
+   * Converts the given `SizeIf` object to pixel units based on the provided `clientWidth`.
+   * The given `SizeIf` must have the uniit '%' or 'px'.
+   *
+   * @param {SizeIf} width - The size object to be converted.
+   * @param {number} clientWidth - The width of the client area in pixels.
+   * @return {number} - The converted size value in pixels. returns -1 if unit is not '%' or 'px'.
+   */
+  sizeToPixel(e, r) {
+    return e.unit === "px" ? e.value : e.unit === "%" ? Math.floor(e.value * r / 100) : -1;
   }
   arrayMove(e, r, a) {
     const t = e.splice(r, 1)[0];
@@ -1492,7 +1521,7 @@ class I extends Ee {
 }
 class f {
   static createTableModel(e) {
-    var r, a, t, n, m, d, i, u, l, c, N, G, v, k;
+    var r, a, t, n, m, d, i, u, p, c, N, G, v, k;
     if (e.defaultRowHeights === void 0)
       if ((r = e.tableOptions) != null && r.defaultRowHeights)
         e.defaultRowHeights = e.tableOptions.defaultRowHeights;
@@ -1515,7 +1544,7 @@ class f {
       e.headerData,
       e.defaultRowHeights.header,
       e.columnDefs
-    ) : (l = e.columnDefs) != null && l.length ? e.headerAreaModel = new S(
+    ) : (p = e.columnDefs) != null && p.length ? e.headerAreaModel = new S(
       "header",
       [e.columnDefs.map((b) => b.headerLabel)],
       e.defaultRowHeights.header,
@@ -1583,7 +1612,7 @@ class f {
         r
       );
       return (d || a.showCheckboxWihoutExtraColumn) && (u.rowSelectionModel = new ye(i)), f.createByAreaModelsParam({
-        headerAreaModel: new S("header", [r.map((l) => l.headerLabel)], m.header),
+        headerAreaModel: new S("header", [r.map((p) => p.headerLabel)], m.header),
         bodyAreaModel: u,
         footerAreaModel: new S("footer", [], m.footer),
         columnDefs: r,
@@ -1618,7 +1647,7 @@ class f {
       e.columnSizes ?? []
     );
   }
-  static createByAreaModels(e = new Z(), r, a = new Z(), t = 0, n = 0, m = !1, d = new R(), i, u = [], l = -1, c) {
+  static createByAreaModels(e = new Z(), r, a = new Z(), t = 0, n = 0, m = !1, d = new R(), i, u = [], p = -1, c) {
     return new W(
       e,
       r,
@@ -1629,7 +1658,7 @@ class f {
       d,
       i,
       u,
-      l,
+      p,
       c
     );
   }
@@ -1649,11 +1678,11 @@ class f {
     );
   }
   static createByObjectArray(e, r = [], a = [], t = 0, n = 0, m = !1, d = new R(), i, u = []) {
-    let l;
-    r != null && r.length ? l = new S("header", r, d.header, i) : i != null && i.length ? l = new S("header", [i.map((G) => G.headerLabel)], d.header, i) : l = new Z();
+    let p;
+    r != null && r.length ? p = new S("header", r, d.header, i) : i != null && i.length ? p = new S("header", [i.map((G) => G.headerLabel)], d.header, i) : p = new Z();
     const c = a ? new S("footer", a, d.footer, i) : new Z(), N = new I("body", e, i, d.body);
     return new W(
-      l,
+      p,
       N,
       c,
       t,
@@ -1949,8 +1978,8 @@ const E = class E {
   render(e, r, a, t, n, m, d) {
     const i = m != null && m.data ? m.data : "";
     if (m) {
-      const { toggle: u, visibility: l, closed: c } = m, N = u ? E.toggleHeaderGroup : "";
-      this.addText(e, t, r, a, i, N), u && l !== "always" && this.addArrowDiv(d, e, !c, r, a, t, N);
+      const { toggle: u, visibility: p, closed: c } = m, N = u ? E.toggleHeaderGroup : "";
+      this.addText(e, t, r, a, i, N), u && p !== "always" && this.addArrowDiv(d, e, !c, r, a, t, N);
     } else
       this.addText(e, t, r, a, i, "");
   }
@@ -1967,7 +1996,7 @@ const E = class E {
     e.addClass(i, "ge-table-toggle-icon-div"), e.setStyle(i, "display", "inline-block"), e.setStyle(i, "position", ""), e.setStyle(i, "width", "20px"), e.setStyle(i, "background", "transparent"), e.setStyle(i, "cursor", "pointer"), e.setAttribute(i, "data-row-index", `${t}`), e.setAttribute(i, "data-col-index", `${n}`), e.setAttribute(i, "data-area", `${m}`), e.setAttribute(i, "data-ge-action", `${d}`);
     let u;
     a ? u = this.headerGroupOptions.iconExpanded : u = this.headerGroupOptions.iconCollapsed;
-    const l = u.content, c = e.createText(l);
+    const p = u.content, c = e.createText(p);
     e.appendChild(i, c), u.style && this.applyStyleString(e, i, u.style);
     for (const N of u.classes)
       e.addClass(i, N);
@@ -2095,7 +2124,7 @@ class Le {
   render(e, r, a, t, n, m, d) {
     if (this.readonly || this.skipCheckableCheck || n.isRowCheckable(r)) {
       d.addClass(e, "ge-table-row-checkbox-div");
-      const i = n.getRowByIndex(r), l = n.getValueByT(i, this.property) === !0 ? "checked" : "", c = this.readonly ? " readonly " : "";
+      const i = n.getRowByIndex(r), p = n.getValueByT(i, this.property) === !0 ? "checked" : "", c = this.readonly ? " readonly " : "";
       if (d.addClass(e, "ge-padding-property-checkbox"), e.innerHTML = `
         <input
           type="checkbox"
@@ -2104,7 +2133,7 @@ class Le {
           data-col-index="${a}"
           data-property-index="${this.property}"
           data-input-type="checkbox"
-          ${l}
+          ${p}
           ${c}
           class="ge-input-checkbox">`, !this.readonly) {
         const N = e.querySelector(".ge-input-checkbox");
@@ -2147,13 +2176,13 @@ class je {
   }
   render(e, r, a, t, n, m, d) {
     if (d.addClass(e, "ge-progressbar-div"), !isNaN(m)) {
-      const u = Number(m) * 100 / this.maxValue, l = this.labelVisible ? Math.round(u) + "%" : "";
+      const u = Number(m) * 100 / this.maxValue, p = this.labelVisible ? Math.round(u) + "%" : "";
       e.innerHTML = `
         <div class="ge-table-label-div"
           data-row-index="${r}"
           data-col-index="${a}"
           data-area="${t}"
-          title="${l}"
+          title="${p}"
           style="position: relative; background: transparent; width: 100%; height: 100%;">
               <div class="ge-table-progress-container"
                   style="width:100%;height:50%;padding:0;margin-top:6px;"
@@ -2197,10 +2226,10 @@ class Ge {
     d.addClass(e, "ge-star-rating-div");
     const i = n.getRowByIndex(r), u = +("" + n.getValueByT(i, this.property));
     if (!isNaN(u)) {
-      const l = [];
+      const p = [];
       for (let N = 0; N < u; N++)
-        l.push("★");
-      const c = l.join(" ");
+        p.push("★");
+      const c = p.join(" ");
       e.innerHTML = `
           <div class="ge-table-label-div" data-row-index="${r}" data-col-index="${a}" data-area="${t}" style="position: relative; background: transparent; width: 100%; height: 100%;">
             <div class="ge-table-label" data-row-index="${r}" data-col-index="${a}" data-area="${t}">${c}</div>
@@ -2216,7 +2245,7 @@ class Ze {
     d.addClass(e, "ge-star-rating-div");
     const i = n.getRowByIndex(r), u = +("" + n.getValueByT(i, this.property));
     if (!isNaN(u)) {
-      const l = u * 100 / this.maxValue, c = this.labelVisible ? Math.round(l) + "%" : "";
+      const p = u * 100 / this.maxValue, c = this.labelVisible ? Math.round(p) + "%" : "";
       e.innerHTML = `
           <div class="ge-table-label-div"
           data-row-index="${r}"
@@ -2230,7 +2259,7 @@ class Ze {
                   data-col-index="${a}"
                   data-area="${t}">
                   <div class="ge-table-progress-bar"
-                      style="width:${l}%;height:100%;padding:0;margin:0;"
+                      style="width:${p}%;height:100%;padding:0;margin:0;"
                       data-row-index="${r}"
                       data-col-index="${a}"
                       data-area="${t}">&nbsp;
@@ -2281,7 +2310,7 @@ class ne {
         const N = c.value === i ? " selected " : "";
         u.push(`<option value="${c.value}" ${N}>${c.label}</option>`);
       }
-      const l = u.join("");
+      const p = u.join("");
       e.innerHTML = `
             <select
                 type="text"
@@ -2293,7 +2322,7 @@ class ne {
                 data-col-index="${a}"
                 data-input-type="text"
                 style="width:100%;height:100%;border:0;padding:0 0 0 8px;"
-                class="ge-table-cell-editor-select">${l}</select>`;
+                class="ge-table-cell-editor-select">${p}</select>`;
     }
   }
 }
@@ -2364,11 +2393,11 @@ class nr {
   render(e, r, a, t, n, m, d) {
     const i = n.getRowByIndex(r);
     if (i) {
-      const u = this.formatterUsd.format(i.volUsd), l = this.formatter.format(i.volBtc);
+      const u = this.formatterUsd.format(i.volUsd), p = this.formatter.format(i.volBtc);
       e.innerHTML = `
       <div style="line-height: 1.2;padding: 10px 0 0 10px;">
         ${u}<br>
-        ${l} BTC
+        ${p} BTC
       </div>
       `;
     }
@@ -2381,9 +2410,9 @@ class mr {
   render(e, r, a, t, n, m, d) {
     const i = n.getRowByIndex(r);
     if (i) {
-      const u = this.formatter.format(i.circulatingSupply), l = i.maxSupply, c = [];
-      if (c.push('<div style="line-height: 1.2;padding: 10px 0 0 10px;">'), c.push(u), c.push("<br>"), l) {
-        const N = this.maxWidth * i.circulatingSupply / l;
+      const u = this.formatter.format(i.circulatingSupply), p = i.maxSupply, c = [];
+      if (c.push('<div style="line-height: 1.2;padding: 10px 0 0 10px;">'), c.push(u), c.push("<br>"), p) {
+        const N = this.maxWidth * i.circulatingSupply / p;
         c.push(`
           <div style="width: ${this.maxWidth}px;height: 5px;background-color: #eee;margin:10px 0 0 10px">
             <div style="width: ${N}px;height: 5px;background-color: #ccc;"></div>
@@ -167110,15 +167139,15 @@ function Er() {
     // <-- true: we will see the checkbox IN the first column after the arrow
   }, e = [
     // new CheckboxColumn(), //  <--- not needed, because we have 'showCheckboxWihoutExtraColumn:true'
-    new y("lastName", "Last Name", new p(250, "px")),
-    new y("preName", "Pre Name", new p(120, "px")),
-    new y("birth", "Birthday", new p(100, "px"), new C(), new C(void 0, new O(), void 0), void 0, void 0),
-    new y("gender", " ", new p(50, "px"), new C(), new C(void 0, new Pe(), void 0), void 0, void 0),
-    new y("address.street", "Strasse", new p(150, "px")),
-    new y("address.number", "Nr", new p(70, "px")),
-    new y("address.zip", "Zip", new p(60, "px")),
-    new y("address.city", "City", new p(120, "px")),
-    new y("id", "ID", new p(60, "px"))
+    new y("lastName", "Last Name", new l(250, "px")),
+    new y("preName", "Pre Name", new l(120, "px")),
+    new y("birth", "Birthday", new l(100, "px"), new C(), new C(void 0, new O(), void 0), void 0, void 0),
+    new y("gender", " ", new l(50, "px"), new C(), new C(void 0, new Pe(), void 0), void 0, void 0),
+    new y("address.street", "Strasse", new l(150, "px")),
+    new y("address.number", "Nr", new l(70, "px")),
+    new y("address.zip", "Zip", new l(60, "px")),
+    new y("address.city", "City", new l(120, "px")),
+    new y("id", "ID", new l(60, "px"))
   ], r = M.buildTreeRows(dr, "friends");
   return f.createTableModel({
     rows: r,
@@ -219799,9 +219828,9 @@ class fr extends te {
     const a = Q[r], t = H[e];
     if (!P[a] || !P[a][t])
       return;
-    const n = P[a][t].temperature, m = new K(67, 1, 84), d = new K(31, 144, 141), i = new K(250, 230, 37), u = (Ne + be) / 2, l = new er(be, m, u, d, Ne, i);
+    const n = P[a][t].temperature, m = new K(67, 1, 84), d = new K(31, 144, 141), i = new K(250, 230, 37), u = (Ne + be) / 2, p = new er(be, m, u, d, Ne, i);
     return {
-      background: U.getThreeColorGradientRGB(n, l),
+      background: U.getThreeColorGradientRGB(n, p),
       color: "transparent"
       // we only want to show the bg color
     };
@@ -220359,31 +220388,31 @@ const Lr = [
     data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
   }
 ].map((s) => (s.updatedAt = /* @__PURE__ */ new Date(), s)), _ = [
-  new y("city", "City", new p(90, "px")),
-  new y("location", "Location", new p(100, "px")),
-  new y("team.name", "Team", new p(100, "px")),
+  new y("city", "City", new l(90, "px")),
+  new y("location", "Location", new l(100, "px")),
+  new y("team.name", "Team", new l(100, "px")),
   y.create({
     property: "team.active",
     headerLabel: "Active",
-    width: new p(60, "px"),
+    width: new l(60, "px"),
     bodyRenderer: new ze()
   }),
-  new y("data.0", "00", new p(60, "px")),
-  new y("data.1", "15", new p(60, "px")),
-  new y("data.2", "30", new p(60, "px")),
-  new y("data.3", "45", new p(60, "px")),
-  new y("data.4", "00", new p(60, "px")),
-  new y("data.5", "15", new p(60, "px")),
-  new y("data.6", "30", new p(60, "px")),
-  new y("data.7", "45", new p(60, "px")),
-  new y("data.8", "00", new p(60, "px")),
-  new y("data.9", "15", new p(60, "px")),
-  new y("data.10", "30", new p(60, "px")),
-  new y("data.11", "45", new p(60, "px")),
+  new y("data.0", "00", new l(60, "px")),
+  new y("data.1", "15", new l(60, "px")),
+  new y("data.2", "30", new l(60, "px")),
+  new y("data.3", "45", new l(60, "px")),
+  new y("data.4", "00", new l(60, "px")),
+  new y("data.5", "15", new l(60, "px")),
+  new y("data.6", "30", new l(60, "px")),
+  new y("data.7", "45", new l(60, "px")),
+  new y("data.8", "00", new l(60, "px")),
+  new y("data.9", "15", new l(60, "px")),
+  new y("data.10", "30", new l(60, "px")),
+  new y("data.11", "45", new l(60, "px")),
   y.create({
     property: "updatedAt",
     headerLabel: "Updated at",
-    width: new p(175, "px"),
+    width: new l(175, "px"),
     bodyRenderer: new Xe()
   })
 ], Yr = _.length - 1, Pr = {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@guiexpert/demo-table-models",
-  "version": "1.0.20",
+  "version": "1.0.22",
   "type": "module",
   "main": "./index.js",
   "types": "./index.d.ts",
@@ -18,7 +18,7 @@
   },
   "dependencies": {
     "tslib": "^2.3.0",
-    "@guiexpert/table": "^1.1.26"
+    "@guiexpert/table": "^1.1.28"
   },
   "devDependencies": {
     "@types/node": "^20.11.17",