@jinaan/uikit 0.1.35 → 0.1.36

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jinaan/uikit",
-  "version": "0.1.35",
+  "version": "0.1.36",
   "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={{