mctable-react 1.0.1 → 1.0.3

package/README.md

@@ -1,10 +1,10 @@
 # mctable-react
 
-React wrapper for the `mctable` package.
+React wrapper for the [`mctable`](https://www.npmjs.com/package/mctable) package.
 
-Base mctable: https://mormitech.com/mctable/
+mctable home page, docs, usage and demo: https://mormitech.com/mctable/
 
-mctable-react: https://mormitech.com/mctable/react
+mctable-react home page: https://mormitech.com/mctable/react
 
 ## Install
 
@@ -21,7 +21,6 @@ Make sure the table container has an explicit size (height/width) so the table c
 ```tsx
 import * as React from "react";
 import { McTable } from "mctable-react";
-import "mctable-react/McTable.less";
 
 const columns = [
 	{ name: "id", title: "ID", type: "number" },
@@ -51,3 +50,11 @@ export function UsersTable() {
 ```
 
 You can also pass `settings`, `license`, or `onReady` if you need deeper access to the underlying `mctable` instance.
+
+
+## Changelog
+
+```
+v1.0.3
+- Aligned with `mctable` core library `v1.2.3`
+```

package/dist/index.js

@@ -42,6 +42,33 @@ function __stableSignature(value) {
     return "[unserializable]";
   }
 }
+function __getWidthOnlyChanges({
+  prevRecords,
+  prevColumns,
+  nextRecords,
+  nextColumns
+}) {
+  if (__stableSignature(prevRecords) !== __stableSignature(nextRecords)) return null;
+  if (prevColumns.length !== nextColumns.length) return null;
+  const widthChanges = [];
+  for (let index = 0; index < prevColumns.length; index++) {
+    const prevColumn = prevColumns[index];
+    const nextColumn = nextColumns[index];
+    const { width: _prevWidth, ...prevColumnWithoutWidth } = prevColumn;
+    const { width: _nextWidth, ...nextColumnWithoutWidth } = nextColumn;
+    if (__stableSignature(prevColumnWithoutWidth) !== __stableSignature(nextColumnWithoutWidth)) {
+      return null;
+    }
+    if (prevColumn.width !== nextColumn.width) {
+      widthChanges.push({
+        position: index + 1,
+        width: nextColumn.width ?? "reset"
+      });
+    }
+  }
+  if (widthChanges.length === 0) return null;
+  return widthChanges;
+}
 var __nextInstanceId = 1;
 var useIsomorphicLayoutEffect = typeof window !== "undefined" ? React.useLayoutEffect : React.useEffect;
 var McTableReact = React.forwardRef(
@@ -152,6 +179,10 @@ var McTableReact = React.forwardRef(
       if (!table) {
         return;
       }
+      const prevRecords = lastDataRef.current.records;
+      const prevColumns = lastDataRef.current.columns;
+      const nextRecords = records !== void 0 ? records : prevRecords;
+      const nextColumns = columns !== void 0 ? columns : prevColumns;
       const prevSig = lastSigRef.current;
       const nextRecordCount = records !== void 0 ? records.length : prevSig.recordCount;
       const nextColumnsCount = columns !== void 0 ? columns.length : prevSig.columnsCount;
@@ -160,10 +191,10 @@ var McTableReact = React.forwardRef(
       const columnsChanged = columns !== void 0 && (nextColumnsCount !== prevSig.columnsCount || nextColumnsSig !== prevSig.columnsSig);
       const didChange = recordCountChanged || columnsChanged;
       if (records !== void 0) {
-        lastDataRef.current.records = records;
+        lastDataRef.current.records = nextRecords;
       }
       if (columns !== void 0) {
-        lastDataRef.current.columns = columns;
+        lastDataRef.current.columns = nextColumns;
       }
       if (!didChange) {
         return;
@@ -173,12 +204,24 @@ var McTableReact = React.forwardRef(
         columnsCount: nextColumnsCount,
         columnsSig: nextColumnsSig
       };
-      table.api.setData({
-        data: {
-          records: lastDataRef.current.records,
-          columns: lastDataRef.current.columns
-        }
+      const widthOnlyChanges = __getWidthOnlyChanges({
+        prevRecords,
+        prevColumns,
+        nextRecords,
+        nextColumns
       });
+      if (widthOnlyChanges) {
+        for (const change of widthOnlyChanges) {
+          table.api.setContentColumnWidth(change);
+        }
+      } else {
+        table.api.setData({
+          data: {
+            records: lastDataRef.current.records,
+            columns: lastDataRef.current.columns
+          }
+        });
+      }
     }, [records, columns]);
     React.useEffect(() => {
       const table = tableRef.current;
@@ -190,6 +233,11 @@ var McTableReact = React.forwardRef(
     const combinedStyle = {
       width: "100%",
       height: "100%",
+      display: "flex",
+      flex: "1 1 auto",
+      minWidth: 0,
+      minHeight: 0,
+      alignItems: "stretch",
       ...style
     };
     return /* @__PURE__ */ jsx("div", { ref: containerRef, className: combinedClassName, style: combinedStyle });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mctable-react",
-  "version": "1.0.1",
+  "version": "1.0.3",
   "description": "",
   "type": "module",
   "main": "./dist/index.js",
@@ -9,13 +9,10 @@
     ".": {
       "types": "./dist/index.d.ts",
       "import": "./dist/index.js"
-    },
-    "./McTable.less": "./McTable.less"
+    }
   },
   "files": [
-    "dist",
-    "README.md",
-    "McTable.less"
+    "dist"
   ],
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
@@ -25,8 +22,32 @@
     "prepare": "npm run build",
     "prepack": "npm run build"
   },
-  "keywords": [],
-  "author": "",
+  "keywords": [
+    "canvas",
+    "table",
+    "grid",
+    "html5",
+    "excel",
+    "spreadsheet",
+    "editable",
+    "table editor",
+    "writeback",
+    "validation",
+    "performance",
+    "customizable",
+    "change tracking",
+    "Power BI",
+    "typescript",
+    "javascript",
+    "API",
+    "fetch more",
+    "dropdown",
+    "undo",
+    "redo",
+    "filter",
+    "filtering"
+  ],
+  "author": "Mormitech",
   "license": "SEE LICENSE.md",
   "peerDependencies": {
     "react": "^18.0.0",
@@ -44,6 +65,6 @@
     "vite": "^5.4.12"
   },
   "dependencies": {
-    "mctable": "^1.2.2"
+    "mctable": "^1.2.3"
   }
 }