aplance-ui 1.2.0 → 1.2.2

package/registry/components/ui/data-table/data-table.tsx

@@ -12,12 +12,12 @@ import {
   type Updater,
 } from "@tanstack/react-table";
 import {
-  useCallback,
-  useEffect,
-  useLayoutEffect,
-  useMemo,
-  useRef,
-  useState,
+  useCallback,
+  useEffect,
+  useLayoutEffect,
+  useMemo,
+  useRef,
+  useState,
   type CSSProperties,
   type DragEvent as ReactDragEvent,
   type ReactNode,
@@ -74,13 +74,15 @@ const EMPTY_FILTER_VALUES: Record<string, string> = {};
 const ICON_SIZE = 15;
 const SORT_ICON_SIZE = 13;
 const ICON_STROKE = 1.6;
-const EMPTY_COLUMN_EXTRA_WIDTHS: Record<string, number> = {};
-// Grace period after `isLoading` flips false before committing to the empty
-// state. Eliminates the flash when consumers set isLoading=false a render
-// before populating rows, without making genuinely-empty results feel sluggish.
-const EMPTY_STATE_GRACE_MS = 150;
-const useIsomorphicLayoutEffect =
-  typeof window === "undefined" ? useEffect : useLayoutEffect;
+const EMPTY_COLUMN_EXTRA_WIDTHS: Record<string, number> = {};
+// Grace period after `isLoading` flips false before committing to the empty
+// state. Eliminates the flash when consumers set isLoading=false a render
+// before populating rows, without making genuinely-empty results feel sluggish.
+const EMPTY_STATE_GRACE_MS = 150;
+
+const MIN_SKELETON_ROWS = 1;
+const useIsomorphicLayoutEffect =
+  typeof window === "undefined" ? useEffect : useLayoutEffect;
 
 export const DataTable = <TData extends { id: string }>({
   data,
@@ -106,6 +108,7 @@ export const DataTable = <TData extends { id: string }>({
   rowLabel = "row",
 
   rowsSelectable = false,
+  getRowCanSelect,
   rowSelection = {},
   onRowSelectionChange,
 
@@ -220,7 +223,7 @@ export const DataTable = <TData extends { id: string }>({
   const table = useReactTable<TData>({
     data,
     columns,
-    enableRowSelection: rowsSelectable,
+    enableRowSelection: rowsSelectable ? (getRowCanSelect ?? true) : false,
     enableColumnResizing,
     enableColumnPinning,
     enableGrouping,
@@ -342,9 +345,11 @@ export const DataTable = <TData extends { id: string }>({
   // ── Sync header/body scrolling ──────────────────────────────────────────────
   // The header lives in its own `overflow:hidden` container; we drive its
   // scrollLeft from the body's scrollLeft on every scroll event so pinned
-  // columns stay perfectly aligned with their body counterparts.
-  const headerRef = useRef<HTMLDivElement>(null);
-  const bodyRef = useRef<HTMLDivElement>(null);
+  // columns stay perfectly aligned with their body counterparts.
+  const headerRef = useRef<HTMLDivElement>(null);
+  const bodyRef = useRef<HTMLDivElement>(null);
+  const bodyTableRef = useRef<HTMLTableElement>(null);
+  const skeletonRowRef = useRef<HTMLTableRowElement>(null);
   const rows = table.getRowModel().rows;
   const headerCount = table.getFlatHeaders().length;
   const totalWidth = table.getTotalSize();
@@ -352,19 +357,38 @@ export const DataTable = <TData extends { id: string }>({
   const tableColumnPinning = tableState.columnPinning;
   const tableColumnSizing = tableState.columnSizing;
   const tableColumnOrder = tableState.columnOrder;
-  const tableColumnVisibility = tableState.columnVisibility;
-  const tableGrouping = tableState.grouping;
-  const [bodyViewportWidth, setBodyViewportWidth] = useState(0);
-  const bodyViewportWidthRef = useRef(0);
-
-  const commitBodyViewportWidth = useCallback((nextWidth: number) => {
-    if (bodyViewportWidthRef.current === nextWidth) return;
-    bodyViewportWidthRef.current = nextWidth;
-    setBodyViewportWidth(nextWidth);
-  }, []);
-
-  const syncHeaderMetrics = useCallback(() => {
-    const body = bodyRef.current;
+  const tableColumnVisibility = tableState.columnVisibility;
+  const tableGrouping = tableState.grouping;
+  const [bodyViewportWidth, setBodyViewportWidth] = useState(0);
+  const bodyViewportWidthRef = useRef(0);
+  // Body wrap height tracked separately so the loading skeleton can render
+  // exactly the count of rows that fits the visible body. Avoids the
+  // "skeleton overflows + body wrap scrolls" feel during cold load.
+  const [bodyViewportHeight, setBodyViewportHeight] = useState(0);
+  const bodyViewportHeightRef = useRef(0);
+  const [skeletonRowHeight, setSkeletonRowHeight] = useState(0);
+  const skeletonRowHeightRef = useRef(0);
+
+  const commitBodyViewportWidth = useCallback((nextWidth: number) => {
+    if (bodyViewportWidthRef.current === nextWidth) return;
+    bodyViewportWidthRef.current = nextWidth;
+    setBodyViewportWidth(nextWidth);
+  }, []);
+
+  const commitBodyViewportHeight = useCallback((nextHeight: number) => {
+    if (bodyViewportHeightRef.current === nextHeight) return;
+    bodyViewportHeightRef.current = nextHeight;
+    setBodyViewportHeight(nextHeight);
+  }, []);
+
+  const commitSkeletonRowHeight = useCallback((nextHeight: number) => {
+    if (nextHeight <= 0 || skeletonRowHeightRef.current === nextHeight) return;
+    skeletonRowHeightRef.current = nextHeight;
+    setSkeletonRowHeight(nextHeight);
+  }, []);
+
+  const syncHeaderMetrics = useCallback(() => {
+    const body = bodyRef.current;
     const header = headerRef.current;
     if (!body || !header) return;
 
@@ -379,38 +403,40 @@ export const DataTable = <TData extends { id: string }>({
     );
     header.parentElement?.setAttribute("data-has-scroll", hasScroll.toString());
 
-    // Re-sync horizontal scroll position after width changes so pinned
-    // columns stay perfectly aligned with their body counterparts.
-    header.scrollLeft = body.scrollLeft;
-    commitBodyViewportWidth(body.clientWidth);
-  }, [commitBodyViewportWidth]);
-
-  useIsomorphicLayoutEffect(() => {
-    syncHeaderMetrics();
-  }, [
-    rows.length,
+    // Re-sync horizontal scroll position after width changes so pinned
+    // columns stay perfectly aligned with their body counterparts.
+    header.scrollLeft = body.scrollLeft;
+    commitBodyViewportWidth(body.clientWidth);
+    commitBodyViewportHeight(body.clientHeight);
+  }, [commitBodyViewportWidth, commitBodyViewportHeight]);
+
+  useIsomorphicLayoutEffect(() => {
+    syncHeaderMetrics();
+  }, [
+    rows.length,
     headerCount,
     totalWidth,
     tableColumnPinning,
     tableColumnSizing,
     tableColumnOrder,
     tableColumnVisibility,
-    tableGrouping,
-    syncHeaderMetrics,
-  ]);
-
-  useIsomorphicLayoutEffect(() => {
-    const body = bodyRef.current;
-    if (!body) return;
-    if (typeof ResizeObserver === "undefined") return;
-
-    const observer = new ResizeObserver(syncHeaderMetrics);
-    observer.observe(body);
+    tableGrouping,
+    syncHeaderMetrics,
+  ]);
+
+  useIsomorphicLayoutEffect(() => {
+    const body = bodyRef.current;
+    if (!body) return;
+    if (typeof ResizeObserver === "undefined") return;
+
+    const observer = new ResizeObserver(syncHeaderMetrics);
+    observer.observe(body);
+    if (bodyTableRef.current) observer.observe(bodyTableRef.current);
 
     return () => {
       observer.disconnect();
     };
-  }, [syncHeaderMetrics]);
+  }, [syncHeaderMetrics, rows.length, isLoading]);
 
   useEffect(() => {
     const body = bodyRef.current;
@@ -439,7 +465,7 @@ export const DataTable = <TData extends { id: string }>({
   }, []);
 
   // ── Derived UI state ────────────────────────────────────────────────────────
-  // Defer the empty state by a tick after a loading→idle transition so the
+  // Defer the empty state by a tick after a loading-to-idle transition so the
   // loader doesn't flicker into "no results" for one paint before rows land.
   // Genuinely empty results (no in-flight load) commit immediately on mount.
   const isRowsEmpty = rows.length === 0;
@@ -467,7 +493,7 @@ export const DataTable = <TData extends { id: string }>({
   }, [isLoading, isRowsEmpty]);
 
   // Single tab-like discriminator drives the body - loader, empty, or content.
-  // While loading OR while bridging the loading→empty grace window, the
+  // While loading OR while bridging the loading-to-empty grace window, the
   // loader stays visible to avoid the brief "no results" flash.
   const view: "loader" | "empty" | "content" =
     isLoading || (isRowsEmpty && !showEmptyState)
@@ -476,15 +502,43 @@ export const DataTable = <TData extends { id: string }>({
         ? "empty"
         : "content";
 
+  useIsomorphicLayoutEffect(() => {
+    if (view !== "loader") return;
+    const row = skeletonRowRef.current;
+    if (!row) return;
+
+    const measureRow = () => {
+      commitSkeletonRowHeight(Math.ceil(row.getBoundingClientRect().height));
+    };
+
+    measureRow();
+    if (typeof ResizeObserver === "undefined") return;
+
+    const observer = new ResizeObserver(measureRow);
+    observer.observe(row);
+
+    return () => {
+      observer.disconnect();
+    };
+  }, [commitSkeletonRowHeight, view]);
+
   const selectedCount = rowsSelectable
     ? table.getSelectedRowModel().flatRows.length
     : 0;
-  const headerGroups = table.getHeaderGroups();
-  const visibleLeafColumns = table.getVisibleLeafColumns();
-
-  const columnExtraWidths = useMemo<Record<string, number>>(() => {
-    const extraSpace = Math.max(0, bodyViewportWidth - totalWidth);
-    if (extraSpace <= 0) return EMPTY_COLUMN_EXTRA_WIDTHS;
+  const headerGroups = table.getHeaderGroups();
+  const visibleLeafColumns = table.getVisibleLeafColumns();
+
+  const skeletonRowCount =
+    bodyViewportHeight > 0 && skeletonRowHeight > 0
+      ? Math.max(
+          MIN_SKELETON_ROWS,
+          Math.floor(bodyViewportHeight / skeletonRowHeight),
+        )
+      : MIN_SKELETON_ROWS;
+
+  const columnExtraWidths = useMemo<Record<string, number>>(() => {
+    const extraSpace = Math.max(0, bodyViewportWidth - totalWidth);
+    if (extraSpace <= 0) return EMPTY_COLUMN_EXTRA_WIDTHS;
 
     // Never add responsive width onto pinned columns because tanstack computes
     // sticky offsets from base sizes; changing pinned visual width would desync
@@ -507,17 +561,27 @@ export const DataTable = <TData extends { id: string }>({
         remainder -= 1;
       }
     }
-
-    return next;
-  }, [bodyViewportWidth, totalWidth, visibleLeafColumns]);
-
-  // The table always fills its container while preserving configured widths as
-  // a minimum. Any extra viewport space is distributed across visible center
-  // columns, keeping pinned offsets stable and avoiding an empty right gutter.
-  const tableSizingStyle: CSSProperties = useMemo(
-    () => ({ width: "100%", minWidth: `${totalWidth}px` }),
-    [totalWidth],
-  );
+
+    return next;
+  }, [bodyViewportWidth, totalWidth, visibleLeafColumns]);
+
+  const tableWidth = Math.max(totalWidth, bodyViewportWidth);
+
+  // Match the table element width to the measured column widths. This keeps
+  // header, body, and skeleton rows on the same sizing contract during resize.
+  const tableSizingStyle: CSSProperties = useMemo(
+    () => ({ width: `${tableWidth}px`, minWidth: `${totalWidth}px` }),
+    [tableWidth, totalWidth],
+  );
+
+  const bodySkeletonStyle: CSSProperties = {
+    height: "var(--spacing-9)",
+  };
+
+  const selectSkeletonStyle: CSSProperties = {
+    width: "var(--data-table-selection-control-size, var(--spacing-9))",
+    height: "var(--data-table-selection-control-size, var(--spacing-9))",
+  };
 
   const tableClass = clsx(
     s.table,
@@ -580,60 +644,77 @@ export const DataTable = <TData extends { id: string }>({
           {/* Scrollable body - only this element scrolls. The body is a
               single switch over `view`: at most one branch ever renders, the
               other two are unmounted entirely. */}
-          <div
-            className={s.table_body_wrap}
-            style={{ pointerEvents: isLoading ? "none" : undefined }}
-            ref={bodyRef}
-          >
-            {view === "loader" && (
-              <table className={tableClass} style={tableSizingStyle}>
-                <tbody>
-                  {Array.from({ length: pagination?.pageSize || 10 }).map(
-                    (_, i) => (
-                      <tr key={`skeleton-${i}`}>
-                        {visibleLeafColumns.map((col) => {
-                          const isPinned = col.getIsPinned();
-                          const isLastPinnedCol = isPinned && isLastPinned(col);
-                          const isSelectColumn = col.id === SELECT_COLUMN_ID;
-                          const baseStyle = getColumnStyle(
-                            col,
-                            col.getSize(),
-                            columnExtraWidths[col.id] ?? 0,
-                          );
-
-                          return (
-                            <td
-                              key={col.id}
-                              className={clsx(
-                                isSelectColumn && s.col_select,
-                                isPinned === "left" && s.col_pinned_left,
-                                isPinned === "right" && s.col_pinned_right,
-                                isLastPinnedCol && s.col_pinned_last,
-                              )}
-                              style={baseStyle}
+          <div
+            className={s.table_body_wrap}
+            style={{ pointerEvents: isLoading ? "none" : undefined }}
+            ref={bodyRef}
+          >
+            {view === "loader" && (
+              <table className={tableClass} style={tableSizingStyle}>
+                <tbody>
+                  {Array.from({ length: skeletonRowCount }).map(
+                    (_, rowIndex) => (
+                      <tr
+                        key={`skeleton-${rowIndex}`}
+                        ref={rowIndex === 0 ? skeletonRowRef : undefined}
+                      >
+                        {visibleLeafColumns.map((column) => {
+                          const isPinned = column.getIsPinned();
+                          const isLastPinnedCol =
+                            isPinned && isLastPinned(column);
+                          const isSelectColumn =
+                            column.id === SELECT_COLUMN_ID;
+
+                          return (
+                            <td
+                              key={column.id}
+                              className={clsx(
+                                isSelectColumn && s.col_select,
+                                isPinned === "left" && s.col_pinned_left,
+                                isPinned === "right" && s.col_pinned_right,
+                                isLastPinnedCol && s.col_pinned_last,
+                              )}
+                              style={getColumnStyle(
+                                column,
+                                column.getSize(),
+                                columnExtraWidths[column.id] ?? 0,
+                              )}
                             >
                               <div className={s.td_inner}>
                                 <Loader
                                   variant="skeleton"
-                                  style={{ height: "var(--spacing-9)" }}
+                                  className={
+                                    isSelectColumn
+                                      ? s.loading_select_skeleton
+                                      : undefined
+                                  }
+                                  style={
+                                    isSelectColumn
+                                      ? selectSkeletonStyle
+                                      : bodySkeletonStyle
+                                  }
                                 />
                               </div>
                             </td>
                           );
-                        })}
-                      </tr>
-                    ),
-                  )}
-                </tbody>
-              </table>
-            )}
+                        })}
+                      </tr>
+                    ),
+                  )}
+                </tbody>
+              </table>
+            )}
             {view === "empty" && (
               <div className={s.state_overlay}>
                 <p className={s.empty_msg}>{emptyMessage}</p>
               </div>
             )}
             {view === "content" && (
-              <table className={tableClass} style={tableSizingStyle}>
+              <table
+                className={tableClass}
+                style={tableSizingStyle}
+                ref={bodyTableRef}
+              >
                 <tbody>
                   {rows.map((row) => (
                     <BodyRow<TData>
@@ -666,6 +747,7 @@ export const DataTable = <TData extends { id: string }>({
             onPaginationChange={onPaginationChange}
             pageSizeOptions={pageSizeOptions}
             showPageSizeSelect={showPageSizeSelect}
+            isLoading={view === "loader"}
             totalCount={totalCount}
             rowLabel={rowLabel}
             rowsSelectable={rowsSelectable}