From 54489827f9f80ca4c162a92d0be933a8e52c04fe Mon Sep 17 00:00:00 2001
From: Eunjae Lee <hey@eunjae.dev>
Date: Tue, 21 Jan 2025 18:01:11 +0100
Subject: [PATCH] fix infinite scroll

---
 .../features/data-table/components/DataTable.tsx   | 14 ++++++++++++--
 packages/features/data-table/components/Table.tsx  |  6 ++----
 2 files changed, 14 insertions(+), 6 deletions(-)

diff --git a/packages/features/data-table/components/DataTable.tsx b/packages/features/data-table/components/DataTable.tsx
index 9fd182a6a2cf24..2bacfa76ef3119 100644
--- 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
index 93be370b837f41..c753592fa02d0c 100644
--- 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";