fix infinite scroll

calcom · Jan 21, 2025 · 5448982 · 5448982
1 parent 3697240
commit 5448982
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 6 deletions.
diff --git a/packages/features/data-table/components/DataTable.tsx b/packages/features/data-table/components/DataTable.tsx
@@ -126,7 +126,8 @@ export function DataTable<TData, TValue>({
         ref={tableContainerRef}
         onScroll={onScroll}
         className={classNames(
-          "scrollbar-thin overflow-auto [&>div]:h-[80dvh]", // Set a fixed height for the container
+          "relative w-full",
+          "scrollbar-thin h-[80dvh] overflow-auto", // Set a fixed height for the container
           "bg-background border-subtle rounded-lg border",
           containerClassName
         )}
@@ -306,7 +307,16 @@ function DataTableBody<TData>({
               key={row.id}
               data-index={virtualRow.index} //needed for dynamic row height measurement
               data-state={row.getIsSelected() && "selected"}
-              className="has-[[data-state=selected]]:bg-muted/50"
+              style={{
+                display: "flex",
+                position: "absolute",
+                transform: `translateY(${virtualRow.start}px)`, //this should always be a `style` as it changes on scroll
+                width: "100%",
+              }}
+              className={classNames(
+                onRowMouseclick && "hover:cursor-pointer",
+                "has-[[data-state=selected]]:bg-muted/50 group"
+              )}
               onClick={() => onRowMouseclick && onRowMouseclick(row)}>
               {row.getVisibleCells().map((cell) => {
                 const column = table.getColumn(cell.column.id);

diff --git a/packages/features/data-table/components/Table.tsx b/packages/features/data-table/components/Table.tsx
@@ -4,9 +4,7 @@ import { classNames as cn } from "@calcom/lib";
 
 const Table = React.forwardRef<HTMLTableElement, React.HTMLAttributes<HTMLTableElement>>(
   ({ className, ...props }, ref) => (
-    <div className="relative w-full overflow-auto">
-      <table ref={ref} className={cn("w-full caption-bottom text-sm", className)} {...props} />
-    </div>
+    <table ref={ref} className={cn("w-full caption-bottom text-sm", className)} {...props} />
   )
 );
 Table.displayName = "Table";
@@ -18,7 +16,7 @@ TableHeader.displayName = "TableHeader";
 
 const TableBody = React.forwardRef<HTMLTableSectionElement, React.HTMLAttributes<HTMLTableSectionElement>>(
   ({ className, ...props }, ref) => (
-    <tbody ref={ref} className={cn("[&_tr:last-child]:border-0", className)} {...props} />
+    <tbody ref={ref} className={cn("grid", "[&_tr:last-child]:border-0", className)} {...props} />
   )
 );
 TableBody.displayName = "TableBody";