@jinaan/uikit 0.1.47 → 0.1.49

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jinaan/uikit",
-  "version": "0.1.47",
+  "version": "0.1.49",
   "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,12 +441,13 @@ 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.
+    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;
       setColumnWidths((prev) => (prev.length === 0 ? prev : []));
       return;
     }
@@ -479,7 +491,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);
 
@@ -788,7 +800,7 @@ export function DataTable<T>({
                     />
                   </th>
                 )}
-                {renderExpanded && <th className="h-(--table-header-h) w-11 px-(--table-pad-x)" />}
+                {renderExpanded && <th className="h-(--table-header-h) w-9 px-1.5" />}
                 {visibleColumns.map((c) => (
                   <th
                     key={c.id}
@@ -939,7 +951,7 @@ export function DataTable<T>({
                             </TableCell>
                           )}
                           {renderExpanded && (
-                            <TableCell className="w-11" onClick={(e) => e.stopPropagation()}>
+                            <TableCell className="w-9 px-1.5" onClick={(e) => e.stopPropagation()}>
                               <Button
                                 type="button"
                                 variant="ghost"