{topContentPlacement === "outside" && topContent}
diff --git a/packages/components/table/src/virtualized-table-body.tsx b/packages/components/table/src/virtualized-table-body.tsx
new file mode 100644
index 0000000000..0ff1d651bc
--- /dev/null
+++ b/packages/components/table/src/virtualized-table-body.tsx
@@ -0,0 +1,169 @@
+import {forwardRef, HTMLHeroUIProps} from "@heroui/system";
+import {useDOMRef} from "@heroui/react-utils";
+import {clsx, dataAttr} from "@heroui/shared-utils";
+import {useTableRowGroup} from "@react-aria/table";
+import {filterDOMProps} from "@heroui/react-utils";
+import {mergeProps} from "@react-aria/utils";
+import {Virtualizer} from "@tanstack/react-virtual";
+
+import TableRow from "./table-row";
+import TableCell from "./table-cell";
+import TableCheckboxCell from "./table-checkbox-cell";
+import {ValuesType} from "./use-table";
+
+// @internal
+export interface VirtualizedTableBodyProps extends HTMLHeroUIProps<"tbody"> {
+ slots: ValuesType["slots"];
+ collection: ValuesType["collection"];
+ state: ValuesType["state"];
+ isSelectable: ValuesType["isSelectable"];
+ color: ValuesType["color"];
+ disableAnimation: ValuesType["disableAnimation"];
+ checkboxesProps: ValuesType["checkboxesProps"];
+ selectionMode: ValuesType["selectionMode"];
+ classNames?: ValuesType["classNames"];
+ rowVirtualizer: Virtualizer
;
+}
+
+const VirtualizedTableBody = forwardRef<"tbody", VirtualizedTableBodyProps>((props, ref) => {
+ const {
+ as,
+ className,
+ slots,
+ state,
+ collection,
+ isSelectable,
+ color,
+ disableAnimation,
+ checkboxesProps,
+ selectionMode,
+ classNames,
+ rowVirtualizer,
+ ...otherProps
+ } = props;
+
+ const Component = as || "tbody";
+ const shouldFilterDOMProps = typeof Component === "string";
+
+ const domRef = useDOMRef(ref);
+
+ const {rowGroupProps} = useTableRowGroup();
+
+ const tbodyStyles = clsx(classNames?.tbody, className);
+ const bodyProps = collection?.body.props;
+
+ const isLoading =
+ bodyProps?.isLoading ||
+ bodyProps?.loadingState === "loading" ||
+ bodyProps?.loadingState === "loadingMore";
+
+ const items = [...collection.body.childNodes];
+
+ const virtualItems = rowVirtualizer.getVirtualItems();
+
+ let emptyContent;
+ let loadingContent;
+
+ if (collection.size === 0 && bodyProps.emptyContent) {
+ emptyContent = (
+
+ |
+ {!isLoading && bodyProps.emptyContent}
+ |
+
+ );
+ }
+
+ if (isLoading && bodyProps.loadingContent) {
+ loadingContent = (
+
+ |
+ {bodyProps.loadingContent}
+ |
+ {!emptyContent && collection.size === 0 ? (
+ |
+ ) : null}
+
+ );
+ }
+
+ return (
+
+ {virtualItems.map((virtualRow, index) => {
+ const row = items[virtualRow.index];
+
+ if (!row) {
+ return null;
+ }
+
+ return (
+
+ {[...row.childNodes].map((cell) =>
+ cell.props.isSelectionCell ? (
+
+ ) : (
+
+ ),
+ )}
+
+ );
+ })}
+
+ {loadingContent}
+ {emptyContent}
+
+ );
+});
+
+VirtualizedTableBody.displayName = "HeroUI.VirtualizedTableBody";
+
+export default VirtualizedTableBody;
diff --git a/packages/components/table/src/virtualized-table.tsx b/packages/components/table/src/virtualized-table.tsx
new file mode 100644
index 0000000000..1fbef2a004
--- /dev/null
+++ b/packages/components/table/src/virtualized-table.tsx
@@ -0,0 +1,155 @@
+import {useCallback, useLayoutEffect, useRef, useState} from "react";
+import {Spacer} from "@heroui/spacer";
+import {forwardRef} from "@heroui/system";
+import {useVirtualizer} from "@tanstack/react-virtual";
+
+import {UseTableProps, useTable} from "./use-table";
+import TableRowGroup from "./table-row-group";
+import TableHeaderRow from "./table-header-row";
+import TableColumnHeader from "./table-column-header";
+import TableSelectAllCheckbox from "./table-select-all-checkbox";
+import VirtualizedTableBody from "./virtualized-table-body";
+
+export interface TableProps
+ extends Omit, "isSelectable" | "isMultiSelectable"> {
+ isVirtualized?: boolean;
+ rowHeight?: number;
+ maxTableHeight?: number;
+}
+
+const VirtualizedTable = forwardRef<"table", TableProps>((props, ref) => {
+ const {
+ BaseComponent,
+ Component,
+ collection,
+ values,
+ topContent,
+ topContentPlacement,
+ bottomContentPlacement,
+ bottomContent,
+ removeWrapper,
+ getBaseProps,
+ getWrapperProps,
+ getTableProps,
+ } = useTable({
+ ...props,
+ ref,
+ });
+
+ const {rowHeight = 40, maxTableHeight = 600} = props;
+
+ const Wrapper = useCallback(
+ ({children}: {children: JSX.Element}) => {
+ if (removeWrapper) {
+ return children;
+ }
+
+ return (
+
+ {children}
+
+ );
+ },
+ [removeWrapper, getWrapperProps, maxTableHeight],
+ );
+
+ const items = [...collection.body.childNodes];
+
+ const count = items.length;
+
+ const parentRef = useRef(null);
+
+ const [headerHeight, setHeaderHeight] = useState(0);
+
+ const headerRef = useRef(null);
+
+ useLayoutEffect(() => {
+ if (headerRef.current) {
+ setHeaderHeight(headerRef.current.getBoundingClientRect().height);
+ }
+ }, [headerRef]);
+
+ const rowVirtualizer = useVirtualizer({
+ count,
+ getScrollElement: () => parentRef.current,
+ estimateSize: () => rowHeight,
+ overscan: 5,
+ });
+
+ return (
+
+ {/* We need to add p-1 to make the shadow-sm visible */}
+
+ <>
+ {topContentPlacement === "outside" && topContent}
+
+ <>
+ {topContentPlacement === "inside" && topContent}
+
+
+ {collection.headerRows.map((headerRow) => (
+
+ {[...headerRow.childNodes].map((column) =>
+ column?.props?.isSelectionCell ? (
+
+ ) : (
+
+ ),
+ )}
+
+ ))}
+
+
+
+
+ {bottomContentPlacement === "inside" && bottomContent}
+
+
+
@@ -912,6 +920,38 @@ const InfinitePaginationTemplate = (args: TableProps) => {
);
};
+const VirtualizedTemplate = (args: TableProps & {rowCount: number}) => {
+ const {rowCount, ...rest} = args;
+ const rows = generateRows(rowCount);
+ const columns = [
+ {key: "name", label: "Name"},
+ {key: "value", label: "Value"},
+ ];
+
+ return (
+
+
+
+ {(column) => {column.label}}
+
+
+ {(item) => (
+
+ {(columnKey) => {item[columnKey]}}
+
+ )}
+
+
+