refactor: sessions table from react virtualized to tanstack react virtual

package.json

@@ -67,7 +67,7 @@
 		"@monaco-editor/react": "^4.6.0",
 		"@netlify/edge-functions": "^2.11.1",
 		"@tanstack/react-table": "^8.21.3",
-		"@tanstack/react-virtual": "^3.13.13",
+		"@tanstack/react-virtual": "^3.13.14",
 		"@tremor/react": "^3.18.7",
 		"@types/lodash": "^4.17.13",
 		"@types/pako": "^2.0.3",
@@ -110,7 +110,6 @@
 		"react-select": "^5.9.0",
 		"react-time-ago": "^7.3.3",
 		"react-timezone-select": "^3.2.8",
-		"react-virtualized": "^9.22.5",
 		"remark-gfm": "^4.0.1",
 		"remark-github-blockquote-alert": "^1.3.0",
 		"swiper": "^11.1.15",
@@ -149,7 +148,6 @@
 		"@types/randomatic": "^3.1.5",
 		"@types/react": "^18.3.3",
 		"@types/react-dom": "^18.3.1",
-		"@types/react-virtualized": "^9.22.0",
 		"@types/react-window": "^1.8.8",
 		"@typescript-eslint/eslint-plugin": "^8.21.0",
 		"@typescript-eslint/parser": "^8.18.2",

src/components/atoms/table/tBody.tsx

@@ -1,19 +1,22 @@
-import React from "react";
+import React, { forwardRef } from "react";
 
 import { TableProps } from "@interfaces/components";
 import { cn } from "@utilities";
 
 import { useTableVariant } from "@components/atoms/table";
 
-export const TBody = ({ children, className }: TableProps) => {
+export const TBody = forwardRef<HTMLDivElement, TableProps>(({ children, className }, ref) => {
 	const { variant } = useTableVariant();
 
 	return (
 		<div
 			className={cn("bg-gray-1100", { "bg-gray-250 text-gray-1150": variant === "light" }, className)}
+			ref={ref}
 			role="rowgroup"
 		>
 			{children}
 		</div>
 	);
-};
+});
+
+TBody.displayName = "TBody";

src/components/organisms/deployments/sessions/table/tableList.tsx

@@ -1,7 +1,7 @@
-import React, { useCallback, useMemo, useState } from "react";
+import React, { useEffect, useMemo, useRef } from "react";
 
+import { useVirtualizer } from "@tanstack/react-virtual";
 import { useParams } from "react-router-dom";
-import { AutoSizer, List, ListRowRenderer } from "react-virtualized";
 
 import { ModalName } from "@enums/components";
 import { SessionsTableListProps } from "@interfaces/components";
@@ -22,13 +22,15 @@ export const SessionsTableList = ({
 }: SessionsTableListProps) => {
 	const { sessionId } = useParams();
 	const { openModal } = useModalStore();
-	const [resizeHeight, setResizeHeight] = useState(0);
+	const parentRef = useRef<HTMLDivElement>(null);
 
-	const showDeleteModal = useCallback((id: string) => {
-		onSelectedSessionId(id);
-		openModal(ModalName.deleteDeploymentSession, id);
-		// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, []);
+	const showDeleteModal = useMemo(
+		() => (id: string) => {
+			onSelectedSessionId(id);
+			openModal(ModalName.deleteDeploymentSession, id);
+		},
+		[onSelectedSessionId, openModal]
+	);
 
 	const itemData = useMemo(
 		() => ({
@@ -43,36 +45,48 @@ export const SessionsTableList = ({
 		[sessions, sessionId, openSession, showDeleteModal, onSessionRemoved, hideSourceColumn, hideActionsColumn]
 	);
 
-	const rowRenderer: ListRowRenderer = ({ index, key, style }) => (
-		<SessionsTableRow data={itemData} index={index} key={key} style={style} />
-	);
+	const virtualizer = useVirtualizer({
+		count: sessions.length,
+		getScrollElement: () => parentRef.current,
+		estimateSize: () => 40,
+		overscan: 5,
+	});
 
-	const handleResize = useCallback(({ height }: { height: number }) => {
-		setResizeHeight(height - 20);
-	}, []);
+	useEffect(() => {
+		const virtualItems = virtualizer.getVirtualItems();
+		if (virtualItems.length > 0) {
+			const startIndex = virtualItems[0].index;
+			const stopIndex = virtualItems[virtualItems.length - 1].index;
+			onItemsRendered({
+				visibleStartIndex: startIndex,
+				visibleStopIndex: stopIndex,
+				overscanStartIndex: Math.max(0, startIndex - 5),
+				overscanStopIndex: Math.min(sessions.length - 1, stopIndex + 5),
+			});
+		}
+	}, [virtualizer, onItemsRendered, sessions.length]);
 
 	return (
-		<TBody className="h-full">
-			<AutoSizer onResize={handleResize}>
-				{({ height, width }) => (
-					<List
-						className="scrollbar"
-						height={resizeHeight || height * 0.9}
-						onRowsRendered={({ overscanStartIndex, overscanStopIndex, startIndex, stopIndex }) =>
-							onItemsRendered({
-								visibleStartIndex: startIndex,
-								visibleStopIndex: stopIndex,
-								overscanStartIndex,
-								overscanStopIndex,
-							})
-						}
-						rowCount={sessions.length}
-						rowHeight={40}
-						rowRenderer={rowRenderer}
-						width={width}
-					/>
-				)}
-			</AutoSizer>
+		<TBody className="h-full overflow-auto" ref={parentRef}>
+			<div
+				className="relative w-full"
+				style={{
+					height: `${virtualizer.getTotalSize()}px`,
+				}}
+			>
+				{virtualizer.getVirtualItems().map((virtualItem) => (
+					<div
+						className="absolute left-0 top-0 w-full"
+						key={virtualItem.key}
+						style={{
+							height: `${virtualItem.size}px`,
+							transform: `translateY(${virtualItem.start}px)`,
+						}}
+					>
+						<SessionsTableRow data={itemData} index={virtualItem.index} style={{ height: "100%" }} />
+					</div>
+				))}
+			</div>
 		</TBody>
 	);
 };