tembro 3.0.0 → 3.1.1

package/packages/cli/vendor/src/components/data-table/data-table.tsx

@@ -19,20 +19,21 @@ import {
   type ColumnPinningState,
   getExpandedRowModel,
 } from "@tanstack/react-table"
+import { useVirtualizer, type VirtualItem } from "@tanstack/react-virtual"
 
 import { createDataTableActionsColumn } from "@/components/data-table/data-table-actions-column"
 import { DataTableBulkActions, type DataTableBulkAction } from "@/components/data-table/data-table-bulk-actions"
-import { DataTableColumnVisibilityMenu } from "@/components/data-table/data-table-column-visibility-menu"
-import { DataTablePagination, type DataTablePaginationProps } from "@/components/data-table/data-table-pagination"
-import { type DataTableRowAction } from "@/components/data-table/data-table-row-actions"
-import { DataTableToolbar, type DataTableToolbarProps } from "@/components/data-table/data-table-toolbar"
-import { DataState, type DataStateProps } from "@/components/display/data-state"
-import { LoadingState, type LoadingStateProps } from "@/components/feedback/loading-state"
-import { Button } from "@/components/ui/button"
-import { Input, type InputSearchProps } from "@/components/ui/input"
-import {
-  Table,
-  TableBody,
+import { DataTableColumnVisibilityMenu } from "@/components/data-table/data-table-column-visibility-menu"
+import { DataTablePagination, type DataTablePaginationProps } from "@/components/data-table/data-table-pagination"
+import { type DataTableRowAction } from "@/components/data-table/data-table-row-actions"
+import { DataTableToolbar, type DataTableToolbarProps } from "@/components/data-table/data-table-toolbar"
+import { DataState, type DataStateProps } from "@/components/display/data-state"
+import { LoadingState, type LoadingStateProps } from "@/components/feedback/loading-state"
+import { Button } from "@/components/ui/button"
+import { Input, type InputSearchProps } from "@/components/ui/input"
+import {
+  Table,
+  TableBody,
   TableCell,
   TableHead,
   TableHeader,
@@ -43,6 +44,20 @@ import { cn } from "@/lib/utils"
 export type DataTableDensity = "compact" | "default" | "comfortable"
 export type DataTableLoadingVariant = "skeleton" | "state"
 
+export type DataTableVirtualizationRange = {
+  startIndex: number
+  endIndex: number
+}
+
+export type DataTableVirtualizationConfig = {
+  enabled?: boolean
+  height?: number | string
+  estimateRowHeight?: number
+  overscan?: number
+  measureRows?: boolean
+  onRangeChange?: (range: DataTableVirtualizationRange) => void
+}
+
 export type DataTableFeatureConfig = {
   search?: boolean
   columnVisibility?: boolean
@@ -52,12 +67,12 @@ export type DataTableFeatureConfig = {
   export?: boolean
 }
 
-export type DataTableSearchConfig = Pick<
-  InputSearchProps,
-  | "value"
-  | "onValueChange"
-  | "placeholder"
-  | "inputClassName"
+export type DataTableSearchConfig = Pick<
+  InputSearchProps,
+  | "value"
+  | "onValueChange"
+  | "placeholder"
+  | "inputClassName"
   | "disabled"
   | "clearable"
   | "clearLabel"
@@ -89,30 +104,30 @@ export type DataTablePaginationConfig = Pick<
   onPageSizeChange?: (pageSize: number) => void
 }
 
-export type DataTableProps<TData, TValue = unknown> = Omit<
-  React.ComponentProps<"div">,
-  "children"
-> & {
+export type DataTableProps<TData, TValue = unknown> = Omit<
+  React.ComponentProps<"div">,
+  "children"
+> & {
   columns: ColumnDef<TData, TValue>[]
   data: TData[]
-  title?: React.ReactNode
-  description?: React.ReactNode
-  features?: DataTableFeatureConfig
-  search?: DataTableSearchConfig
-  filters?: React.ReactNode | ((context: DataTableActionContext<TData>) => React.ReactNode)
-  summary?: React.ReactNode | ((context: DataTableActionContext<TData>) => React.ReactNode)
-  toolbarActions?: React.ReactNode | ((context: DataTableActionContext<TData>) => React.ReactNode)
-  rowActions?: (row: Row<TData>, original: TData) => DataTableRowAction<TData>[]
+  title?: React.ReactNode
+  description?: React.ReactNode
+  features?: DataTableFeatureConfig
+  search?: DataTableSearchConfig
+  filters?: React.ReactNode | ((context: DataTableActionContext<TData>) => React.ReactNode)
+  summary?: React.ReactNode | ((context: DataTableActionContext<TData>) => React.ReactNode)
+  toolbarActions?: React.ReactNode | ((context: DataTableActionContext<TData>) => React.ReactNode)
+  rowActions?: (row: Row<TData>, original: TData) => DataTableRowAction<TData>[]
   bulkActions?: DataTableBulkAction<TData>[]
   onRefresh?: (context: DataTableActionContext<TData>) => void
-  onExport?: (context: DataTableActionContext<TData>) => void
+  onExport?: (context: DataTableActionContext<TData>) => void
   refreshLabel?: React.ReactNode
   exportLabel?: React.ReactNode
   getRowId?: (originalRow: TData, index: number, parent?: Row<TData>) => string
   isLoading?: boolean
   isError?: boolean
-  emptyState?: Omit<DataStateProps, "status">
-  errorState?: Omit<DataStateProps, "status">
+  emptyState?: Omit<DataStateProps, "status">
+  errorState?: Omit<DataStateProps, "status">
   loadingState?: LoadingStateProps
   loadingVariant?: DataTableLoadingVariant
   toolbar?: React.ReactNode | ((table: TanStackTable<TData>) => React.ReactNode)
@@ -147,6 +162,7 @@ export type DataTableProps<TData, TValue = unknown> = Omit<
   getRowCanExpand?: (row: Row<TData>) => boolean
   columnPinning?: ColumnPinningState
   onColumnPinningChange?: OnChangeFn<ColumnPinningState>
+  virtualization?: DataTableVirtualizationConfig | false
 }
 
 const densityHeadClassName: Record<DataTableDensity, string> = {
@@ -193,13 +209,13 @@ function DataTable<TData, TValue = unknown>({
   columns,
   data,
   title,
-  description,
-  features,
-  search,
-  filters,
-  summary,
-  toolbarActions,
-  rowActions,
+  description,
+  features,
+  search,
+  filters,
+  summary,
+  toolbarActions,
+  rowActions,
   bulkActions,
   onRefresh,
   onExport,
@@ -244,6 +260,7 @@ function DataTable<TData, TValue = unknown>({
   getRowCanExpand,
   columnPinning,
   onColumnPinningChange,
+  virtualization,
   ...props
 }: DataTableProps<TData, TValue>) {
   const resolvedColumns = React.useMemo<ColumnDef<TData, unknown>[]>(() => {
@@ -265,10 +282,10 @@ function DataTable<TData, TValue = unknown>({
         pageSize: paginationConfig.pageSize,
       }
     : undefined
-  const manualPagination = Boolean(paginationConfig && paginationConfig.manual !== false)
-  const resolvedRowSelection = rowSelection ?? {}
-
-  // TanStack Table returns imperative helpers that React Compiler flags by design.
+  const manualPagination = Boolean(paginationConfig && paginationConfig.manual !== false)
+  const resolvedRowSelection = rowSelection ?? {}
+
+  // TanStack Table returns imperative helpers that React Compiler flags by design.
   // eslint-disable-next-line react-hooks/incompatible-library
   const table = useReactTable({
     data,
@@ -296,41 +313,95 @@ function DataTable<TData, TValue = unknown>({
     getExpandedRowModel: getExpandedRowModel(),
   })
 
-  const rows = table.getRowModel().rows
-  const selectedRows = table.getSelectedRowModel().rows.map((row) => row.original)
-  const selectedRowCount = selectedRows.length
-  const actionContext = React.useMemo<DataTableActionContext<TData>>(
-    () => ({ table, data, selectedRows }),
-    [data, selectedRows, table]
-  )
-  const visibleColumns = table.getVisibleLeafColumns()
-  const visibleColumnCount = Math.max(visibleColumns.length, 1)
-  const resolvedToolbar = typeof toolbar === "function" ? toolbar(table) : toolbar
-  const resolvedToolbarProps = typeof toolbarProps === "function" ? toolbarProps(table) : toolbarProps
-  const resolvedFilters = typeof filters === "function" ? filters(actionContext) : filters
-  const resolvedSummary = typeof summary === "function" ? summary(actionContext) : summary
-  const shouldShowSearch = Boolean(search && features?.search !== false)
-  const shouldShowColumnVisibility = Boolean(features?.columnVisibility && table.getAllLeafColumns().some((column) => column.getCanHide()))
-  const shouldShowRefresh = Boolean(features?.refresh && onRefresh)
-  const shouldShowExport = Boolean(features?.export && onExport)
-  const shouldShowBulkActions = Boolean(features?.bulkActions !== false && bulkActions?.length)
-  const hasPrimaryToolbarContent = Boolean(
-    title ||
-      description ||
-      search ||
-      resolvedFilters ||
-      resolvedSummary ||
-      toolbarActions ||
-      shouldShowRefresh ||
-      shouldShowExport
-  )
-  const shouldShowColumnVisibilityInToolbar = shouldShowColumnVisibility && hasPrimaryToolbarContent
-  const defaultSearch = shouldShowSearch && search ? (
-    <Input
-      type="search"
-      value={search.value}
-      onValueChange={search.onValueChange}
-      placeholder={search.placeholder ?? "Search..."}
+  const rows = table.getRowModel().rows
+  const tableScrollRef = React.useRef<HTMLDivElement>(null)
+  const virtualizationConfig = virtualization === false ? undefined : virtualization
+  const virtualizationEnabled = Boolean(
+    virtualizationConfig && virtualizationConfig.enabled !== false && rows.length > 0
+  )
+  const virtualizationHeight = virtualizationConfig?.height ?? 480
+  const onVirtualRangeChange = virtualizationConfig?.onRangeChange
+  const rowVirtualizer = useVirtualizer({
+    count: virtualizationEnabled ? rows.length : 0,
+    getScrollElement: () => tableScrollRef.current,
+    estimateSize: () => virtualizationConfig?.estimateRowHeight ?? 48,
+    getItemKey: (index) => rows[index]?.id ?? index,
+    overscan: virtualizationConfig?.overscan ?? 8,
+    initialRect: {
+      width: 0,
+      height: typeof virtualizationHeight === "number" ? virtualizationHeight : 480,
+    },
+    onChange(instance) {
+      if (!onVirtualRangeChange) return
+      const virtualItems = instance.getVirtualItems()
+      onVirtualRangeChange({
+        startIndex: virtualItems[0]?.index ?? -1,
+        endIndex: virtualItems.at(-1)?.index ?? -1,
+      })
+    },
+  })
+  const virtualRows = virtualizationEnabled ? rowVirtualizer.getVirtualItems() : []
+  const estimatedRowHeight = virtualizationConfig?.estimateRowHeight ?? 48
+  const initialVirtualRowCount = virtualizationEnabled
+    ? Math.min(
+        rows.length,
+        Math.ceil(
+          (typeof virtualizationHeight === "number" ? virtualizationHeight : 480) /
+            estimatedRowHeight
+        ) + (virtualizationConfig?.overscan ?? 8)
+      )
+    : 0
+  const renderedVirtualRows = virtualRows.length > 0
+    ? virtualRows
+    : Array.from({ length: initialVirtualRowCount }, (_, index): VirtualItem => ({
+        key: rows[index]?.id ?? index,
+        index,
+        start: index * estimatedRowHeight,
+        end: (index + 1) * estimatedRowHeight,
+        size: estimatedRowHeight,
+        lane: 0,
+      }))
+  const virtualPaddingTop = renderedVirtualRows[0]?.start ?? 0
+  const virtualPaddingBottom = renderedVirtualRows.length
+    ? Math.max(
+        rowVirtualizer.getTotalSize() - renderedVirtualRows[renderedVirtualRows.length - 1].end,
+        0
+      )
+    : 0
+  const selectedRows = table.getSelectedRowModel().rows.map((row) => row.original)
+  const selectedRowCount = selectedRows.length
+  const actionContext = React.useMemo<DataTableActionContext<TData>>(
+    () => ({ table, data, selectedRows }),
+    [data, selectedRows, table]
+  )
+  const visibleColumns = table.getVisibleLeafColumns()
+  const visibleColumnCount = Math.max(visibleColumns.length, 1)
+  const resolvedToolbar = typeof toolbar === "function" ? toolbar(table) : toolbar
+  const resolvedToolbarProps = typeof toolbarProps === "function" ? toolbarProps(table) : toolbarProps
+  const resolvedFilters = typeof filters === "function" ? filters(actionContext) : filters
+  const resolvedSummary = typeof summary === "function" ? summary(actionContext) : summary
+  const shouldShowSearch = Boolean(search && features?.search !== false)
+  const shouldShowColumnVisibility = Boolean(features?.columnVisibility && table.getAllLeafColumns().some((column) => column.getCanHide()))
+  const shouldShowRefresh = Boolean(features?.refresh && onRefresh)
+  const shouldShowExport = Boolean(features?.export && onExport)
+  const shouldShowBulkActions = Boolean(features?.bulkActions !== false && bulkActions?.length)
+  const hasPrimaryToolbarContent = Boolean(
+    title ||
+      description ||
+      search ||
+      resolvedFilters ||
+      resolvedSummary ||
+      toolbarActions ||
+      shouldShowRefresh ||
+      shouldShowExport
+  )
+  const shouldShowColumnVisibilityInToolbar = shouldShowColumnVisibility && hasPrimaryToolbarContent
+  const defaultSearch = shouldShowSearch && search ? (
+    <Input
+      type="search"
+      value={search.value}
+      onValueChange={search.onValueChange}
+      placeholder={search.placeholder ?? "Search..."}
       wrapperClassName={search.wrapperClassName ?? search.className}
       inputClassName={search.inputClassName}
       disabled={search.disabled}
@@ -339,11 +410,11 @@ function DataTable<TData, TValue = unknown>({
       searchIcon={search.searchIcon}
     />
   ) : undefined
-  const defaultActions = (
-    <>
-      {typeof toolbarActions === "function" ? toolbarActions(actionContext) : toolbarActions}
-      {shouldShowColumnVisibilityInToolbar && <DataTableColumnVisibilityMenu table={table} />}
-      {shouldShowRefresh && (
+  const defaultActions = (
+    <>
+      {typeof toolbarActions === "function" ? toolbarActions(actionContext) : toolbarActions}
+      {shouldShowColumnVisibilityInToolbar && <DataTableColumnVisibilityMenu table={table} />}
+      {shouldShowRefresh && (
         <Button type="button" variant="outline" size="sm" disabled={isLoading} onClick={() => onRefresh?.(actionContext)}>
           {refreshLabel}
         </Button>
@@ -366,14 +437,14 @@ function DataTable<TData, TValue = unknown>({
     />
   ) : undefined
   const hasDefaultToolbarContent = Boolean(
-    title ||
-      description ||
-      defaultSearch ||
-      resolvedFilters ||
-      resolvedSummary ||
-      toolbarActions ||
-      shouldShowColumnVisibilityInToolbar ||
-      shouldShowRefresh ||
+    title ||
+      description ||
+      defaultSearch ||
+      resolvedFilters ||
+      resolvedSummary ||
+      toolbarActions ||
+      shouldShowColumnVisibilityInToolbar ||
+      shouldShowRefresh ||
       shouldShowExport ||
       defaultSelectionActions
   )
@@ -381,6 +452,17 @@ function DataTable<TData, TValue = unknown>({
   const showPagination = Boolean(paginationConfig && !paginationConfig.hidden)
   const shouldRenderSkeleton = isLoading && loadingVariant === "skeleton"
 
+  const renderVirtualSpacer = (key: string, height: number) =>
+    height > 0 ? (
+      <TableRow key={key} aria-hidden="true" className="pointer-events-none border-0 hover:bg-transparent">
+        <TableCell
+          colSpan={visibleColumnCount}
+          className="border-0 p-0"
+          style={{ height }}
+        />
+      </TableRow>
+    ) : null
+
   const renderStateRow = (children: React.ReactNode) => (
     <TableRow>
       <TableCell colSpan={visibleColumnCount} className="p-0">
@@ -413,28 +495,93 @@ function DataTable<TData, TValue = unknown>({
       </TableRow>
     ))
 
-  const stateContent = shouldRenderSkeleton ? null : isLoading ? (
-    <LoadingState label="Loading data..." {...loadingState} />
-  ) : isError ? (
-    <DataState status="error" title="Could not load data" description="Please try again." variant="plain" {...errorState} />
-  ) : rows.length === 0 ? (
-    <DataState status="empty" variant="plain" {...emptyState} />
-  ) : null
+  const stateContent = shouldRenderSkeleton ? null : isLoading ? (
+    <LoadingState label="Loading data..." {...loadingState} />
+  ) : isError ? (
+    <DataState status="error" title="Could not load data" description="Please try again." variant="plain" {...errorState} />
+  ) : rows.length === 0 ? (
+    <DataState status="empty" variant="plain" {...emptyState} />
+  ) : null
+
+  const renderDataRow = (row: Row<TData>, rowIndex: number, virtualRow?: VirtualItem) => {
+    const rowDisabled = getRowDisabled?.(row) ?? false
+
+    return (
+      <React.Fragment key={row.id}>
+        <TableRow
+          ref={
+            virtualRow && virtualizationConfig?.measureRows !== false
+              ? rowVirtualizer.measureElement
+              : undefined
+          }
+          data-index={virtualRow?.index}
+          data-state={row.getIsSelected() ? "selected" : undefined}
+          data-striped={striped && rowIndex % 2 === 1 ? "true" : undefined}
+          data-disabled={rowDisabled || undefined}
+          className={cn(
+            onRowClick && !rowDisabled && "cursor-pointer",
+            !rowDisabled && "transition-colors hover:bg-[color:color-mix(in_oklch,var(--primary),transparent_96%)] data-[state=selected]:bg-[color:color-mix(in_oklch,var(--primary),transparent_90%)]",
+            rowDisabled && "pointer-events-none opacity-55",
+            getRowClassName(row, rowClassName)
+          )}
+          onClick={() => {
+            if (!rowDisabled) onRowClick?.(row)
+          }}
+          onDoubleClick={() => {
+            if (!rowDisabled) onRowDoubleClick?.(row)
+          }}
+        >
+          {row.getVisibleCells().map((cell) => {
+            const renderedCell = flexRender(cell.column.columnDef.cell, cell.getContext())
+
+            return (
+              <TableCell
+                key={cell.id}
+                style={{
+                  ...(cell.column.getIsPinned() === "left"
+                    ? { left: `${cell.column.getStart("left")}px`, position: "sticky", zIndex: 10 }
+                    : {}),
+                  ...(cell.column.getIsPinned() === "right"
+                    ? { right: `${cell.column.getAfter("right")}px`, position: "sticky", zIndex: 10 }
+                    : {}),
+                }}
+                className={cn(
+                  densityCellClassName[density],
+                  cell.column.getIsPinned() && "bg-card shadow-[1px_0_0_var(--border)]",
+                  bordered && "border-r last:border-r-0",
+                  getCellClassName(cell, cellClassName)
+                )}
+              >
+                {isEmptyCellContent(renderedCell) ? cellFallback : renderedCell}
+              </TableCell>
+            )
+          })}
+        </TableRow>
+        {row.getIsExpanded() && renderExpandedRow ? (
+          <TableRow className="bg-muted/50 hover:bg-muted/50">
+            <TableCell colSpan={row.getVisibleCells().length}>
+              {renderExpandedRow(row)}
+            </TableCell>
+          </TableRow>
+        ) : null}
+      </React.Fragment>
+    )
+  }
 
   return (
     <div data-slot="data-table" className={cn("grid gap-3", className)} {...props}>
       {hasToolbar &&
         (resolvedToolbar ?? (
-          <DataTableToolbar
-            title={title}
-            description={description}
-            search={defaultSearch}
-            filters={resolvedFilters}
-            summary={resolvedSummary}
-            actions={defaultActions}
-            selectionActions={defaultSelectionActions}
-            selectedCount={selectedRowCount}
-            totalCount={paginationConfig ? paginationConfig.rowCount ?? data.length : data.length}
+          <DataTableToolbar
+            title={title}
+            description={description}
+            search={defaultSearch}
+            filters={resolvedFilters}
+            summary={resolvedSummary}
+            actions={defaultActions}
+            selectionActions={defaultSelectionActions}
+            selectedCount={selectedRowCount}
+            totalCount={paginationConfig ? paginationConfig.rowCount ?? data.length : data.length}
             variant="plain"
             {...resolvedToolbarProps}
           />
@@ -456,18 +603,31 @@ function DataTable<TData, TValue = unknown>({
         data-density={density}
         data-striped={striped || undefined}
         data-bordered={bordered || undefined}
+        data-virtualized={virtualizationEnabled || undefined}
         className={cn(
-          "overflow-hidden rounded-[var(--aui-card-radius,var(--radius-lg))] border border-[color:var(--aui-card-border,var(--border))] bg-card shadow-[var(--aui-card-shadow,0_10px_24px_rgba(15,23,42,0.07))] backdrop-blur",
+          "overflow-hidden rounded-[var(--aui-card-radius,var(--radius-lg))] border border-[color:var(--aui-card-border,var(--border))] bg-card shadow-[var(--aui-card-shadow,0_10px_24px_rgba(15,23,42,0.07))] backdrop-blur",
           renderMobileCard && "hidden md:block",
           tableWrapperClassName
         )}
       >
         <Table
-          containerClassName="rounded-none border-0 bg-transparent shadow-none ring-0"
+          containerRef={tableScrollRef}
+          containerStyle={
+            virtualizationEnabled
+              ? { height: virtualizationHeight, overscrollBehavior: "contain" }
+              : undefined
+          }
+          containerClassName={cn(
+            "rounded-none border-0 bg-transparent shadow-none ring-0",
+            virtualizationEnabled && "overflow-auto"
+          )}
           className={cn("text-[0.95rem]", tableClassName)}
+          aria-rowcount={rows.length}
         >
           <TableHeader
-            className={cn(stickyHeader && "sticky top-0 z-10 shadow-sm backdrop-blur")}
+            className={cn(
+              (stickyHeader || virtualizationEnabled) && "sticky top-0 z-10 shadow-sm backdrop-blur"
+            )}
           >
             {table.getHeaderGroups().map((headerGroup) => (
               <TableRow key={headerGroup.id}>
@@ -485,8 +645,8 @@ function DataTable<TData, TValue = unknown>({
                     }}
                       className={cn(
                         densityHeadClassName[density],
-                        "bg-[color:color-mix(in_oklch,var(--card),var(--background)_10%)] text-muted-foreground",
-                        stickyHeader && "bg-[color:color-mix(in_oklch,var(--card),transparent_12%)] backdrop-blur",
+                        "bg-[color:color-mix(in_oklch,var(--card),var(--background)_10%)] text-muted-foreground",
+                        (stickyHeader || virtualizationEnabled) && "bg-[color:color-mix(in_oklch,var(--card),transparent_12%)] backdrop-blur",
                         header.column.getIsPinned() && "bg-card shadow-[1px_0_0_var(--border)]",
                         bordered && "border-r last:border-r-0",
                         getHeaderCellClassName(header, headerCellClassName)
@@ -505,64 +665,15 @@ function DataTable<TData, TValue = unknown>({
               ? renderStateRow(stateContent)
               : shouldRenderSkeleton
                 ? renderSkeletonRows()
-                : rows.map((row, rowIndex) => {
-                    const rowDisabled = getRowDisabled?.(row) ?? false
-
-                    return (
-                      <React.Fragment key={row.id}>
-                        <TableRow
-                          data-state={row.getIsSelected() ? "selected" : undefined}
-                        data-striped={striped && rowIndex % 2 === 1 ? "true" : undefined}
-                        data-disabled={rowDisabled || undefined}
-                        className={cn(
-                          onRowClick && !rowDisabled && "cursor-pointer",
-                          !rowDisabled && "transition-colors hover:bg-[color:color-mix(in_oklch,var(--primary),transparent_96%)] data-[state=selected]:bg-[color:color-mix(in_oklch,var(--primary),transparent_90%)]",
-                          rowDisabled && "pointer-events-none opacity-55",
-                          getRowClassName(row, rowClassName)
-                        )}
-                        onClick={() => {
-                          if (!rowDisabled) onRowClick?.(row)
-                        }}
-                        onDoubleClick={() => {
-                          if (!rowDisabled) onRowDoubleClick?.(row)
-                        }}
-                      >
-                        {row.getVisibleCells().map((cell) => {
-                          const renderedCell = flexRender(cell.column.columnDef.cell, cell.getContext())
-
-                          return (
-                            <TableCell
-                              key={cell.id}
-                              style={{
-                                ...(cell.column.getIsPinned() === "left"
-                                  ? { left: `${cell.column.getStart("left")}px`, position: "sticky", zIndex: 10 }
-                                  : {}),
-                                ...(cell.column.getIsPinned() === "right"
-                                  ? { right: `${cell.column.getAfter("right")}px`, position: "sticky", zIndex: 10 }
-                                  : {}),
-                              }}
-                              className={cn(
-                                densityCellClassName[density],
-                                cell.column.getIsPinned() && "bg-card shadow-[1px_0_0_var(--border)]",
-                                bordered && "border-r last:border-r-0",
-                                getCellClassName(cell, cellClassName)
-                              )}
-                            >
-                              {isEmptyCellContent(renderedCell) ? cellFallback : renderedCell}
-                            </TableCell>
-                          )
-                        })}
-                      </TableRow>
-                      {row.getIsExpanded() && renderExpandedRow && (
-                        <TableRow className="bg-muted/50 hover:bg-muted/50">
-                          <TableCell colSpan={row.getVisibleCells().length}>
-                            {renderExpandedRow(row)}
-                          </TableCell>
-                        </TableRow>
-                      )}
-                    </React.Fragment>
-                  )
-                })}
+                : virtualizationEnabled
+                  ? [
+                      renderVirtualSpacer("virtual-top", virtualPaddingTop),
+                      ...renderedVirtualRows.map((virtualRow) =>
+                        renderDataRow(rows[virtualRow.index], virtualRow.index, virtualRow)
+                      ),
+                      renderVirtualSpacer("virtual-bottom", virtualPaddingBottom),
+                    ]
+                  : rows.map((row, rowIndex) => renderDataRow(row, rowIndex))}
       </TableBody>
         </Table>