@vritti/quantum-ui 0.3.20 → 0.3.22

package/dist/useDataTable.js

@@ -21830,6 +21830,13 @@ function DataTable({
 }) {
   const [filtersOpen, setFiltersOpen] = useState(false);
   const importDialog = useDialog();
+  const headerScrollRef = useRef(null);
+  const bodyScrollRef = useRef(null);
+  const syncHeaderScroll = () => {
+    if (headerScrollRef.current && bodyScrollRef.current) {
+      headerScrollRef.current.scrollLeft = bodyScrollRef.current.scrollLeft;
+    }
+  };
   const tableGate = usePermission(permission);
   const importGate = usePermission(importExport?.importPermission);
   const exportGate = usePermission(importExport?.exportPermission);
@@ -22002,134 +22009,158 @@ function DataTable({
         },
         "filters"
       ) : null }),
-      /* @__PURE__ */ jsxs("div", { className: "relative flex w-full flex-col overflow-auto overscroll-auto flex-1", children: [
-        /* @__PURE__ */ jsxs("table", { className: "w-full caption-bottom text-sm table-fixed", style: { minWidth: table.getCenterTotalSize() }, children: [
-          /* @__PURE__ */ jsx(TableHeader, { children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx(TableRow, { children: headerGroup.headers.map((header) => {
-            const isActions = header.column.id === "actions";
-            const headerAlignClass = isActions ? "justify-end" : "justify-center";
-            return /* @__PURE__ */ jsxs(
-              TableHead,
-              {
-                colSpan: header.colSpan,
-                style: isActions ? { width: "70px" } : { width: header.getSize(), minWidth: header.getSize(), maxWidth: header.getSize() },
-                className: cn(
-                  "relative group/resize",
-                  isActions ? "text-right sticky right-0 z-20" : "text-center"
-                ),
-                "aria-sort": header.column.getCanSort() ? header.column.getIsSorted() === "asc" ? "ascending" : header.column.getIsSorted() === "desc" ? "descending" : "none" : void 0,
-                children: [
-                  isActions && /* @__PURE__ */ jsx(
-                    "div",
-                    {
-                      "aria-hidden": true,
-                      className: "pointer-events-none absolute inset-x-0 top-0 bottom-px bg-muted/40 backdrop-blur-sm"
-                    }
+      /* @__PURE__ */ jsxs("div", { className: "flex w-full flex-col flex-1 min-h-0", children: [
+        /* @__PURE__ */ jsx("div", { ref: headerScrollRef, className: "shrink-0 overflow-hidden", children: /* @__PURE__ */ jsx(
+          "table",
+          {
+            className: "w-full caption-bottom text-sm table-fixed",
+            style: { minWidth: table.getCenterTotalSize() },
+            children: /* @__PURE__ */ jsx(TableHeader, { children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx(TableRow, { children: headerGroup.headers.map((header) => {
+              const isActions = header.column.id === "actions";
+              const headerAlignClass = isActions ? "justify-end" : "justify-center";
+              return /* @__PURE__ */ jsxs(
+                TableHead,
+                {
+                  colSpan: header.colSpan,
+                  style: isActions ? { width: "70px" } : { width: header.getSize(), minWidth: header.getSize(), maxWidth: header.getSize() },
+                  className: cn(
+                    "relative group/resize",
+                    // actions header stays pinned on horizontal scroll; z-20 keeps it above the
+                    // regular header cells that scroll underneath it.
+                    isActions ? "text-right sticky right-0 z-20" : "text-center"
                   ),
-                  /* @__PURE__ */ jsx("div", { className: cn(isActions ? "relative" : void 0), children: header.isPlaceholder ? null : typeof header.column.columnDef.header === "string" ? /* @__PURE__ */ jsx("div", { className: cn("flex", headerAlignClass), children: /* @__PURE__ */ jsx(DataTableColumnHeader, { column: header.column, title: header.column.columnDef.header }) }) : flexRender(header.column.columnDef.header, header.getContext()) }),
-                  !meta?.lockedColumnSizing && header.column.getCanResize() && /* @__PURE__ */ jsx(
-                    "div",
-                    {
-                      onPointerDown: header.getResizeHandler(),
-                      onTouchStart: header.getResizeHandler(),
-                      className: cn(
-                        "absolute top-0 right-0 w-1 h-full cursor-col-resize select-none touch-none z-10",
-                        "opacity-0 group-hover/resize:opacity-100 hover:bg-primary/50",
-                        header.column.getIsResizing() && "opacity-100 bg-primary"
-                      )
-                    }
-                  )
-                ]
-              },
-              header.id
-            );
-          }) }, headerGroup.id)) }),
-          !locked && (isLoading || table.getRowModel().rows.length > 0) && /* @__PURE__ */ jsx(TableBody, { children: isLoading ? Array.from(
-            { length: table.getState().pagination?.pageSize ?? 20 },
-            (_, i) => `skeleton-row-${i}`
-          ).map((rowKey) => /* @__PURE__ */ jsx(TableRow, { children: Array.from({ length: columnCount }, (_, i) => `${rowKey}-cell-${i}`).map((cellKey) => /* @__PURE__ */ jsx(TableCell, { className: densityClasses[density], children: /* @__PURE__ */ jsx(Skeleton, { className: "h-5 w-full" }) }, cellKey)) }, rowKey)) : table.getRowModel().rows.map((row, index) => {
-            const externallySelected = selectedRowId != null && row.id === selectedRowId;
-            const isSelected = row.getIsSelected() || externallySelected;
-            return /* @__PURE__ */ jsx(
-              TableRow,
-              {
-                "data-state": isSelected ? "selected" : void 0,
-                className: "group animate-in fade-in duration-300",
-                style: { animationDelay: `${Math.min(index, 12) * 25}ms`, animationFillMode: "both" },
-                children: row.getVisibleCells().map((cell) => {
-                  const isActionsCell = cell.column.id === "actions";
-                  return /* @__PURE__ */ jsxs(
-                    TableCell,
-                    {
-                      className: cn(
-                        densityClasses[density],
-                        isActionsCell ? "px-2 sticky right-0 z-10" : void 0,
-                        onRowClick && !isActionsCell ? "cursor-pointer" : void 0
-                      ),
-                      onClick: onRowClick && !isActionsCell ? () => onRowClick(row.original) : void 0,
-                      style: isActionsCell ? { width: "70px" } : {
-                        width: cell.column.getSize(),
-                        minWidth: cell.column.getSize(),
-                        maxWidth: cell.column.getSize()
-                      },
-                      children: [
-                        isActionsCell && /* @__PURE__ */ jsx(
-                          "div",
-                          {
-                            "aria-hidden": true,
-                            className: "pointer-events-none absolute inset-x-0 top-0 bottom-px bg-background/40 backdrop-blur-sm group-hover:bg-muted/30 group-data-[state=selected]:bg-muted/40"
-                          }
-                        ),
-                        /* @__PURE__ */ jsx(
-                          "div",
-                          {
-                            className: cn(
-                              isActionsCell ? "relative flex items-center justify-end" : "overflow-hidden text-center"
-                            ),
-                            children: flexRender(cell.column.columnDef.cell, cell.getContext())
-                          }
+                  "aria-sort": header.column.getCanSort() ? header.column.getIsSorted() === "asc" ? "ascending" : header.column.getIsSorted() === "desc" ? "descending" : "none" : void 0,
+                  children: [
+                    isActions && /* @__PURE__ */ jsx(
+                      "div",
+                      {
+                        "aria-hidden": true,
+                        className: "pointer-events-none absolute inset-x-0 top-0 bottom-px bg-muted backdrop-blur-sm"
+                      }
+                    ),
+                    /* @__PURE__ */ jsx("div", { className: cn(isActions ? "relative" : void 0), children: header.isPlaceholder ? null : typeof header.column.columnDef.header === "string" ? /* @__PURE__ */ jsx("div", { className: cn("flex", headerAlignClass), children: /* @__PURE__ */ jsx(DataTableColumnHeader, { column: header.column, title: header.column.columnDef.header }) }) : flexRender(header.column.columnDef.header, header.getContext()) }),
+                    !meta?.lockedColumnSizing && header.column.getCanResize() && /* @__PURE__ */ jsx(
+                      "div",
+                      {
+                        onPointerDown: header.getResizeHandler(),
+                        onTouchStart: header.getResizeHandler(),
+                        className: cn(
+                          "absolute top-0 right-0 w-1 h-full cursor-col-resize select-none touch-none z-10",
+                          "opacity-0 group-hover/resize:opacity-100 hover:bg-primary/50",
+                          header.column.getIsResizing() && "opacity-100 bg-primary"
                         )
-                      ]
-                    },
-                    cell.id
-                  );
-                })
-              },
-              row.id
-            );
-          }) })
-        ] }),
-        (locked || !isLoading && table.getRowModel().rows.length === 0) && /* @__PURE__ */ jsx("div", { className: "flex flex-1 items-center justify-center", children: locked ? /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center justify-center gap-2 text-center", children: [
-          /* @__PURE__ */ jsx(PermissionLockIcon, { reason: tableGate.reason, className: "size-6" }),
-          /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: lockedTip(tableGate) })
-        ] }) : isFiltered ? /* @__PURE__ */ jsx(
-          DataTableEmpty,
+                      }
+                    )
+                  ]
+                },
+                header.id
+              );
+            }) }, headerGroup.id)) })
+          }
+        ) }),
+        /* @__PURE__ */ jsxs(
+          "div",
           {
-            icon: emptyStateConfig?.icon,
-            title: "No results found",
-            description: buildNoResultsDescription({ hasActiveSearch, hasActiveFilters, hasActiveView }),
-            action: /* @__PURE__ */ jsxs("div", { className: "flex gap-2", children: [
-              hasActiveSearch && /* @__PURE__ */ jsx(Button, { variant: "outline", size: "sm", onClick: () => meta?.setSearch?.(searchBaseline), children: "Clear Search" }),
-              hasActiveFilters && /* @__PURE__ */ jsx(Button, { variant: "outline", size: "sm", onClick: () => meta?.setFilters?.(filtersBaseline), children: "Clear Filters" }),
-              hasActiveView && slug && /* @__PURE__ */ jsx(
-                Button,
+            ref: bodyScrollRef,
+            onScroll: syncHeaderScroll,
+            className: "relative flex flex-col flex-1 min-h-0 overflow-auto overscroll-auto",
+            children: [
+              !locked && (isLoading || table.getRowModel().rows.length > 0) && /* @__PURE__ */ jsx(
+                "table",
                 {
-                  variant: "outline",
-                  size: "sm",
-                  onClick: () => loadViewState(slug, EMPTY_TABLE_STATE, null, false),
-                  children: "Clear View"
+                  className: "w-full caption-bottom text-sm table-fixed",
+                  style: { minWidth: table.getCenterTotalSize() },
+                  children: /* @__PURE__ */ jsx(TableBody, { children: isLoading ? Array.from(
+                    { length: table.getState().pagination?.pageSize ?? 20 },
+                    (_, i) => `skeleton-row-${i}`
+                  ).map((rowKey) => /* @__PURE__ */ jsx(TableRow, { children: Array.from({ length: columnCount }, (_, i) => `${rowKey}-cell-${i}`).map((cellKey) => /* @__PURE__ */ jsx(TableCell, { className: densityClasses[density], children: /* @__PURE__ */ jsx(Skeleton, { className: "h-5 w-full" }) }, cellKey)) }, rowKey)) : table.getRowModel().rows.map((row, index) => {
+                    const externallySelected = selectedRowId != null && row.id === selectedRowId;
+                    const isSelected = row.getIsSelected() || externallySelected;
+                    return /* @__PURE__ */ jsx(
+                      TableRow,
+                      {
+                        "data-state": isSelected ? "selected" : void 0,
+                        className: "group animate-in fade-in duration-300",
+                        style: { animationDelay: `${Math.min(index, 12) * 25}ms`, animationFillMode: "both" },
+                        children: row.getVisibleCells().map((cell) => {
+                          const isActionsCell = cell.column.id === "actions";
+                          return /* @__PURE__ */ jsxs(
+                            TableCell,
+                            {
+                              className: cn(
+                                densityClasses[density],
+                                isActionsCell ? "px-2 sticky right-0 z-10" : void 0,
+                                onRowClick && !isActionsCell ? "cursor-pointer" : void 0
+                              ),
+                              onClick: onRowClick && !isActionsCell ? () => onRowClick(row.original) : void 0,
+                              style: isActionsCell ? { width: "70px" } : {
+                                width: cell.column.getSize(),
+                                minWidth: cell.column.getSize(),
+                                maxWidth: cell.column.getSize()
+                              },
+                              children: [
+                                isActionsCell && /* @__PURE__ */ jsx(
+                                  "div",
+                                  {
+                                    "aria-hidden": true,
+                                    className: "pointer-events-none absolute inset-x-0 top-0 bottom-px bg-background/40 backdrop-blur-sm group-hover:bg-muted/30 group-data-[state=selected]:bg-muted/40"
+                                  }
+                                ),
+                                /* @__PURE__ */ jsx(
+                                  "div",
+                                  {
+                                    className: cn(
+                                      isActionsCell ? "relative flex items-center justify-end" : "overflow-hidden text-center"
+                                    ),
+                                    children: flexRender(cell.column.columnDef.cell, cell.getContext())
+                                  }
+                                )
+                              ]
+                            },
+                            cell.id
+                          );
+                        })
+                      },
+                      row.id
+                    );
+                  }) })
                 }
-              )
-            ] })
-          }
-        ) : /* @__PURE__ */ jsx(
-          DataTableEmpty,
-          {
-            icon: emptyStateConfig?.icon,
-            title: emptyStateConfig?.title,
-            description: emptyStateConfig?.description,
-            action: emptyStateConfig?.action
+              ),
+              (locked || !isLoading && table.getRowModel().rows.length === 0) && /* @__PURE__ */ jsx("div", { className: "flex flex-1 items-center justify-center", children: locked ? /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center justify-center gap-2 text-center", children: [
+                /* @__PURE__ */ jsx(PermissionLockIcon, { reason: tableGate.reason, className: "size-6" }),
+                /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: lockedTip(tableGate) })
+              ] }) : isFiltered ? /* @__PURE__ */ jsx(
+                DataTableEmpty,
+                {
+                  icon: emptyStateConfig?.icon,
+                  title: "No results found",
+                  description: buildNoResultsDescription({ hasActiveSearch, hasActiveFilters, hasActiveView }),
+                  action: /* @__PURE__ */ jsxs("div", { className: "flex gap-2", children: [
+                    hasActiveSearch && /* @__PURE__ */ jsx(Button, { variant: "outline", size: "sm", onClick: () => meta?.setSearch?.(searchBaseline), children: "Clear Search" }),
+                    hasActiveFilters && /* @__PURE__ */ jsx(Button, { variant: "outline", size: "sm", onClick: () => meta?.setFilters?.(filtersBaseline), children: "Clear Filters" }),
+                    hasActiveView && slug && /* @__PURE__ */ jsx(
+                      Button,
+                      {
+                        variant: "outline",
+                        size: "sm",
+                        onClick: () => loadViewState(slug, EMPTY_TABLE_STATE, null, false),
+                        children: "Clear View"
+                      }
+                    )
+                  ] })
+                }
+              ) : /* @__PURE__ */ jsx(
+                DataTableEmpty,
+                {
+                  icon: emptyStateConfig?.icon,
+                  title: emptyStateConfig?.title,
+                  description: emptyStateConfig?.description,
+                  action: emptyStateConfig?.action
+                }
+              ) })
+            ]
           }
-        ) })
+        )
       ] })
     ] }),
     (mode !== "compact" || table.getRowCount() > (table.getState().pagination?.pageSize ?? 20)) && /* @__PURE__ */ jsx(DataTablePagination, { table }),