@jinaan/uikit 0.1.34 → 0.1.36

package/package.json

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

package/src/data-table.tsx

@@ -1,5 +1,7 @@
 import {
   CaretDown,
+  CaretLeft,
+  CaretRight,
   CaretUp,
   CaretUpDown,
   Columns as ColumnsIcon,
@@ -10,7 +12,7 @@ import {
   WarningCircle,
   X,
 } from "@phosphor-icons/react";
-import { useEffect, useMemo, useState, type ReactNode } from "react";
+import { useEffect, useLayoutEffect, useMemo, useRef, useState, type ReactNode } from "react";
 
 import { Avatar, AvatarFallback, AvatarImage } from "./avatar";
 import { Button } from "./button";
@@ -52,7 +54,7 @@ export interface Column<T> {
   defaultHidden?: boolean;
   align?: "left" | "right";
   className?: string;
-  /** Column width for the fixed layout (e.g. "18rem", "20%"). Defaults to auto. */
+  /** Advisory only: columns are content-sized; the layout ignores this. */
   width?: string;
   /** Required columns stay visible and cannot be hidden. */
   required?: boolean;
@@ -132,6 +134,12 @@ interface DataTableProps<T> {
   pageSize?: number;
   pageSizeOptions?: number[];
 
+  /**
+   * `auto` (default) hides the pagination footer when all rows fit on one
+   * page; `always` keeps it visible whenever there is at least one row.
+   */
+  pagination?: "auto" | "always";
+
   /** Surface preset for the table card. */
   tone?: TableSurfaceTone;
   /** Optional action pinned to the top-right of the header band. */
@@ -179,6 +187,11 @@ export function DataTableIdentity({
   );
 }
 
+/**
+ * Toolbar + single content-sized table inside a TableSurface. Columns fit
+ * their widest content (never clipping or overlapping cells) and the surface
+ * scrolls horizontally when the columns exceed the viewport.
+ */
 export function DataTable<T>({
   rows,
   columns,
@@ -201,6 +214,7 @@ export function DataTable<T>({
   defaultSort,
   pageSize: initialPageSize = 25,
   pageSizeOptions = [10, 25, 50, 100],
+  pagination = "auto",
   tone,
   headerAction,
   headerClassName,
@@ -282,6 +296,8 @@ export function DataTable<T>({
   }, [filtered, sort, columns]);
 
   const pageCount = Math.max(1, Math.ceil(sorted.length / pageSize));
+  const showPagination =
+    !loading && !error && sorted.length > 0 && (pagination === "always" || sorted.length > pageSize);
 
   useEffect(() => {
     setPage(0);
@@ -329,27 +345,54 @@ export function DataTable<T>({
 
   const hasToolbar = Boolean(search || filters?.length || toolbarStart || toolbarEnd);
 
-  // Fixed layout keeps header and body columns aligned across the two tables.
-  // When no column declares a width, give the first column more room and split
-  // the rest evenly so tables don't render as uniform stripes.
-  const anyExplicitWidth = visibleColumns.some((c) => c.width);
-  const restShare =
-    visibleColumns.length > 1 ? (100 - 30) / (visibleColumns.length - 1) : 100;
-  const dataWidths = visibleColumns.map((c, i) => {
-    if (c.width) return c.width;
-    if (anyExplicitWidth) return "auto";
-    return `${i === 0 ? 30 : restShare}%`;
-  });
-
-  const colWidths = [
-    ...(selectable ? ["2.75rem"] : []),
-    ...dataWidths,
-    ...(rowActions ? ["11rem"] : []),
-  ];
-
   const ariaSort = (c: Column<T>) =>
     sort?.id === c.id ? (sort.dir === "asc" ? "ascending" : "descending") : undefined;
 
+  // The visible header lives in the TableSurface band while the body table
+  // sizes its columns to their content (table-auto). Keep the band aligned by
+  // 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.
+  const columnKey = visibleColumns.map((c) => c.id).join("\u0000");
+
+  useLayoutEffect(() => {
+    const table = bodyTableRef.current;
+    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, 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) =>
+        prev.length === widths.length && prev.every((w, i) => w === widths[i]) ? prev : widths,
+      );
+    };
+    measure();
+    if (typeof ResizeObserver === "undefined") return;
+    const observer = new ResizeObserver(measure);
+    observer.observe(table);
+    return () => observer.disconnect();
+  }, [columnKey, selectable, rowActions, loading, error]);
+
+  const totalWidth = columnWidths.reduce((sum, width) => sum + width, 0);
+
   return (
     <div className={cn("space-y-4", className)}>
       {tabs && tabs.length > 0 && (
@@ -616,12 +659,21 @@ export function DataTable<T>({
         headerClassName={headerClassName}
         panelClassName={panelClassName}
         header={
-          // Visible header: presentational so its controls stay focusable while
-          // the body table carries the semantic column headers (sr-only).
-          <table role="presentation" className="w-full table-fixed border-collapse">
+          // Visible header band. Presentational (aria-sort lives on the body's
+          // 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={{
+              width: totalWidth > 0 ? totalWidth : undefined,
+              visibility: totalWidth > 0 ? undefined : "hidden",
+            }}
+          >
             <colgroup>
-              {colWidths.map((w, i) => (
-                <col key={i} style={{ width: w }} />
+              {columnWidths.map((width, i) => (
+                <col key={i} style={{ width }} />
               ))}
             </colgroup>
             <thead>
@@ -711,13 +763,8 @@ export function DataTable<T>({
                 action={empty?.action}
               />
             ) : (
-              <table className="w-full table-fixed border-collapse">
-                <colgroup>
-                  {colWidths.map((w, i) => (
-                    <col key={i} style={{ width: w }} />
-                  ))}
-                </colgroup>
-                {/* Semantic headers for assistive tech (visible header is presentational). */}
+              <table ref={bodyTableRef} className="w-full table-auto border-collapse text-left">
+                {/* Semantic headers for assistive tech; the visible band is presentational. */}
                 <thead className="sr-only">
                   <tr>
                     {selectable && <th scope="col">Select</th>}
@@ -771,7 +818,7 @@ export function DataTable<T>({
             )}
           </TableSurface>
 
-      {!loading && !error && sorted.length > 0 && (
+      {showPagination && (
         <div className="flex flex-wrap items-center justify-between gap-3 text-sm">
           <span className="text-muted">
             {start + 1}–{Math.min(start + pageSize, sorted.length)} of {sorted.length}
@@ -784,27 +831,31 @@ export function DataTable<T>({
               <SelectContent>
                 {pageSizeOptions.map((n) => (
                   <SelectItem key={n} value={String(n)}>
-                    {n} / page
+                    {n}
                   </SelectItem>
                 ))}
               </SelectContent>
             </Select>
-            <Button
-              variant="outline"
-              size="md"
-              disabled={page <= 0}
-              onClick={() => setPage((p) => Math.max(0, p - 1))}
-            >
-              Previous
-            </Button>
-            <Button
-              variant="outline"
-              size="md"
-              disabled={page >= pageCount - 1}
-              onClick={() => setPage((p) => Math.min(pageCount - 1, p + 1))}
-            >
-              Next
-            </Button>
+            <div className="flex items-center gap-1">
+              <Button
+                variant="secondary"
+                size="icon"
+                aria-label="Previous page"
+                disabled={page <= 0}
+                onClick={() => setPage((p) => Math.max(0, p - 1))}
+              >
+                <CaretLeft />
+              </Button>
+              <Button
+                variant="secondary"
+                size="icon"
+                aria-label="Next page"
+                disabled={page >= pageCount - 1}
+                onClick={() => setPage((p) => Math.min(pageCount - 1, p + 1))}
+              >
+                <CaretRight />
+              </Button>
+            </div>
           </div>
         </div>
       )}

package/src/table.tsx

@@ -82,7 +82,7 @@ export function TableCell({ className, ...props }: TdHTMLAttributes<HTMLTableCel
   return (
     <td
       className={cn(
-        "px-(--table-pad-x) py-3 align-middle text-sm text-table-row data-numeric:font-numeric data-numeric:tabular-nums",
+        "whitespace-nowrap px-(--table-pad-x) py-3 align-middle text-sm text-table-row data-numeric:font-numeric data-numeric:tabular-nums",
         className,
       )}
       {...props}