@simple-table/react 3.0.0-beta.10 → 3.0.0-beta.12

package/README.md

@@ -0,0 +1,36 @@
+# Simple Table for React
+
+[![npm version](https://img.shields.io/npm/v/@simple-table/react.svg)](https://www.npmjs.com/package/@simple-table/react)
+[![npm downloads](https://img.shields.io/npm/dm/@simple-table/react.svg)](https://www.npmjs.com/package/@simple-table/react)
+[![License](https://img.shields.io/npm/l/@simple-table/react.svg)](LICENSE)
+
+React adapter for [Simple Table](https://www.simple-table.com/) — a lightweight, high-performance data grid with full React component support for all renderers.
+
+## Installation
+
+```bash
+npm install @simple-table/react
+```
+
+**Peer dependencies:** `react >=18.0.0`, `react-dom >=18.0.0`
+
+## Features
+
+- Use React components for cell renderers, header renderers, footer renderers, and more
+- Access the full imperative `TableAPI` via a ref for sorting, filtering, pagination, export, and more
+- All types exported directly — no need to install `simple-table-core` separately
+
+## Documentation
+
+- **Quick Start**: [simple-table.com/docs/quick-start](https://www.simple-table.com/docs/quick-start)
+- **Full Documentation**: [simple-table.com/docs/installation](https://www.simple-table.com/docs/installation)
+- **Examples**: [simple-table.com/examples/crm](https://www.simple-table.com/examples/crm)
+
+## Community & Support
+
+- **Discord**: [Join us on Discord](https://discord.gg/RvKHCfg3PC)
+- **GitHub**: [Report bugs or suggest features](https://github.com/petera2c/simple-table/issues)
+
+## License
+
+Dual licensed — MIT for individuals & startups, proprietary Pro tier for revenue-generating companies. See [LICENSE](LICENSE) and [EULA.txt](../../EULA.txt) for details.

package/dist/cjs/index.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),r=require("react"),t=require("simple-table-core"),n=require("react-dom/client"),o=require("react-dom");function d(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function c(e,r){var t={};for(var n in e)Object.prototype.hasOwnProperty.call(e,n)&&r.indexOf(n)<0&&(t[n]=e[n]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var o=0;for(n=Object.getOwnPropertySymbols(e);o<n.length;o++)r.indexOf(n[o])<0&&Object.prototype.propertyIsEnumerable.call(e,n[o])&&(t[n[o]]=e[n[o]])}return t}function i(r){return t=>{const d=document.createElement("div"),c=n.createRoot(d);return o.flushSync(()=>{c.render(e.jsx(r,Object.assign({},t)))}),d}}function a(r){const t=document.createElement("div"),d=n.createRoot(t);return o.flushSync(()=>{d.render(e.jsx(e.Fragment,{children:r}))}),t}function l(e){return"function"==typeof e}function u(e){const{cellRenderer:r,headerRenderer:t,children:n,nestedTable:o}=e,d=c(e,["cellRenderer","headerRenderer","children","nestedTable"]),a=Object.assign({},d);if(r&&(a.cellRenderer=i(r)),t&&(a.headerRenderer=i(t)),n&&(a.children=n.map(u)),o){const e=Object.assign(Object.assign({},o),{rows:[]});a.nestedTable=s(e)}return a}function s(e){const{defaultHeaders:r,footerRenderer:t,emptyStateRenderer:n,errorStateRenderer:o,loadingStateRenderer:d,tableEmptyStateRenderer:s,headerDropdown:f,columnEditorConfig:p,icons:R}=e,m=c(e,["defaultHeaders","footerRenderer","emptyStateRenderer","errorStateRenderer","loadingStateRenderer","tableEmptyStateRenderer","headerDropdown","columnEditorConfig","icons"]),b=Object.assign(Object.assign({},m),{defaultHeaders:r.map(u)});if(void 0!==t&&(b.footerRenderer=i(t)),void 0!==n)if(l(n))b.emptyStateRenderer=i(n);else{const e=n;b.emptyStateRenderer=()=>a(e)}if(void 0!==o)if(l(o))b.errorStateRenderer=i(o);else{const e=o;b.errorStateRenderer=()=>a(e)}if(void 0!==d)if(l(d))b.loadingStateRenderer=i(d);else{const e=d;b.loadingStateRenderer=()=>a(e)}return void 0!==s&&(b.tableEmptyStateRenderer=null===s?null:a(s)),void 0!==f&&(b.headerDropdown=i(f)),void 0!==p&&(b.columnEditorConfig=function(e){const{rowRenderer:r}=e,t=c(e,["rowRenderer"]);return Object.assign(Object.assign({},t),r?{rowRenderer:i(r)}:{})}(p)),void 0!==R&&(b.icons=function(e){const r={};for(const[t,n]of Object.entries(e))null!=n&&(r[t]="string"==typeof n||n instanceof HTMLElement||n instanceof SVGElement?n:a(n));return r}(R)),b}"function"==typeof SuppressedError&&SuppressedError;const f=d(r).default.forwardRef(function(n,o){const d=r.useRef(null),c=r.useRef(null),i=n;return r.useEffect(()=>{if(!d.current)return;const e=new t.SimpleTableVanilla(d.current,s(i));if(e.mount(),c.current=e,o){const r=e.getAPI();"function"==typeof o?o(r):o.current=r}return()=>{e.destroy(),c.current=null,o&&"function"!=typeof o&&(o.current=null)}},[]),r.useEffect(()=>{var e;null===(e=c.current)||void 0===e||e.update(s(i))}),e.jsx("div",{ref:d})});f.displayName="SimpleTable",exports.SimpleTable=f;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),r=require("react"),t=require("simple-table-core"),n=require("react-dom/server");function o(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function i(e,r){var t={};for(var n in e)Object.prototype.hasOwnProperty.call(e,n)&&r.indexOf(n)<0&&(t[n]=e[n]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var o=0;for(n=Object.getOwnPropertySymbols(e);o<n.length;o++)r.indexOf(n[o])<0&&Object.prototype.propertyIsEnumerable.call(e,n[o])&&(t[n[o]]=e[n[o]])}return t}function d(r){return t=>{const o=document.createElement("div");return o.innerHTML=n.renderToStaticMarkup(e.jsx(r,Object.assign({},t))),o}}function a(r){const t=document.createElement("div");return t.innerHTML=n.renderToStaticMarkup(e.jsx(e.Fragment,{children:r})),t}function c(r){return n.renderToStaticMarkup(e.jsx(e.Fragment,{children:r}))}function u(e){return"function"==typeof e}function l(e){const{cellRenderer:r,headerRenderer:t,children:n,nestedTable:o}=e,a=i(e,["cellRenderer","headerRenderer","children","nestedTable"]),c=Object.assign({},a);if(r&&(c.cellRenderer=d(r)),t&&(c.headerRenderer=d(t)),n&&(c.children=n.map(l)),o){const e=Object.assign(Object.assign({},o),{rows:[]});c.nestedTable=s(e)}return c}function s(e){const{defaultHeaders:r,footerRenderer:t,emptyStateRenderer:n,errorStateRenderer:o,loadingStateRenderer:s,tableEmptyStateRenderer:f,headerDropdown:p,columnEditorConfig:m,icons:R}=e,b=i(e,["defaultHeaders","footerRenderer","emptyStateRenderer","errorStateRenderer","loadingStateRenderer","tableEmptyStateRenderer","headerDropdown","columnEditorConfig","icons"]),S=Object.assign(Object.assign({},b),{defaultHeaders:r.map(l)});if(void 0!==t&&(S.footerRenderer=d(t)),void 0!==n)if(u(n))S.emptyStateRenderer=d(n);else{const e=n;S.emptyStateRenderer=()=>a(e)}if(void 0!==o)if(u(o))S.errorStateRenderer=d(o);else{const e=o;S.errorStateRenderer=()=>a(e)}if(void 0!==s)if(u(s))S.loadingStateRenderer=d(s);else{const e=s;S.loadingStateRenderer=()=>a(e)}return void 0!==f&&(S.tableEmptyStateRenderer=null===f?null:a(f)),void 0!==p&&(S.headerDropdown=d(p)),void 0!==m&&(S.columnEditorConfig=function(e){const{rowRenderer:r}=e,t=i(e,["rowRenderer"]);return Object.assign(Object.assign({},t),r?{rowRenderer:d(r)}:{})}(m)),void 0!==R&&(S.icons=function(e){const r={};for(const[t,n]of Object.entries(e))null!=n&&(r[t]="string"==typeof n||n instanceof HTMLElement||n instanceof SVGElement?n:c(n));return r}(R)),S}"function"==typeof SuppressedError&&SuppressedError;const f=o(r).default.forwardRef(function(n,o){const i=r.useRef(null),d=r.useRef(null),a=n;return r.useEffect(()=>{if(!i.current)return;const e=new t.SimpleTableVanilla(i.current,s(a));if(e.mount(),d.current=e,o){const r=e.getAPI();"function"==typeof o?o(r):o.current=r}return()=>{e.destroy(),d.current=null,o&&"function"!=typeof o&&(o.current=null)}},[]),r.useEffect(()=>{var e;null===(e=d.current)||void 0===e||e.update(s(a))}),e.jsx("div",{ref:i})});f.displayName="SimpleTable",exports.SimpleTable=f;
 //# sourceMappingURL=index.js.map

package/dist/cjs/react/src/utils/wrapReactRenderer.d.ts

@@ -3,20 +3,23 @@ import React from "react";
  * Wraps a React component into a function that returns an HTMLElement, matching
  * the vanilla renderer contract expected by simple-table-core.
  *
- * Uses flushSync to ensure the React tree is fully painted into the container
- * before it is returned to the vanilla rendering pipeline.
+ * Uses renderToStaticMarkup for synchronous rendering that is safe to call from
+ * any context (including inside useEffect) without triggering React 18's
+ * "flushSync was called from inside a lifecycle method" warning.
  */
 export declare function wrapReactRenderer<P extends object>(Component: React.ComponentType<P>): (props: P) => HTMLElement;
 /**
  * Renders a static ReactNode into an HTMLElement.
- * Used for static ReactNode props (tableEmptyStateRenderer) and icon props where
- * the vanilla table accepts string | HTMLElement | SVGSVGElement.
- *
- * Note: react-dom/server (renderToStaticMarkup) is intentionally NOT used here.
- * A static top-level import of react-dom/server causes Turbopack to throw during
- * client bundle evaluation, making the entire @simple-table/react module fail and
- * SimpleTable export as undefined.
+ * Used for props like tableEmptyStateRenderer that are not called with arguments.
  */
 export declare function wrapReactNode(node: React.ReactNode): HTMLElement;
+/**
+ * Converts a ReactNode to an HTML string using server-side static rendering.
+ * Used for icon props where the vanilla table expects a string | HTMLElement | SVGSVGElement.
+ * Uses renderToStaticMarkup so it works synchronously from any context — including
+ * inside a useEffect — unlike createRoot + flushSync which silently produces empty
+ * output when called during React 18's passive effects phase.
+ */
+export declare function reactNodeToHtmlString(node: React.ReactNode): string;
 /** Returns true if the value is a React component (function or class). */
 export declare function isReactComponent(value: unknown): value is React.ComponentType<any>;

package/dist/index.es.js

@@ -1,2 +1,2 @@
-import{jsx as e,Fragment as r}from"react/jsx-runtime";import t,{useRef as n,useEffect as o}from"react";import{SimpleTableVanilla as d}from"simple-table-core";import{createRoot as i}from"react-dom/client";import{flushSync as c}from"react-dom";function a(e,r){var t={};for(var n in e)Object.prototype.hasOwnProperty.call(e,n)&&r.indexOf(n)<0&&(t[n]=e[n]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var o=0;for(n=Object.getOwnPropertySymbols(e);o<n.length;o++)r.indexOf(n[o])<0&&Object.prototype.propertyIsEnumerable.call(e,n[o])&&(t[n[o]]=e[n[o]])}return t}function l(r){return t=>{const n=document.createElement("div"),o=i(n);return c(()=>{o.render(e(r,Object.assign({},t)))}),n}}function s(t){const n=document.createElement("div"),o=i(n);return c(()=>{o.render(e(r,{children:t}))}),n}function u(e){return"function"==typeof e}function f(e){const{cellRenderer:r,headerRenderer:t,children:n,nestedTable:o}=e,d=a(e,["cellRenderer","headerRenderer","children","nestedTable"]),i=Object.assign({},d);if(r&&(i.cellRenderer=l(r)),t&&(i.headerRenderer=l(t)),n&&(i.children=n.map(f)),o){const e=Object.assign(Object.assign({},o),{rows:[]});i.nestedTable=p(e)}return i}function p(e){const{defaultHeaders:r,footerRenderer:t,emptyStateRenderer:n,errorStateRenderer:o,loadingStateRenderer:d,tableEmptyStateRenderer:i,headerDropdown:c,columnEditorConfig:p,icons:m}=e,R=a(e,["defaultHeaders","footerRenderer","emptyStateRenderer","errorStateRenderer","loadingStateRenderer","tableEmptyStateRenderer","headerDropdown","columnEditorConfig","icons"]),b=Object.assign(Object.assign({},R),{defaultHeaders:r.map(f)});if(void 0!==t&&(b.footerRenderer=l(t)),void 0!==n)if(u(n))b.emptyStateRenderer=l(n);else{const e=n;b.emptyStateRenderer=()=>s(e)}if(void 0!==o)if(u(o))b.errorStateRenderer=l(o);else{const e=o;b.errorStateRenderer=()=>s(e)}if(void 0!==d)if(u(d))b.loadingStateRenderer=l(d);else{const e=d;b.loadingStateRenderer=()=>s(e)}return void 0!==i&&(b.tableEmptyStateRenderer=null===i?null:s(i)),void 0!==c&&(b.headerDropdown=l(c)),void 0!==p&&(b.columnEditorConfig=function(e){const{rowRenderer:r}=e,t=a(e,["rowRenderer"]);return Object.assign(Object.assign({},t),r?{rowRenderer:l(r)}:{})}(p)),void 0!==m&&(b.icons=function(e){const r={};for(const[t,n]of Object.entries(e))null!=n&&(r[t]="string"==typeof n||n instanceof HTMLElement||n instanceof SVGElement?n:s(n));return r}(m)),b}"function"==typeof SuppressedError&&SuppressedError;const m=t.forwardRef(function(r,t){const i=n(null),c=n(null),a=r;return o(()=>{if(!i.current)return;const e=new d(i.current,p(a));if(e.mount(),c.current=e,t){const r=e.getAPI();"function"==typeof t?t(r):t.current=r}return()=>{e.destroy(),c.current=null,t&&"function"!=typeof t&&(t.current=null)}},[]),o(()=>{var e;null===(e=c.current)||void 0===e||e.update(p(a))}),e("div",{ref:i})});m.displayName="SimpleTable";export{m as SimpleTable};
+import{jsx as e,Fragment as r}from"react/jsx-runtime";import n,{useRef as t,useEffect as o}from"react";import{SimpleTableVanilla as d}from"simple-table-core";import{renderToStaticMarkup as i}from"react-dom/server";function c(e,r){var n={};for(var t in e)Object.prototype.hasOwnProperty.call(e,t)&&r.indexOf(t)<0&&(n[t]=e[t]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var o=0;for(t=Object.getOwnPropertySymbols(e);o<t.length;o++)r.indexOf(t[o])<0&&Object.prototype.propertyIsEnumerable.call(e,t[o])&&(n[t[o]]=e[t[o]])}return n}function a(r){return n=>{const t=document.createElement("div");return t.innerHTML=i(e(r,Object.assign({},n))),t}}function l(n){const t=document.createElement("div");return t.innerHTML=i(e(r,{children:n})),t}function s(n){return i(e(r,{children:n}))}function u(e){return"function"==typeof e}function f(e){const{cellRenderer:r,headerRenderer:n,children:t,nestedTable:o}=e,d=c(e,["cellRenderer","headerRenderer","children","nestedTable"]),i=Object.assign({},d);if(r&&(i.cellRenderer=a(r)),n&&(i.headerRenderer=a(n)),t&&(i.children=t.map(f)),o){const e=Object.assign(Object.assign({},o),{rows:[]});i.nestedTable=p(e)}return i}function p(e){const{defaultHeaders:r,footerRenderer:n,emptyStateRenderer:t,errorStateRenderer:o,loadingStateRenderer:d,tableEmptyStateRenderer:i,headerDropdown:p,columnEditorConfig:m,icons:R}=e,b=c(e,["defaultHeaders","footerRenderer","emptyStateRenderer","errorStateRenderer","loadingStateRenderer","tableEmptyStateRenderer","headerDropdown","columnEditorConfig","icons"]),y=Object.assign(Object.assign({},b),{defaultHeaders:r.map(f)});if(void 0!==n&&(y.footerRenderer=a(n)),void 0!==t)if(u(t))y.emptyStateRenderer=a(t);else{const e=t;y.emptyStateRenderer=()=>l(e)}if(void 0!==o)if(u(o))y.errorStateRenderer=a(o);else{const e=o;y.errorStateRenderer=()=>l(e)}if(void 0!==d)if(u(d))y.loadingStateRenderer=a(d);else{const e=d;y.loadingStateRenderer=()=>l(e)}return void 0!==i&&(y.tableEmptyStateRenderer=null===i?null:l(i)),void 0!==p&&(y.headerDropdown=a(p)),void 0!==m&&(y.columnEditorConfig=function(e){const{rowRenderer:r}=e,n=c(e,["rowRenderer"]);return Object.assign(Object.assign({},n),r?{rowRenderer:a(r)}:{})}(m)),void 0!==R&&(y.icons=function(e){const r={};for(const[n,t]of Object.entries(e))null!=t&&(r[n]="string"==typeof t||t instanceof HTMLElement||t instanceof SVGElement?t:s(t));return r}(R)),y}"function"==typeof SuppressedError&&SuppressedError;const m=n.forwardRef(function(r,n){const i=t(null),c=t(null),a=r;return o(()=>{if(!i.current)return;const e=new d(i.current,p(a));if(e.mount(),c.current=e,n){const r=e.getAPI();"function"==typeof n?n(r):n.current=r}return()=>{e.destroy(),c.current=null,n&&"function"!=typeof n&&(n.current=null)}},[]),o(()=>{var e;null===(e=c.current)||void 0===e||e.update(p(a))}),e("div",{ref:i})});m.displayName="SimpleTable";export{m as SimpleTable};
 //# sourceMappingURL=index.es.js.map

package/dist/react/src/utils/wrapReactRenderer.d.ts

@@ -3,20 +3,23 @@ import React from "react";
  * Wraps a React component into a function that returns an HTMLElement, matching
  * the vanilla renderer contract expected by simple-table-core.
  *
- * Uses flushSync to ensure the React tree is fully painted into the container
- * before it is returned to the vanilla rendering pipeline.
+ * Uses renderToStaticMarkup for synchronous rendering that is safe to call from
+ * any context (including inside useEffect) without triggering React 18's
+ * "flushSync was called from inside a lifecycle method" warning.
  */
 export declare function wrapReactRenderer<P extends object>(Component: React.ComponentType<P>): (props: P) => HTMLElement;
 /**
  * Renders a static ReactNode into an HTMLElement.
- * Used for static ReactNode props (tableEmptyStateRenderer) and icon props where
- * the vanilla table accepts string | HTMLElement | SVGSVGElement.
- *
- * Note: react-dom/server (renderToStaticMarkup) is intentionally NOT used here.
- * A static top-level import of react-dom/server causes Turbopack to throw during
- * client bundle evaluation, making the entire @simple-table/react module fail and
- * SimpleTable export as undefined.
+ * Used for props like tableEmptyStateRenderer that are not called with arguments.
  */
 export declare function wrapReactNode(node: React.ReactNode): HTMLElement;
+/**
+ * Converts a ReactNode to an HTML string using server-side static rendering.
+ * Used for icon props where the vanilla table expects a string | HTMLElement | SVGSVGElement.
+ * Uses renderToStaticMarkup so it works synchronously from any context — including
+ * inside a useEffect — unlike createRoot + flushSync which silently produces empty
+ * output when called during React 18's passive effects phase.
+ */
+export declare function reactNodeToHtmlString(node: React.ReactNode): string;
 /** Returns true if the value is a React component (function or class). */
 export declare function isReactComponent(value: unknown): value is React.ComponentType<any>;

package/package.json

@@ -1,15 +1,15 @@
 {
   "name": "@simple-table/react",
-  "version": "3.0.0-beta.10",
+  "version": "3.0.0-beta.12",
   "main": "dist/cjs/index.js",
   "module": "dist/index.es.js",
-  "types": "dist/index.d.ts",
+  "types": "dist/types/index.d.ts",
   "sideEffects": false,
   "exports": {
     ".": {
       "import": "./dist/index.es.js",
       "require": "./dist/cjs/index.js",
-      "types": "./dist/index.d.ts"
+      "types": "./dist/types/index.d.ts"
     }
   },
   "license": "MIT",
@@ -25,7 +25,7 @@
     "react-dom": ">=18.0.0"
   },
   "dependencies": {
-    "simple-table-core": "3.0.0-beta.10"
+    "simple-table-core": "3.0.0-beta.12"
   },
   "devDependencies": {
     "@rollup/plugin-alias": "^4.0.4",

package/dist/cjs/package.json

@@ -1,3 +0,0 @@
-{
-  "type": "commonjs"
-}