mctable-react 1.0.0

package/README.md

@@ -0,0 +1,51 @@
+# mctable-react
+
+React wrapper for the `mctable` package.
+
+Base mctable: https://mormitech.com/mctable/
+
+## Install
+
+```sh
+npm install mctable-react
+```
+
+`react` and `react-dom` are peer dependencies in your app.
+
+## Basic usage
+
+Make sure the table container has an explicit size (height/width) so the table can render.
+
+```tsx
+import * as React from "react";
+import { McTable } from "mctable-react";
+import "mctable-react/McTable.less";
+
+const columns = [
+	{ name: "id", title: "ID", type: "number" },
+	{ name: "name", title: "Name", type: "text" },
+	{ name: "active", title: "Active", type: "boolean" },
+	{ name: "created", title: "Created", type: "date" },
+];
+
+const records = [
+	{ id: 1, name: "Ada", active: true, created: "2026-02-24" },
+	{ id: 2, name: "Linus", active: false, created: "2026-02-23" },
+];
+
+const settings = {
+	formatting: { displayDateFormat: "yyyy-MM-dd" },
+	paging: { pageSize: 25 },
+	scroll: { transition: "smooth" },
+};
+
+export function UsersTable() {
+	return (
+		<div style={{ height: 400 }}>
+			<McTable columns={columns} records={records} settings={settings} />
+		</div>
+	);
+}
+```
+
+You can also pass `settings`, `license`, or `onReady` if you need deeper access to the underlying `mctable` instance.

package/dist/index.d.ts

@@ -0,0 +1,20 @@
+import * as React from 'react';
+import { MctColumn, MctInitSettings, MctLicense, McTable, MctApi } from 'mctable';
+export { McTableCtor, MctApi, MctColumn, MctColumnData, MctInitSettings, MctLicense, MctRow, MctScrollPosition } from 'mctable';
+
+type McTableReactHandle = {
+    table: McTable | null;
+    api: MctApi | null;
+};
+type McTableReactProps = {
+    records?: any[];
+    columns?: MctColumn[];
+    settings?: MctInitSettings;
+    license?: MctLicense;
+    onReady?: (table: McTable) => void;
+    className?: string;
+    style?: React.CSSProperties;
+};
+declare const McTableReact: React.ForwardRefExoticComponent<McTableReactProps & React.RefAttributes<McTableReactHandle>>;
+
+export { McTableReact as McTable, McTableReact, type McTableReactHandle, type McTableReactProps };

package/dist/index.js

