@jinaan/uikit 0.1.48 → 0.1.50

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jinaan/uikit",
-  "version": "0.1.48",
+  "version": "0.1.50",
   "description": "Reusable React and Tailwind UI components for Jinaan projects.",
   "license": "UNLICENSED",
   "type": "module",

package/src/data-table.tsx

@@ -416,6 +416,17 @@ export function DataTable<T>({
   // column steals its neighbor's width and every column shifts by one.
   const structureKey = `${selectable ? "s" : "-"}|${rowActions ? "a" : "-"}|${renderExpanded ? "e" : "-"}|${columnKey}`;
   const structureRef = useRef(structureKey);
+  // Column widths are measured from the rendered rows, so any data change
+  // (renamed key, new row with longer content) must invalidate the pinned
+  // widths — otherwise the stale widths truncate the new content.
+  const contentKey = useMemo(() => {
+    try {
+      return JSON.stringify(rows);
+    } catch {
+      return `rows:${rows.length}`;
+    }
+  }, [rows]);
+  const contentRef = useRef(contentKey);
   const pinned = columnWidths.length > 0;
 
   // Panel-scroll mode: the band stays fixed to the shell and cannot scroll
@@ -430,15 +441,7 @@ export function DataTable<T>({
   useLayoutEffect(() => {
     const table = bodyTableRef.current;
     if (!table) return;
-    if (structureRef.current !== structureKey) {
-      // Column set changed: drop the pinned widths so the body re-renders
-      // content-sized (table-auto) and the next pass measures intrinsic
-      // widths against the new structure. Without this, the effect would
-      // measure the stale colgroup's shifted layout and pin the wrong widths.
-      structureRef.current = structureKey;
-      setColumnWidths((prev) => (prev.length === 0 ? prev : []));
-      return;
-    }
+
     const measure = () => {
       const cells = table.tBodies[0]?.rows.item(0)?.cells;
       if (!cells || cells.length === 0) {
@@ -469,6 +472,23 @@ export function DataTable<T>({
         prev.length === widths.length && prev.every((w, i) => w === widths[i]) ? prev : widths,
       );
     };
+    if (structureRef.current !== structureKey || contentRef.current !== contentKey) {
+      // Column set or row content changed: drop the pinned widths so the body
+      // re-renders content-sized (table-auto) and the next pass measures
+      // intrinsic widths again. Without this, the effect would measure the
+      // stale colgroup's shifted layout and pin the wrong (truncating) widths.
+      structureRef.current = structureKey;
+      contentRef.current = contentKey;
+      if (pinned) {
+        // The widths -> [] state flip re-runs this effect (see `pinned` in the
+        // deps); measuring now would read the still-pinned layout.
+        setColumnWidths([]);
+        return;
+      }
+      // Already unpinned: no state flip would re-run the effect, so measure
+      // the content-sized layout right away.
+    }
+
     measure();
     syncBandScroll();
     if (typeof ResizeObserver === "undefined") return;
@@ -479,7 +499,7 @@ export function DataTable<T>({
     // widths (false) and again after re-pinning (true). Safe to measure in
     // the pinned state because the floor reads sizer spans — intrinsic in
     // every state — never the pinned layout itself.
-  }, [structureKey, pinned, loading, error, syncBandScroll]);
+  }, [structureKey, contentKey, pinned, loading, error, syncBandScroll]);
 
   const totalWidth = columnWidths.reduce((sum, width) => sum + width, 0);