@guiexpert/preact-table 10.1.90 → 10.1.92

package/GuiexpertTable.d.ts

@@ -1,5 +1,5 @@
 import { Component } from 'preact';
-import { FocusModelIf, GeModelChangeEvent, GeMouseEvent, GeScrollEvent, SelectionModelIf, TableApi, TableModelIf, TableOptions } from '@guiexpert/table';
+import { FocusModelIf, GeModelChangeEvent, GeMouseEvent, GeScrollEvent, GeStateChangeEvent, SelectionModelIf, TableApi, TableModelIf, TableOptions } from '@guiexpert/table';
 
 export type GeMouseEventFn = (evt: GeMouseEvent) => void;
 export type GeCheckboxEventFn = (evt: any[]) => void;
@@ -8,6 +8,7 @@ export type GeModelChangeEventFn = (evt: GeModelChangeEvent) => void;
 export type GeSelectionChangeEventFn = (evt: SelectionModelIf) => void;
 export type GeFocusChangeEventFn = (evt: FocusModelIf) => void;
 export type GeScrollEventFn = (evt: GeScrollEvent) => void;
+export type GeStateChangeEventFn = (evt: GeStateChangeEvent) => void;
 export interface GuiexpertTableProps {
     tableModel: TableModelIf;
     tableOptions?: TableOptions;
@@ -23,17 +24,45 @@ export interface GuiexpertTableProps {
     licenseKey?: string;
     selectionChanged?: GeSelectionChangeEventFn;
     focusChanged?: GeFocusChangeEventFn;
+    /**
+     * The state changed (column layout, sorting, scroll position, tree, checked/selected rows …) – once after the
+     * changes settled. Save `evt.state` (e.g. on your server) and pass it back as `tableOptions.initialState`.
+     * @since 1.1.92
+     */
+    stateChanged?: GeStateChangeEventFn;
+    /**
+     * `true` shows the loading overlay ("Loading…" with a CSS spinner) over the body, `false` hides it.
+     * Changing it does **not** re-create the table. Texts: `tableOptions.overlayOptions`. @since 1.1.92
+     */
+    loading?: boolean;
 }
 /**
- * GuiexpertTable is a React component that wraps the ExpertTable library.
+ * GuiexpertTable is a Preact component that wraps the GuiExpert Table (`@guiexpert/table`).
  * It displays a table with various event listeners and callback functions.
+ *
+ * A new `tableModel` or `tableOptions` object (new reference) re-creates the table; the previous
+ * table is released with `TableScope.destroy()`, as on unmount. Keep both objects stable
+ * (create them once, not in `render`), otherwise the table is re-created on every render.
+ * Callback props may change freely – the current one is called.
  */
 export declare class GuiexpertTable extends Component<GuiexpertTableProps> {
-    ref: import('preact').RefObject<any>;
+    ref: import('preact').RefObject<HTMLDivElement>;
+    private tableScope?;
+    /** the overlay was shown by the loading prop: loading={false} hides only that one */
+    private shownByProp;
     constructor(props: GuiexpertTableProps);
     componentDidMount(): void;
+    componentDidUpdate(previousProps: Readonly<GuiexpertTableProps>): void;
     componentWillUnmount(): void;
+    /**
+     * Creates the table in `ele` (a table created before is destroyed first) and calls `tableReady`.
+     * The event callbacks are always taken from the current props.
+     */
     initTable(ele: HTMLDivElement, props: GuiexpertTableProps): void;
+    /** Shows or hides the loading overlay according to the `loading` prop. */
+    private applyLoading;
+    /** Releases the table (listeners, resize observer, cell renderers). */
+    private destroyTable;
     render(): import("preact").JSX.Element;
 }
 export default GuiexpertTable;

package/index.cjs

@@ -1 +1 @@
-"use strict";var s=Object.defineProperty;var u=(o,t,i)=>t in o?s(o,t,{enumerable:!0,configurable:!0,writable:!0,value:i}):o[t]=i;var l=(o,t,i)=>u(o,typeof t!="symbol"?t+"":t,i);Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const m=require("preact/jsx-runtime"),a=require("preact"),r=require("@guiexpert/table");class h extends a.Component{constructor(i){super(i);l(this,"ref",a.createRef())}componentDidMount(){const i=this.ref.current;this.initTable(i,this.props)}componentWillUnmount(){}initTable(i,e){const d={onSelectionChanged(n){e.selectionChanged&&e.selectionChanged(n)},onScroll(n){e.scroll&&e.scroll(n)},onFocusChanged(n){e.focusChanged&&e.focusChanged(n)},onCheckboxChanged:n=>{e.checkboxChanged&&e.checkboxChanged(n)},onContextmenu:n=>{e.contextmenu&&e.contextmenu(n)},onModelChanged:n=>{e.modelChanged&&e.modelChanged(n)},onMouseClicked:n=>{e.mouseClicked&&e.mouseClicked(n)},onMouseDragging:n=>{e.mouseDragging&&e.mouseDragging(n)},onMouseDraggingEnd:n=>{e.mouseDraggingEnd&&e.mouseDraggingEnd(n)},onMouseMoved:n=>{}},c=new r.TableScope(i,e.tableModel,new r.SimpleDomService,e.tableOptions??new r.TableOptions,d);c.firstInit(),e.tableReady&&e.tableReady(c.getApi()),e.licenseKey&&r.LicenseManager.getInstance().setLicenseKey(e.licenseKey)}render(){return m.jsx("div",{ref:this.ref,className:"container-div",style:{width:"100%",height:"100%",backgroundColor:"transparent",padding:"0",margin:"0"}})}}class C{constructor(t){this.Component=t}render(t,i,e,d,c,n,f){const g={cellDiv:t,rowIndex:i,columnIndex:e,areaIdent:d,areaModel:c,cellValue:n};return a.render(a.h(this.Component,g),t),()=>{a.render(null,t)}}}exports.ComponentRendererWrapper=C;exports.GuiexpertTable=h;
+"use strict";var u=Object.defineProperty;var b=(r,i,t)=>i in r?u(r,i,{enumerable:!0,configurable:!0,writable:!0,value:t}):r[i]=t;var h=(r,i,t)=>b(r,typeof i!="symbol"?i+"":i,t);Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const y=require("preact/jsx-runtime"),d=require("preact"),c=require("@guiexpert/table");class m extends d.Component{constructor(t){super(t);h(this,"ref",d.createRef());h(this,"tableScope");h(this,"shownByProp",!1)}componentDidMount(){const t=this.ref.current;t&&this.initTable(t,this.props)}componentDidUpdate(t){const s=this.ref.current;s&&(t.tableModel!==this.props.tableModel||t.tableOptions!==this.props.tableOptions)&&this.initTable(s,this.props),!!t.loading!=!!this.props.loading&&this.applyLoading(),this.props.licenseKey&&this.props.licenseKey!==t.licenseKey&&c.LicenseManager.getInstance().setLicenseKey(this.props.licenseKey)}componentWillUnmount(){this.destroyTable()}initTable(t,s){var g;this.destroyTable();const a=()=>this.props,p={onSelectionChanged:o=>{var e,n;return(n=(e=a()).selectionChanged)==null?void 0:n.call(e,o)},onFocusChanged:o=>{var e,n;return(n=(e=a()).focusChanged)==null?void 0:n.call(e,o)},onScroll:o=>{var e,n;return(n=(e=a()).scroll)==null?void 0:n.call(e,o)},onCheckboxChanged:o=>{var e,n;return(n=(e=a()).checkboxChanged)==null?void 0:n.call(e,o)},onContextmenu:o=>{var e,n;return(n=(e=a()).contextmenu)==null?void 0:n.call(e,o)},onModelChanged:o=>{var e,n;return(n=(e=a()).modelChanged)==null?void 0:n.call(e,o)},onMouseClicked:o=>{var e,n;return(n=(e=a()).mouseClicked)==null?void 0:n.call(e,o)},onMouseDragging:o=>{var e,n;return(n=(e=a()).mouseDragging)==null?void 0:n.call(e,o)},onMouseDraggingEnd:o=>{var e,n;return(n=(e=a()).mouseDraggingEnd)==null?void 0:n.call(e,o)},onMouseMoved:o=>{var e,n;return(n=(e=a()).mouseMoved)==null?void 0:n.call(e,o)},onStateChanged:o=>{var e,n;return(n=(e=a()).stateChanged)==null?void 0:n.call(e,o)}},l=new c.TableScope(t,s.tableModel,new c.SimpleDomService,s.tableOptions??new c.TableOptions,p);this.tableScope=l,l.firstInit(),this.shownByProp=!1,this.applyLoading(),(g=s.tableReady)==null||g.call(s,l.getApi()),s.licenseKey&&c.LicenseManager.getInstance().setLicenseKey(s.licenseKey)}applyLoading(){var t,s;this.props.loading?((t=this.tableScope)==null||t.showLoadingOverlay(),this.shownByProp=!0):this.shownByProp&&((s=this.tableScope)==null||s.hideOverlay(),this.shownByProp=!1)}destroyTable(){var t;(t=this.tableScope)==null||t.destroy(),this.tableScope=void 0}render(){return y.jsx("div",{ref:this.ref,className:"container-div",style:{width:"100%",height:"100%",backgroundColor:"transparent",padding:"0",margin:"0"}})}}class C{constructor(i){this.Component=i}render(i,t,s,a,p,l,g){const o={cellDiv:i,rowIndex:t,columnIndex:s,areaIdent:a,areaModel:p,cellValue:l};return d.render(d.h(this.Component,o),i),()=>{d.render(null,i)}}}exports.ComponentRendererWrapper=C;exports.GuiexpertTable=m;

package/index.d.ts

@@ -1,2 +1,2 @@
-export * from './GuiexpertTable';
-export * from './ComponentRendererWrapper';
+export * from './GuiexpertTable.js';
+export * from './ComponentRendererWrapper.js';

package/index.js

@@ -1,62 +1,101 @@
-var r = Object.defineProperty;
-var m = (i, t, o) => t in i ? r(i, t, { enumerable: !0, configurable: !0, writable: !0, value: o }) : i[t] = o;
-var d = (i, t, o) => m(i, typeof t != "symbol" ? t + "" : t, o);
-import { jsx as s } from "preact/jsx-runtime";
-import { Component as u, createRef as h, render as g, h as C } from "preact";
-import { TableScope as f, SimpleDomService as b, TableOptions as x, LicenseManager as M } from "@guiexpert/table";
-class v extends u {
-  constructor(o) {
-    super(o);
-    d(this, "ref", h());
+var m = Object.defineProperty;
+var b = (r, i, t) => i in r ? m(r, i, { enumerable: !0, configurable: !0, writable: !0, value: t }) : r[i] = t;
+var c = (r, i, t) => b(r, typeof i != "symbol" ? i + "" : i, t);
+import { jsx as y } from "preact/jsx-runtime";
+import { Component as u, createRef as f, render as p, h as C } from "preact";
+import { LicenseManager as g, TableScope as S, SimpleDomService as M, TableOptions as w } from "@guiexpert/table";
+class O extends u {
+  constructor(t) {
+    super(t);
+    c(this, "ref", f());
+    c(this, "tableScope");
+    /** the overlay was shown by the loading prop: loading={false} hides only that one */
+    c(this, "shownByProp", !1);
   }
   componentDidMount() {
-    const o = this.ref.current;
-    this.initTable(o, this.props);
+    const t = this.ref.current;
+    t && this.initTable(t, this.props);
+  }
+  componentDidUpdate(t) {
+    const s = this.ref.current;
+    s && (t.tableModel !== this.props.tableModel || t.tableOptions !== this.props.tableOptions) && this.initTable(s, this.props), !!t.loading != !!this.props.loading && this.applyLoading(), this.props.licenseKey && this.props.licenseKey !== t.licenseKey && g.getInstance().setLicenseKey(this.props.licenseKey);
   }
   componentWillUnmount() {
+    this.destroyTable();
   }
-  initTable(o, e) {
-    const c = {
-      onSelectionChanged(n) {
-        e.selectionChanged && e.selectionChanged(n);
+  /**
+   * Creates the table in `ele` (a table created before is destroyed first) and calls `tableReady`.
+   * The event callbacks are always taken from the current props.
+   */
+  initTable(t, s) {
+    var d;
+    this.destroyTable();
+    const a = () => this.props, h = {
+      onSelectionChanged: (o) => {
+        var e, n;
+        return (n = (e = a()).selectionChanged) == null ? void 0 : n.call(e, o);
+      },
+      onFocusChanged: (o) => {
+        var e, n;
+        return (n = (e = a()).focusChanged) == null ? void 0 : n.call(e, o);
       },
-      onScroll(n) {
-        e.scroll && e.scroll(n);
+      onScroll: (o) => {
+        var e, n;
+        return (n = (e = a()).scroll) == null ? void 0 : n.call(e, o);
       },
-      onFocusChanged(n) {
-        e.focusChanged && e.focusChanged(n);
+      onCheckboxChanged: (o) => {
+        var e, n;
+        return (n = (e = a()).checkboxChanged) == null ? void 0 : n.call(e, o);
       },
-      onCheckboxChanged: (n) => {
-        e.checkboxChanged && e.checkboxChanged(n);
+      onContextmenu: (o) => {
+        var e, n;
+        return (n = (e = a()).contextmenu) == null ? void 0 : n.call(e, o);
       },
-      onContextmenu: (n) => {
-        e.contextmenu && e.contextmenu(n);
+      onModelChanged: (o) => {
+        var e, n;
+        return (n = (e = a()).modelChanged) == null ? void 0 : n.call(e, o);
       },
-      onModelChanged: (n) => {
-        e.modelChanged && e.modelChanged(n);
+      onMouseClicked: (o) => {
+        var e, n;
+        return (n = (e = a()).mouseClicked) == null ? void 0 : n.call(e, o);
       },
-      onMouseClicked: (n) => {
-        e.mouseClicked && e.mouseClicked(n);
+      onMouseDragging: (o) => {
+        var e, n;
+        return (n = (e = a()).mouseDragging) == null ? void 0 : n.call(e, o);
       },
-      onMouseDragging: (n) => {
-        e.mouseDragging && e.mouseDragging(n);
+      onMouseDraggingEnd: (o) => {
+        var e, n;
+        return (n = (e = a()).mouseDraggingEnd) == null ? void 0 : n.call(e, o);
       },
-      onMouseDraggingEnd: (n) => {
-        e.mouseDraggingEnd && e.mouseDraggingEnd(n);
+      onMouseMoved: (o) => {
+        var e, n;
+        return (n = (e = a()).mouseMoved) == null ? void 0 : n.call(e, o);
       },
-      onMouseMoved: (n) => {
+      onStateChanged: (o) => {
+        var e, n;
+        return (n = (e = a()).stateChanged) == null ? void 0 : n.call(e, o);
       }
-    }, a = new f(
-      o,
-      e.tableModel,
-      new b(),
-      e.tableOptions ?? new x(),
-      c
+    }, l = new S(
+      t,
+      s.tableModel,
+      new M(),
+      s.tableOptions ?? new w(),
+      h
     );
-    a.firstInit(), e.tableReady && e.tableReady(a.getApi()), e.licenseKey && M.getInstance().setLicenseKey(e.licenseKey);
+    this.tableScope = l, l.firstInit(), this.shownByProp = !1, this.applyLoading(), (d = s.tableReady) == null || d.call(s, l.getApi()), s.licenseKey && g.getInstance().setLicenseKey(s.licenseKey);
+  }
+  /** Shows or hides the loading overlay according to the `loading` prop. */
+  applyLoading() {
+    var t, s;
+    this.props.loading ? ((t = this.tableScope) == null || t.showLoadingOverlay(), this.shownByProp = !0) : this.shownByProp && ((s = this.tableScope) == null || s.hideOverlay(), this.shownByProp = !1);
+  }
+  /** Releases the table (listeners, resize observer, cell renderers). */
+  destroyTable() {
+    var t;
+    (t = this.tableScope) == null || t.destroy(), this.tableScope = void 0;
   }
   render() {
-    return /* @__PURE__ */ s(
+    return /* @__PURE__ */ y(
       "div",
       {
         ref: this.ref,
@@ -72,21 +111,21 @@ class v extends u {
     );
   }
 }
-class w {
-  constructor(t) {
-    this.Component = t;
+class k {
+  constructor(i) {
+    this.Component = i;
   }
-  render(t, o, e, c, a, n, k) {
-    const l = {
-      cellDiv: t,
-      rowIndex: o,
-      columnIndex: e,
-      areaIdent: c,
-      areaModel: a,
-      cellValue: n
+  render(i, t, s, a, h, l, d) {
+    const o = {
+      cellDiv: i,
+      rowIndex: t,
+      columnIndex: s,
+      areaIdent: a,
+      areaModel: h,
+      cellValue: l
     };
-    return g(C(this.Component, l), t), () => {
-      g(null, t);
+    return p(C(this.Component, o), i), () => {
+      p(null, i);
     };
   }
   // private mount(
@@ -110,6 +149,6 @@ class w {
   // }
 }
 export {
-  w as ComponentRendererWrapper,
-  v as GuiexpertTable
+  k as ComponentRendererWrapper,
+  O as GuiexpertTable
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@guiexpert/preact-table",
-  "version": "10.1.90",
+  "version": "10.1.92",
   "license": "MIT",
   "author": "Dr. Marc Kronberg <info@gui.expert> (https://gui.expert)",
   "repository": {
@@ -22,13 +22,16 @@
   },
   "exports": {
     ".": {
-      "import": "./index.js",
+      "import": {
+        "types": "./index.d.ts",
+        "default": "./index.js"
+      },
       "require": "./index.cjs"
     }
   },
   "dependencies": {
     "tslib": "^2.3.0",
-    "@guiexpert/table": "^1.1.90"
+    "@guiexpert/table": "^1.1.92"
   },
   "peerDependencies": {
     "preact": "^10.0.0"
@@ -40,7 +43,7 @@
     "@types/react": "^18.2.37 || ^19.0.0",
     "@types/react-dom": "^18.2.15 || ^19.0.0",
     "@types/node": "^20.11.17",
-    "vite": "6.3.4",
+    "vite": "6.4.4",
     "vite-plugin-dts": "^3.7.2",
     "vite-plugin-eslint": "^1.8.1",
     "vite-plugin-static-copy": "^0.17.0",
@@ -50,12 +53,17 @@
     "ts-node": "10.9.1",
     "tsconfig": "^7.0.0",
     "typescript": "5.2.2",
-    "@babel/core": "~7.28.6"
+    "@babel/core": "~7.28.6",
+    "vitest": "5.0.4",
+    "@vitest/browser-playwright": "5.0.4",
+    "playwright": "1.64.0"
   },
   "scripts": {
     "i": "pnpm i",
     "patch-version": "node patch.js",
     "build": "vite build",
+    "test": "vitest run",
+    "test:watch": "vitest",
     "npm-pub": "pnpm publish --no-git-checks --access public"
   }
 }