@@ -0,0 +1,170 @@
+// src/McTable.tsx
+import * as React from "react";
+import { McTable } from "mctable";
+import { jsx } from "react/jsx-runtime";
+var __sigIds = /* @__PURE__ */ new WeakMap();
+var __nextSigId = 1;
+function __getSigId(obj) {
+  const existing = __sigIds.get(obj);
+  if (existing !== void 0) return existing;
+  const next = __nextSigId++;
+  __sigIds.set(obj, next);
+  return next;
+}
+function __isPlainObject(value) {
+  if (!value || typeof value !== "object") return false;
+  const proto = Object.getPrototypeOf(value);
+  return proto === Object.prototype || proto === null;
+}
+function __signatureValue(value) {
+  if (value === null) return null;
+  const valueType = typeof value;
+  if (valueType === "string" || valueType === "number" || valueType === "boolean") return value;
+  if (valueType === "undefined") return ["u"];
+  if (valueType === "bigint") return ["bi", String(value)];
+  if (valueType === "symbol") return ["sy", String(value)];
+  if (valueType === "function") return ["fn", __getSigId(value)];
+  if (Array.isArray(value)) return value.map(__signatureValue);
+  if (value instanceof Date) return ["d", value.toISOString()];
+  if (!__isPlainObject(value)) {
+    return ["o", __getSigId(value), Object.prototype.toString.call(value)];
+  }
+  const obj = value;
+  const keys = Object.keys(obj).sort();
+  const out = {};
+  for (const key of keys) out[key] = __signatureValue(obj[key]);
+  return out;
+}
+function __stableSignature(value) {
+  try {
+    return JSON.stringify(__signatureValue(value));
+  } catch {
+    return "[unserializable]";
+  }
+}
+var __nextInstanceId = 1;
+var useIsomorphicLayoutEffect = typeof window !== "undefined" ? React.useLayoutEffect : React.useEffect;
+var McTableReact = React.forwardRef(
+  ({
+    records,
+    columns,
+    settings,
+    license,
+    onReady,
+    className,
+    style
+  }, ref) => {
+    const containerRef = React.useRef(null);
+    const tableRef = React.useRef(null);
+    const instanceIdRef = React.useRef(null);
+    const lastDataRef = React.useRef({
+      records: records ?? [],
+      columns: columns ?? []
+    });
+    const lastSigRef = React.useRef({
+      recordCount: (records ?? []).length,
+      columnsCount: (columns ?? []).length,
+      columnsSig: __stableSignature(columns ?? [])
+    });
+    const [readyTick, setReadyTick] = React.useState(0);
+    React.useImperativeHandle(
+      ref,
+      () => ({
+        table: tableRef.current,
+        api: tableRef.current?.api ?? null
+      }),
+      [readyTick]
+    );
+    useIsomorphicLayoutEffect(() => {
+      if (typeof window === "undefined") return;
+      if (tableRef.current) {
+        return;
+      }
+      const container = containerRef.current;
+      if (!container) {
+        return;
+      }
+      const instanceId = __nextInstanceId++;
+      instanceIdRef.current = instanceId;
+      const initialRecords = records ?? lastDataRef.current.records;
+      const initialColumns = columns ?? lastDataRef.current.columns;
+      const instance = new McTable({
+        container,
+        records: initialRecords,
+        columns: initialColumns,
+        settings,
+        license
+      });
+      tableRef.current = instance;
+      setReadyTick((x) => x + 1);
+      onReady?.(instance);
+      return () => {
+        const current = tableRef.current;
+        const currentInstanceId = instanceIdRef.current;
+        tableRef.current = null;
+        instanceIdRef.current = null;
+        setReadyTick((x) => x + 1);
+        try {
+          const anyTable = current;
+          if (typeof anyTable?.destroy === "function") anyTable.destroy();
+          else if (typeof anyTable?.dispose === "function") anyTable.dispose();
+        } catch {
+        }
+        if (containerRef.current) {
+          containerRef.current.innerHTML = "";
+        }
+      };
+    }, []);
+    React.useEffect(() => {
+      const table = tableRef.current;
+      if (!table) {
+        return;
+      }
+      const prevSig = lastSigRef.current;
+      const nextRecordCount = records !== void 0 ? records.length : prevSig.recordCount;
+      const nextColumnsCount = columns !== void 0 ? columns.length : prevSig.columnsCount;
+      const nextColumnsSig = columns !== void 0 ? __stableSignature(columns) : prevSig.columnsSig;
+      const recordCountChanged = records !== void 0 && nextRecordCount !== prevSig.recordCount;
+      const columnsChanged = columns !== void 0 && (nextColumnsCount !== prevSig.columnsCount || nextColumnsSig !== prevSig.columnsSig);
+      const didChange = recordCountChanged || columnsChanged;
+      if (records !== void 0) {
+        lastDataRef.current.records = records;
+      }
+      if (columns !== void 0) {
+        lastDataRef.current.columns = columns;
+      }
+      if (!didChange) {
+        return;
+      }
+      lastSigRef.current = {
+        recordCount: nextRecordCount,
+        columnsCount: nextColumnsCount,
+        columnsSig: nextColumnsSig
+      };
+      table.api.setData({
+        data: {
+          records: lastDataRef.current.records,
+          columns: lastDataRef.current.columns
+        }
+      });
+    }, [records, columns]);
+    React.useEffect(() => {
+      const table = tableRef.current;
+      if (!table) return;
+      if (!settings) return;
+      table.api.updateSettings(settings);
+    }, [settings]);
+    const combinedClassName = ["mctable-react", className].filter(Boolean).join(" ");
+    const combinedStyle = {
+      width: "100%",
+      height: "100%",
+      ...style
+    };
+    return /* @__PURE__ */ jsx("div", { ref: containerRef, className: combinedClassName, style: combinedStyle });
+  }
+);
+McTableReact.displayName = "McTable";
+export {
+  McTableReact as McTable,
+  McTableReact
+};

package/package.json

@@ -0,0 +1,49 @@
+{
+  "name": "mctable-react",
+  "version": "1.0.0",
+  "description": "",
+  "type": "module",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./McTable.less": "./McTable.less"
+  },
+  "files": [
+    "dist",
+    "README.md",
+    "McTable.less"
+  ],
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "build": "tsup src/index.ts --format esm --dts --clean --out-dir dist --external react --external react-dom --external react/jsx-runtime --external react/jsx-dev-runtime",
+    "start": "vite --open",
+    "release:npm": "npm pack --pack-destination .",
+    "prepare": "npm run build",
+    "prepack": "npm run build"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "peerDependencies": {
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.3.5",
+    "@types/react-dom": "^18.3.0",
+    "@vitejs/plugin-react": "^4.3.4",
+    "less": "^4.2.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "tsup": "^8.5.1",
+    "typescript": "^5.9.3",
+    "vite": "^5.4.12"
+  },
+  "dependencies": {
+    "mctable": "^1.2.0"
+  }
+}