@guiexpert/react-table 18.0.8 → 18.0.10

package/README.md

@@ -7,7 +7,7 @@ This is the react component of the GuiExpert Table Project.
 
 This is the UI-agnostic table component for your next web app. 😊
 
-<img src="https://raw.githubusercontent.com/guiexperttable/ge-table/main/apps/table-website/src/assets/screens/heatmap.png" width="50%">
+<img src="https://raw.githubusercontent.com/guiexperttable/ge-table/main/apps/webpage-guiexpert/src/assets/screens/heatmap.png" width="50%">
 
 ### Features
 - Handle large datasets easily

package/index.cjs

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const se=require("react/jsx-runtime"),K=require("react"),ie=require("react-dom");class k{constructor(){this.alreadySet=!1}static getInstance(){return k.instance||(k.instance=new k),k.instance}setLicenseKey(e){if(e&&!this.alreadySet){const t=document.createElement("meta");t.content="license="+e,t.name="guiexperttable",document.getElementsByTagName("head")[0].appendChild(t),this.alreadySet=!0}}}function H(p){return p&&p.type==="TreeRow"}function W(p){return p&&p.type==="AreaModelTree"}class _{constructor(e=-1,t=-1,o=-1,s=-1,i,r,a,l=0,n=0,d=0,h=""){this.rowIndex=e,this.rowTop=t,this.columnIndex=o,this.columnLeft=s,this.areaIdent=i,this.sideIdent=r,this.originalEvent=a,this.clickCount=l,this.draggingX=n,this.draggingY=d,this.action=h}clone(){return new _(this.rowIndex,this.rowTop,this.columnIndex,this.columnLeft,this.areaIdent,this.sideIdent,this.originalEvent,this.clickCount,this.draggingX,this.draggingY,this.action)}}class D{constructor(e=">",t="",o=[]){this.content=e,this.style=t,this.classes=o}}class Q{constructor(e=new D(">","transform: rotate(90deg) translate(66%, -66%); transform-origin: 0 0;",["gt-table-tree-arrow-expanded"]),t=new D(">","",["ge-table-tree-arrow-collapsed"]),o=new D(">","color:transparent;",["gt-table-tree-arrow-hidden"]),s=new D("↕","",["gt-table-tree-arrow-expanded-all"])){this.arrowExpanded=e,this.arrowCollapsed=t,this.arrowPlaceholder=o,this.arrowExpandCollapseAll=s}}class Z{constructor(e=new D("↑","",["ge-header-sorted-asc"]),t=new D("↓","",["ge-header-sorted-desc"]),o=new D("↑","color:transparent;",[])){this.iconAsc=e,this.iconDesc=t,this.iconPlaceholder=o}}class re{constructor(e){this.domService=e}setStyle(e,t,o){return this.domService.setStyle(e,t,o),e}applyStyle(e,t){for(const o in t)this.domService.setStyle(e,o,t[o]);return e}applyDisplayNoneStyle(e){return this.domService.setStyle(e,"display","none"),e}applyDisplayBlockStyle(e){return this.domService.setStyle(e,"display","block"),e}applyStyleInPx(e,t){return Object.entries(t).forEach(([o,s])=>this.domService.setStyle(e,o,s+"px")),e}applyStylePosistionRelative(e){return this.domService.setStyle(e,"position","relative"),this.domService.setStyle(e,"overflow","clip"),e}applyStylePosistionAbsolute(e){return this.domService.setStyle(e,"position","absolute"),e}applyStyleFullSize(e){return this.domService.setStyle(e,"width","100%"),this.domService.setStyle(e,"height","100%"),e}applyStyleOverflowAuto(e="auto",t="auto",o){return this.domService.setStyle(o,"overflow-x",e),this.domService.setStyle(o,"overflow-y",t),o}applyStyleNoPadding(e){return this.domService.setStyle(e,"padding","0"),this.domService.setStyle(e,"margin","0"),this.domService.setStyle(e,"border","0"),e}appendRelativeChildDiv(e){const t=this.applyStylePosistionRelative(this.applyStyleFullSize(this.applyStyleNoPadding(this.domService.createElement("div"))));return this.domService.appendChild(e,t),this.applyStylePosistionAbsolute(e),{parent:e,child:t,cache:{}}}appendText(e,t){const o=this.domService.createText(t);return this.domService.appendChild(e,o),o}addClass(e,t){return e.includes(" ")?e.split(" ").forEach(o=>this.domService.addClass(t,o)):this.domService.addClass(t,e),t}removeClass(e,t){return e.includes(" ")?e.split(" ").forEach(o=>this.domService.removeClass(t,o)):this.domService.removeClass(t,e),t}addClasses(e,t){if(e)for(const o of e)this.domService.addClass(t,o);return t}setAttribute(e,t,o){return t&&o&&this.domService.setAttribute(e,t,o),e}createAreaDivWithClass(e,t,o,s){const i=this.domService.createElement("div");return this.addClass(e,i),this.domService.setAttribute(i,"data-area",o),this.domService.setAttribute(i,"data-side",s),this.domService.appendChild(t,i),i}createDivWithClass(e,t){const o=this.domService.createElement("div");return this.addClass(e,o),this.domService.appendChild(t,o),o}addRowDiv(e,t,o=-1,s,i,r=""){const a=t.index??-1,l=this.getDivOrCreateDiv(a,e);if(this.domService.addClass(l,"ge-table-row-div"),this.domService.addClass(l,`ge-table-row-div-${t.index}`),s==="body"&&i==="center"){const n=((t==null?void 0:t.index)??0)%2===0?"even":"odd";this.domService.addClass(l,`ge-table-row-${n}`)}if(this.domService.setStyle(l,"display","clip"),this.domService.setStyle(l,"position","absolute"),this.domService.setStyle(l,"left",`${t.left}px`),this.domService.setStyle(l,"top",`${t.top}px`),this.domService.setStyle(l,"width",`${t.width}px`),this.domService.setStyle(l,"height",`${t.height}px`),this.domService.setAttribute(l,"data-row-index",`${o}`),this.domService.setAttribute(l,"data-area",`${s}`),r){const n=this.domService.createText(r);this.domService.appendChild(l,n)}return this.domService.appendChild(e.child,l),l}addColumnDiv(e){const{parent:t,geo:o,rowIndex:s=-1,columnIndex:i=-1,areaIdent:r,sideIdent:a,text:l="",treeArrow:n,tableOptions:d,checkedType:h=void 0,sortState:c}=e,f=d==null?void 0:d.treeOptions,u=d==null?void 0:d.showCheckboxWihoutExtraColumn,S=this.domService.createElement("div");this.domService.addClass(S,"ge-table-col-div"),this.domService.addClass(S,`ge-table-col-div-${o.index}`),this.domService.setAttribute(S,"data-col-index",`${o.index}`),this.domService.setAttribute(S,"data-row-index",`${s}`),this.domService.setAttribute(S,"data-area",`${r}`);const b=((o==null?void 0:o.index)??0)%2===0?"even":"odd";if(r==="body"&&a==="center"&&this.domService.addClass(S,`ge-table-column-${b}`),this.domService.setStyle(S,"display","clip"),this.domService.setStyle(S,"position","absolute"),this.domService.setStyle(S,"left",`${o.left}px`),this.domService.setStyle(S,"top",`${o.top}px`),this.domService.setStyle(S,"width",`${o.width}px`),this.domService.setStyle(S,"height",`${o.height}px`),n&&n!=="none"&&(this.domService.addClass(S,"ge-table-col-tree"),this.addArrowDiv(S,n,f,s,i,r)),u&&i===0&&h&&this.addCheckboxToDiv(S,h,r,s),l){const g=n!=="none"&&i===0;this.addLabelDiv(S,l,g,s,i,r)}return c&&this.addSortedIcon(S,c,d==null?void 0:d.sortedOptions,i),this.domService.appendChild(t,S),S}addCheckboxToDiv(e,t,o,s){const i=this.domService.createElement("div"),r=t==="full"?"checked":"";return i.innerHTML=`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const se=require("react/jsx-runtime"),K=require("react"),ie=require("react-dom");class k{constructor(){this.alreadySet=!1}static getInstance(){return k.instance||(k.instance=new k),k.instance}setLicenseKey(e){if(e&&!this.alreadySet){const t=document.createElement("meta");t.content="license="+e,t.name="guiexperttable",document.getElementsByTagName("head")[0].appendChild(t),this.alreadySet=!0}}}function H(p){return p&&p.type==="TreeRow"}function W(p){return p&&p.type==="AreaModelTree"}class _{constructor(e=-1,t=-1,o=-1,s=-1,i,r,a,l=0,n=0,d=0,h=""){this.rowIndex=e,this.rowTop=t,this.columnIndex=o,this.columnLeft=s,this.areaIdent=i,this.sideIdent=r,this.originalEvent=a,this.clickCount=l,this.draggingX=n,this.draggingY=d,this.action=h}clone(){return new _(this.rowIndex,this.rowTop,this.columnIndex,this.columnLeft,this.areaIdent,this.sideIdent,this.originalEvent,this.clickCount,this.draggingX,this.draggingY,this.action)}}class D{constructor(e=">",t="",o=[]){this.content=e,this.style=t,this.classes=o}}class Q{constructor(e=new D(">","transform: rotate(90deg) translate(66%, -66%); transform-origin: 0 0;",["gt-table-tree-arrow-expanded"]),t=new D(">","",["ge-table-tree-arrow-collapsed"]),o=new D(">","color:transparent;",["gt-table-tree-arrow-hidden"]),s=new D("↕","",["gt-table-tree-arrow-expanded-all"])){this.arrowExpanded=e,this.arrowCollapsed=t,this.arrowPlaceholder=o,this.arrowExpandCollapseAll=s}}class Z{constructor(e=new D("↑","",["ge-header-sorted-asc"]),t=new D("↓","",["ge-header-sorted-desc"]),o=new D("↑","color:transparent;",[])){this.iconAsc=e,this.iconDesc=t,this.iconPlaceholder=o}}class re{constructor(e){this.domService=e}setStyle(e,t,o){return this.domService.setStyle(e,t,o),e}applyStyle(e,t){for(const o in t)this.domService.setStyle(e,o,t[o]);return e}applyDisplayNoneStyle(e){return this.domService.setStyle(e,"display","none"),e}applyDisplayBlockStyle(e){return this.domService.setStyle(e,"display","block"),e}applyStyleInPx(e,t){return Object.entries(t).forEach(([o,s])=>this.domService.setStyle(e,o,s+"px")),e}applyStylePosistionRelative(e){return this.domService.setStyle(e,"position","relative"),this.domService.setStyle(e,"overflow","clip"),e}applyStylePosistionAbsolute(e){return this.domService.setStyle(e,"position","absolute"),e}applyStyleFullSize(e){return this.domService.setStyle(e,"width","100%"),this.domService.setStyle(e,"height","100%"),e}applyStyleOverflowAuto(e="auto",t="auto",o){return this.domService.setStyle(o,"overflow-x",e),this.domService.setStyle(o,"overflow-y",t),o}applyStyleNoPadding(e){return this.domService.setStyle(e,"padding","0"),this.domService.setStyle(e,"margin","0"),this.domService.setStyle(e,"border","0"),e}appendRelativeChildDiv(e){const t=this.applyStylePosistionRelative(this.applyStyleFullSize(this.applyStyleNoPadding(this.domService.createElement("div"))));return this.domService.appendChild(e,t),this.applyStylePosistionAbsolute(e),{parent:e,child:t,cache:{}}}appendText(e,t){const o=this.domService.createText(t);return this.domService.appendChild(e,o),o}addClass(e,t){return e.includes(" ")?e.split(" ").forEach(o=>this.domService.addClass(t,o)):this.domService.addClass(t,e),t}removeClass(e,t){return e.includes(" ")?e.split(" ").forEach(o=>this.domService.removeClass(t,o)):this.domService.removeClass(t,e),t}addClasses(e,t){if(e)for(const o of e)this.domService.addClass(t,o);return t}setAttribute(e,t,o){return t&&o&&this.domService.setAttribute(e,t,o),e}createAreaDivWithClass(e,t,o,s){const i=this.domService.createElement("div");return this.addClass(e,i),this.domService.setAttribute(i,"data-area",o),this.domService.setAttribute(i,"data-side",s),this.domService.appendChild(t,i),i}createDivWithClass(e,t){const o=this.domService.createElement("div");return this.addClass(e,o),this.domService.appendChild(t,o),o}addRowDiv(e,t,o=-1,s,i,r=""){const a=t.index??-1,l=this.getDivOrCreateDiv(a,e);if(this.domService.addClass(l,"ge-table-row-div"),this.domService.addClass(l,`ge-table-row-div-${t.index}`),s==="body"&&i==="center"){const n=((t==null?void 0:t.index)??0)%2===0?"even":"odd";this.domService.addClass(l,`ge-table-row-${n}`)}if(this.domService.setStyle(l,"display","clip"),this.domService.setStyle(l,"position","absolute"),this.domService.setStyle(l,"left",`${t.left}px`),this.domService.setStyle(l,"top",`${t.top}px`),this.domService.setStyle(l,"width",`${t.width}px`),this.domService.setStyle(l,"height",`${t.height}px`),this.domService.setAttribute(l,"data-row-index",`${o}`),this.domService.setAttribute(l,"data-area",`${s}`),r){const n=this.domService.createText(r);this.domService.appendChild(l,n)}return this.domService.appendChild(e.child,l),l}addColumnDiv(e){const{parent:t,geo:o,rowIndex:s=-1,columnIndex:i=-1,areaIdent:r,sideIdent:a,text:l="",treeArrow:n,tableOptions:d,checkedType:h=void 0,sortState:c}=e,f=d==null?void 0:d.treeOptions,u=d==null?void 0:d.showCheckboxWihoutExtraColumn,S=this.domService.createElement("div");this.domService.addClass(S,"ge-table-col-div"),u&&this.domService.addClass(S,"ge-with-checkbox"),this.domService.addClass(S,`ge-table-col-div-${o.index}`),this.domService.setAttribute(S,"data-col-index",`${o.index}`),this.domService.setAttribute(S,"data-row-index",`${s}`),this.domService.setAttribute(S,"data-area",`${r}`);const b=((o==null?void 0:o.index)??0)%2===0?"even":"odd";if(r==="body"&&a==="center"&&this.domService.addClass(S,`ge-table-column-${b}`),this.domService.setStyle(S,"display","clip"),this.domService.setStyle(S,"position","absolute"),this.domService.setStyle(S,"left",`${o.left}px`),this.domService.setStyle(S,"top",`${o.top}px`),this.domService.setStyle(S,"width",`${o.width}px`),this.domService.setStyle(S,"height",`${o.height}px`),n&&n!=="none"&&(this.domService.addClass(S,"ge-table-col-tree"),this.addArrowDiv(S,n,f,s,i,r)),u&&i===0&&h&&this.addCheckboxToDiv(S,h,r,s),l){const g=n!=="none"&&i===0;this.addLabelDiv(S,l,g,s,i,r)}return c&&this.addSortedIcon(S,c,d==null?void 0:d.sortedOptions,i),this.domService.appendChild(t,S),S}addCheckboxToDiv(e,t,o,s){const i=this.domService.createElement("div"),r=t==="full"?"checked":"";return i.innerHTML=`
             <input
                 type="checkbox"
                 data-area="${o}"

package/index.js

@@ -170,7 +170,7 @@ class le {
   }
   addColumnDiv(e) {
     const { parent: t, geo: o, rowIndex: s = -1, columnIndex: i = -1, areaIdent: r, sideIdent: a, text: l = "", treeArrow: n, tableOptions: d, checkedType: h = void 0, sortState: c } = e, f = d == null ? void 0 : d.treeOptions, u = d == null ? void 0 : d.showCheckboxWihoutExtraColumn, S = this.domService.createElement("div");
-    this.domService.addClass(S, "ge-table-col-div"), this.domService.addClass(S, `ge-table-col-div-${o.index}`), this.domService.setAttribute(S, "data-col-index", `${o.index}`), this.domService.setAttribute(S, "data-row-index", `${s}`), this.domService.setAttribute(S, "data-area", `${r}`);
+    this.domService.addClass(S, "ge-table-col-div"), u && this.domService.addClass(S, "ge-with-checkbox"), this.domService.addClass(S, `ge-table-col-div-${o.index}`), this.domService.setAttribute(S, "data-col-index", `${o.index}`), this.domService.setAttribute(S, "data-row-index", `${s}`), this.domService.setAttribute(S, "data-area", `${r}`);
     const b = ((o == null ? void 0 : o.index) ?? 0) % 2 === 0 ? "even" : "odd";
     if (r === "body" && a === "center" && this.domService.addClass(S, `ge-table-column-${b}`), this.domService.setStyle(S, "display", "clip"), this.domService.setStyle(S, "position", "absolute"), this.domService.setStyle(S, "left", `${o.left}px`), this.domService.setStyle(S, "top", `${o.top}px`), this.domService.setStyle(S, "width", `${o.width}px`), this.domService.setStyle(S, "height", `${o.height}px`), n && n !== "none" && (this.domService.addClass(S, "ge-table-col-tree"), this.addArrowDiv(S, n, f, s, i, r)), u && i === 0 && h && this.addCheckboxToDiv(S, h, r, s), l) {
       const g = n !== "none" && i === 0;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@guiexpert/react-table",
-  "version": "18.0.8",
+  "version": "18.0.10",
   "type": "module",
   "main": "./index.js",
   "types": "./index.d.ts",
@@ -20,7 +20,7 @@
     "tslib": "^2.3.0",
     "react": "18.2.0",
     "react-dom": "18.2.0",
-    "@guiexpert/table": "^1.1.25"
+    "@guiexpert/table": "^1.1.27"
   },
   "devDependencies": {
     "@vitejs/plugin-react": "^4.1.1",