aplance-ui 1.2.1 → 1.3.0

package/registry/components/ui/data-table/data-table.module.css

@@ -29,6 +29,18 @@
   }
 }
 
+/* On tablet/phone the configured multi-column row can't fit. Stack every field
+   full width instead of overflowing the page or scrolling (a scroll container
+   would clip the inputs' focus rings). `!important` beats the inline
+   grid-template-columns the FilterBar sets per consumer; `stretch` makes each
+   field fill the row. */
+@media (--md) {
+  .filter_bar {
+    grid-template-columns: 1fr !important;
+    justify-items: stretch;
+  }
+}
+
 /* ─────────────────────────────────────────────
    Content wrap
    Grows to fill all space below the filter bar.
@@ -113,17 +125,32 @@
   min-height: 0;
   overflow-x: auto;
   overflow-y: auto;
+  /* Reserve the scrollbar gutter by DEFAULT so clientWidth is stable: the
+     vertical scrollbar (when rows overflow) sits in the reserved gutter instead
+     of stealing ~15px and triggering an unexpected horizontal scrollbar. This
+     default also covers the first paint before JS measures. */
+  scrollbar-gutter: stable;
   border: var(--border-1) solid var(--color-border);
-  border-radius: var(--radius-md);
-  background: var(--color-background);
-  position: relative;
-}
+  border-radius: var(--radius-md);
+  background: var(--color-background);
+  position: relative;
+}
+
+/* Once JS confirms the body does NOT overflow vertically (no scrollbar to make
+   room for), release the gutter so the content fills to the border - otherwise
+   a few-row table shows a blank ~15px strip on the right. `data-has-scroll` is
+   set from `scrollHeight > clientHeight` in syncHeaderMetrics. */
+.table_body_wrap[data-has-scroll="false"] {
+  scrollbar-gutter: auto;
+}
 
 /* ─────────────────────────────────────────────
    Shared <table> - header wrap + body wrap.
    table-layout:fixed + identical widths = perfect column alignment.
 ───────────────────────────────────────────── */
 .table {
+  --data-table-selection-control-size: var(--spacing-9);
+
   border-collapse: separate;
   border-spacing: 0;
   table-layout: fixed;
@@ -295,6 +322,8 @@
 }
 
 .selection_checkbox {
+  --native-control-size: var(--data-table-selection-control-size);
+
   width: fit-content;
   min-width: fit-content;
   display: inline-flex;
@@ -532,6 +561,36 @@
   justify-content: space-between;
   gap: var(--spacing-8);
   min-width: 0;
+  /* When the count + controls can't fit, the WHOLE bar scrolls horizontally as
+     one strip rather than wrapping or clipping. The outlet hides X overflow, so
+     letting a cluster shrink would just clip the nav buttons - scroll the bar
+     instead. `space-between` still spreads them when there IS room. The vertical
+     padding gives the buttons' focus rings room so `overflow-x: auto` (which also
+     clips the Y axis) doesn't crop them. */
+  overflow-x: auto;
+  scrollbar-width: thin;
+  scrollbar-color: var(--color-border) transparent;
+  padding-block: var(--spacing-2);
+
+  > * {
+    flex-shrink: 0;
+  }
+}
+
+@media (--sm) {
+  .pagination_bar {
+    gap: var(--spacing-5);
+  }
+}
+
+.pagination_bar_loading {
+  flex-wrap: wrap;
+  row-gap: var(--spacing-4);
+}
+
+.loading_select_skeleton {
+  border-radius: var(--radius-sm);
+  flex-shrink: 0;
 }
 
 .pagination_left {
@@ -539,7 +598,10 @@
   align-items: center;
   gap: var(--spacing-8);
   min-width: 0;
-  flex-shrink: 1;
+}
+
+.pagination_left_loading {
+  overflow: hidden;
 }
 
 .pagination_count {
@@ -557,13 +619,59 @@
   display: flex;
   align-items: center;
   gap: var(--spacing-8);
-  flex-shrink: 0;
+  min-width: 0;
+}
+
+@media (--sm) {
+  .pagination_controls {
+    gap: var(--spacing-5);
+  }
+}
+
+.pagination_controls_loading {
+  flex-direction: row;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: flex-end;
+  max-width: 100%;
+  row-gap: var(--spacing-4);
+}
+
+.pagination_controls_loading > * {
+  flex: 0 1 auto;
+  min-width: 0;
+  max-width: 100%;
+}
+
+.pagination_text_skeleton {
+  height: 1em;
+  min-width: 0;
+  max-width: 100%;
+  flex: 0 1 auto;
+}
+
+.pagination_select_skeleton,
+.pagination_button_skeleton {
+  width: var(--spacing-11);
+  height: var(--spacing-11);
+  min-width: 0;
+}
+
+.pagination_select_skeleton {
+  flex: 0 1 auto;
+}
+
+.pagination_button_skeleton {
+  flex: 0 0 auto;
 }
 
 .page_size_wrap {
   display: flex;
   align-items: center;
   gap: var(--spacing-5);
+  min-width: 0;
+  flex-shrink: 1;
+  max-width: 100%;
 }
 
 .page_size_label {
@@ -589,4 +697,14 @@
   display: flex;
   align-items: center;
   gap: var(--spacing-2);
+  flex-shrink: 0;
+}
+
+.page_nav_loading {
+  flex-wrap: wrap;
+  justify-content: flex-end;
+  row-gap: var(--spacing-2);
+  min-width: 0;
+  max-width: 100%;
+  flex-shrink: 1;
 }

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,
@@ -345,6 +348,8 @@ export const DataTable = <TData extends { id: string }>({
   // 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;
 
@@ -378,39 +402,44 @@ export const DataTable = <TData extends { id: string }>({
       paddingRight,
     );
     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,
+    // Mirror onto the body wrap so CSS can release the reserved scrollbar gutter
+    // when there's no vertical overflow (no blank strip on a few-row table).
+    body.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);
+    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 +468,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;
@@ -448,6 +477,9 @@ export const DataTable = <TData extends { id: string }>({
   );
   const wasLoadingRef = useRef(isLoading);
 
+  // wasLoadingRef is intentionally omitted from the dep array: it's a ref used
+  // to track the previous value of isLoading across renders without triggering
+  // re-runs. React guarantees ref objects are stable across the component lifetime.
   useEffect(() => {
     const wasLoading = wasLoadingRef.current;
     wasLoadingRef.current = isLoading;
@@ -456,18 +488,19 @@ export const DataTable = <TData extends { id: string }>({
       setShowEmptyState(false);
       return;
     }
-    if (wasLoading) {
-      const id = window.setTimeout(
-        () => setShowEmptyState(true),
-        EMPTY_STATE_GRACE_MS,
-      );
-      return () => window.clearTimeout(id);
+    if (!wasLoading) {
+      setShowEmptyState(true);
+      return;
     }
-    setShowEmptyState(true);
+    const id = window.setTimeout(
+      () => setShowEmptyState(true),
+      EMPTY_STATE_GRACE_MS,
+    );
+    return () => window.clearTimeout(id);
   }, [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,12 +509,40 @@ 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 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;
@@ -511,14 +572,24 @@ export const DataTable = <TData extends { id: string }>({
     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 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: "100%", minWidth: `${totalWidth}px` }),
-    [totalWidth],
+    () => ({ 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,
     showVerticalBorders && s.table_vertical_borders,
@@ -588,38 +659,50 @@ export const DataTable = <TData extends { id: string }>({
             {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,
-                          );
+                  {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={col.id}
+                              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={baseStyle}
-                            >
-                              <div className={s.td_inner}>
-                                <Loader
-                                  variant="skeleton"
-                                  style={{ height: "var(--spacing-9)" }}
-                                />
-                              </div>
-                            </td>
-                          );
+                              style={getColumnStyle(
+                                column,
+                                column.getSize(),
+                                columnExtraWidths[column.id] ?? 0,
+                              )}
+                            >
+                              <div className={s.td_inner}>
+                                <Loader
+                                  variant="skeleton"
+                                  className={
+                                    isSelectColumn
+                                      ? s.loading_select_skeleton
+                                      : undefined
+                                  }
+                                  style={
+                                    isSelectColumn
+                                      ? selectSkeletonStyle
+                                      : bodySkeletonStyle
+                                  }
+                                />
+                              </div>
+                            </td>
+                          );
                         })}
                       </tr>
                     ),
@@ -633,7 +716,11 @@ export const DataTable = <TData extends { id: string }>({
               </div>
             )}
             {view === "content" && (
-              <table className={tableClass} style={tableSizingStyle}>
+              <table
+                className={tableClass}
+                style={tableSizingStyle}
+                ref={bodyTableRef}
+              >
                 <tbody>
                   {rows.map((row) => (
                     <BodyRow<TData>
@@ -666,6 +753,7 @@ export const DataTable = <TData extends { id: string }>({
             onPaginationChange={onPaginationChange}
             pageSizeOptions={pageSizeOptions}
             showPageSizeSelect={showPageSizeSelect}
+            isLoading={view === "loader"}
             totalCount={totalCount}
             rowLabel={rowLabel}
             rowsSelectable={rowsSelectable}