@jinaan/uikit 0.1.35 → 0.1.37

package/package.json

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

package/src/data-table.tsx

@@ -353,6 +353,7 @@ export function DataTable<T>({
   // measuring the rendered body columns and pinning the band colgroup to the
   // same pixel widths; both tables share the surface's horizontal scroller.
   const bodyTableRef = useRef<HTMLTableElement | null>(null);
+  const bandTableRef = useRef<HTMLTableElement | null>(null);
   const [columnWidths, setColumnWidths] = useState<number[]>([]);
   // Deps must be primitives: visibleColumns is a fresh array every render and
   // would re-run this effect (and its setState) in a loop.
@@ -363,11 +364,20 @@ export function DataTable<T>({
     if (!table) return;
     const measure = () => {
       const cells = table.tBodies[0]?.rows.item(0)?.cells;
+      // The band may be squeezed narrower than its own sort-button content by
+      // the body-measured widths; scrollWidth reports the true minimum, so it
+      // floors each column and stops titles from overflowing their neighbors.
+      const bandCells = bandTableRef.current?.querySelectorAll("thead th");
       if (!cells || cells.length === 0) {
         setColumnWidths((prev) => (prev.length === 0 ? prev : []));
         return;
       }
-      const widths = Array.from(cells, (cell) => Math.round(cell.getBoundingClientRect().width));
+      const widths = Array.from(cells, (cell, i) =>
+        Math.max(
+          Math.round(cell.getBoundingClientRect().width),
+          Math.round(bandCells?.item(i)?.scrollWidth ?? 0),
+        ),
+      );
       // Bail out when nothing changed: a new array would re-render, and the
       // re-render would re-run this effect, looping forever.
       setColumnWidths((prev) =>
@@ -653,6 +663,7 @@ export function DataTable<T>({
           // sr-only thead); widths are pinned to the measured body columns and
           // hidden until the first measurement lands so columns never flash.
           <table
+            ref={bandTableRef}
             role="presentation"
             className="w-full table-fixed border-collapse"
             style={{
@@ -661,9 +672,11 @@ 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>
@@ -752,7 +765,23 @@ export function DataTable<T>({
                 action={empty?.action}
               />
             ) : (
-              <table ref={bodyTableRef} className="w-full table-auto border-collapse text-left">
+              <table
+                ref={bodyTableRef}
+                className={cn(
+                  "w-full border-collapse text-left",
+                  columnWidths.length > 0 ? "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. */}
                 <thead className="sr-only">
                   <tr>