@jinaan/uikit 0.1.37 → 0.1.39

package/package.json

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

package/src/data-table.tsx

@@ -372,6 +372,9 @@ export function DataTable<T>({
         setColumnWidths((prev) => (prev.length === 0 ? prev : []));
         return;
       }
+      // Widths cover every rendered column — including the selection checkbox
+      // and row-actions cells — in order, so one <col> per entry maps 1:1 in
+      // both colgroups. Never add extra <col> elements alongside these.
       const widths = Array.from(cells, (cell, i) =>
         Math.max(
           Math.round(cell.getBoundingClientRect().width),
@@ -672,11 +675,9 @@ export function DataTable<T>({
             }}
           >
             <colgroup>
-              {selectable && <col key="selectable" style={{ width: "2.75rem" }} />}
               {columnWidths.map((width, i) => (
                 <col key={i} style={{ width }} />
               ))}
-              {rowActions && <col key="actions" style={{ width: "11rem" }} />}
             </colgroup>
             <thead>
               <tr>
@@ -768,18 +769,19 @@ export function DataTable<T>({
               <table
                 ref={bodyTableRef}
                 className={cn(
-                  "w-full border-collapse text-left",
-                  columnWidths.length > 0 ? "table-fixed" : "table-auto",
+                  "border-collapse text-left",
+                  // Unmeasured: content-sized so intrinsic column widths can be
+                  // measured (w-full would squeeze columns into the container).
+                  // Measured: pinned to the band's colgroup pixel widths.
+                  columnWidths.length > 0 ? "w-full table-fixed" : "table-auto",
                 )}
                 style={{ width: totalWidth > 0 ? totalWidth : undefined }}
               >
                 {columnWidths.length > 0 && (
                   <colgroup>
-                    {selectable && <col key="selectable" style={{ width: "2.75rem" }} />}
                     {columnWidths.map((width, i) => (
                       <col key={i} style={{ width }} />
                     ))}
-                    {rowActions && <col key="actions" style={{ width: "11rem" }} />}
                   </colgroup>
                 )}
                 {/* Semantic headers for assistive tech; the visible band is presentational. */}