@jmruthers/pace-core 0.6.5 → 0.6.7

package/src/components/DataTable/components/VirtualizedDataTable.tsx

@@ -1,525 +0,0 @@
-/**
- * @file Virtualized DataTable Component
- * @package @jmruthers/pace-core
- * @module Components/DataTable/VirtualizedDataTable
- * @since 0.3.0
- */
-
-import React, { useMemo, useRef, useCallback, memo, useLayoutEffect, useState } from 'react';
-import { useVirtualizer } from '@tanstack/react-virtual';
-import { flexRender, type Table as TanStackTable, type Cell, type Row } from '@tanstack/react-table';
-import { cn } from '../../../utils/core/cn';
-import type { DataRecord } from '../types';
-
-/**
- * Props for the VirtualizedDataTable component.
- * @template TData - The type of data records in the table
- */
-export interface VirtualizedDataTableProps<TData extends DataRecord> {
-  table: TanStackTable<TData>;
-  height?: number;
-  overscan?: number;
-  className?: string;
-  onVisibilityChange?: (visibleRange: { start: number; end: number }) => void;
-}
-
-/**
- * Memoized cell component for performance
- */
-const MemoizedCell = memo(<TData extends DataRecord>({ cell, style }: { cell: Cell<TData, unknown>; style?: React.CSSProperties }) => {
-  return (
-    <td
-      key={cell.id}
-      className={cn(
-        "px-4 py-2 text-sm border-b border-gray-200 overflow-hidden",
-        cell.column?.getCanSort && cell.column.getCanSort() && "cursor-pointer select-none"
-      )}
-      style={style}
-    >
-      {flexRender(cell.column?.columnDef?.cell, cell.getContext?.() || {})}
-    </td>
-  );
-});
-
-MemoizedCell.displayName = 'MemoizedCell';
-
-/**
- * Memoized row component for performance
- */
-const MemoizedRow = memo(({ row, style }: { 
-  row: Row<DataRecord>; 
-  style: React.CSSProperties;
-}) => {
-  return (
-    <tr
-      key={row.id}
-      className={cn(
-              "hover:bg-app-sec-50 transition-colors",
-      row.getIsSelected && row.getIsSelected() && "bg-app-main-50"
-      )}
-      style={style}
-      data-testid={`data-table-row-${row.id}`}
-    >
-      {row.getVisibleCells && row.getVisibleCells().map((cell) => (
-        <MemoizedCell
-          key={cell.id} 
-          cell={cell as unknown as Cell<DataRecord, unknown>}
-          style={{}}
-        />
-      ))}
-    </tr>
-  );
-});
-
-MemoizedRow.displayName = 'MemoizedRow';
-
-/**
- * High-performance virtualized DataTable component with fixed column alignment
- */
-export function VirtualizedDataTable<TData extends DataRecord>({
-  table,
-  height = 400,
-  overscan = 5,
-  className,
-  onVisibilityChange
-}: VirtualizedDataTableProps<TData>) {
-  const parentRef = useRef<HTMLDivElement>(null);
-  const headerRef = useRef<HTMLTableElement>(null);
-  const bodyRef = useRef<HTMLTableElement>(null);
-  const rows = table.getRowModel().rows;
-
-  // Virtual scrolling setup
-  const virtualizer = useVirtualizer({
-    count: rows.length,
-    getScrollElement: () => parentRef.current,
-    estimateSize: () => 40, // Estimated row height
-    overscan,
-  });
-
-  const virtualRows = virtualizer.getVirtualItems();
-
-  // Get table headers
-  const headerGroups = table.getHeaderGroups();
-
-
-  // Notify parent of visibility changes
-  const handleVisibilityChange = useCallback(() => {
-    if (virtualRows.length > 0 && onVisibilityChange) {
-      const start = virtualRows[0].index;
-      const end = virtualRows[virtualRows.length - 1].index;
-      onVisibilityChange({ start, end });
-    }
-  }, [virtualRows, onVisibilityChange]);
-
-  // Call visibility change handler when virtual rows change
-  React.useEffect(() => {
-    handleVisibilityChange();
-  }, [handleVisibilityChange]);
-
-  // Calculate total size for proper scrollbar
-  const totalSize = virtualizer.getTotalSize();
-
-  // Handle empty state
-  if (rows.length === 0) {
-    return (
-      <div className={cn("border rounded-lg overflow-hidden", className)}>
-        {/* Fixed Header */}
-        <div className="bg-app-sec-50 border-b">
-          <table ref={headerRef} className="w-full table-fixed">
-            <thead>
-              {headerGroups.map((headerGroup) => (
-                <tr key={headerGroup.id}>
-                  {headerGroup.headers.map((header) => (
-                    <th
-                      key={header.id}
-                      className={cn(
-                                              "px-4 py-3 text-left text-xs font-medium text-app-sec-500 uppercase tracking-wider",
-                      header.column?.getCanSort && header.column.getCanSort() && "cursor-pointer select-none hover:bg-app-sec-100"
-                      )}
-                      style={{}}
-                      onClick={header.column?.getToggleSortingHandler ? header.column.getToggleSortingHandler() : undefined}
-                    >
-                      <div className="flex items-center space-x-1">
-                        {header.isPlaceholder
-                          ? null
-                          : flexRender(header.column?.columnDef?.header, header.getContext?.() || {})}
-                        {header.column?.getCanSort && header.column.getCanSort() && (
-                          <span className="ml-1">
-                            {{
-                              asc: '↑',
-                              desc: '↓',
-                            }[header.column?.getIsSorted ? header.column.getIsSorted() as string : ''] ?? '↕'}
-                          </span>
-                        )}
-                      </div>
-                    </th>
-                  ))}
-                </tr>
-              ))}
-            </thead>
-          </table>
-        </div>
-        
-        {/* Empty State */}
-        <div className="flex items-center justify-center py-12">
-          <div className="text-center">
-            <div className="text-app-sec-400 text-lg mb-2">📊</div>
-            <p className="text-app-sec-500">No data available</p>
-          </div>
-        </div>
-      </div>
-    );
-  }
-
-  return (
-    <div className={cn("border rounded-lg overflow-hidden", className)}>
-      {/* Fixed Header */}
-      <div className="bg-app-sec-50 border-b sticky top-0 z-10">
-        <table ref={headerRef} className="w-full table-fixed">
-          <thead>
-            {headerGroups.map((headerGroup) => (
-              <tr key={headerGroup.id}>
-                {headerGroup.headers.map((header) => (
-                  <th
-                    key={header.id}
-                    className={cn(
-                      "px-4 py-3 text-left text-xs font-medium text-app-sec-500 uppercase tracking-wider",
-                      header.column?.getCanSort && header.column.getCanSort() && "cursor-pointer select-none hover:bg-app-sec-100"
-                    )}
-                    style={{}}
-                    onClick={header.column?.getToggleSortingHandler ? header.column.getToggleSortingHandler() : undefined}
-                  >
-                    <div className="flex items-center space-x-1">
-                      {header.isPlaceholder
-                        ? null
-                        : flexRender(header.column?.columnDef?.header, header.getContext?.() || {})}
-                      {header.column?.getCanSort && header.column.getCanSort() && (
-                        <span className="ml-1">
-                          {{
-                            asc: '↑',
-                            desc: '↓',
-                          }[header.column?.getIsSorted ? header.column.getIsSorted() as string : ''] ?? '↕'}
-                        </span>
-                      )}
-                    </div>
-                  </th>
-                ))}
-              </tr>
-            ))}
-          </thead>
-        </table>
-      </div>
-
-      {/* Virtualized Body */}
-      <div
-        ref={parentRef}
-        className="overflow-auto"
-        style={{ height: `${height}px` }}
-      >
-        <div
-          style={{
-            height: `${totalSize}px`,
-            width: '100%',
-            position: 'relative',
-          }}
-        >
-          <table ref={bodyRef} className="w-full table-fixed">
-            <tbody>
-              {virtualRows.map((virtualRow) => {
-                const row = rows[virtualRow.index];
-                if (!row) return null;
-                
-                return (
-                  <MemoizedRow
-                    key={row.id}
-                    row={row as unknown as Row<DataRecord>}
-                    style={{
-                      position: 'absolute',
-                      top: 0,
-                      left: 0,
-                      width: '100%',
-                      height: `${virtualRow.size}px`,
-                      transform: `translateY(${virtualRow.start}px)`,
-                    }}
-                  />
-                );
-              })}
-            </tbody>
-          </table>
-        </div>
-      </div>
-
-      {/* Footer with row count */}
-      <div className="bg-app-sec-50 border-t px-4 py-2">
-        <div className="flex items-center justify-between text-sm text-app-sec-500">
-          <span>
-            Showing {virtualRows.length > 0 ? virtualRows[0].index + 1 : 0} to{' '}
-            {virtualRows.length > 0 ? virtualRows[virtualRows.length - 1].index + 1 : 0} of{' '}
-            {rows.length} rows
-          </span>
-          <span>
-            Virtual rows: {virtualRows.length} / {rows.length}
-          </span>
-        </div>
-      </div>
-    </div>
-  );
-}
-
-/**
- * Performance-optimized virtualized table with additional features
- */
-export interface EnhancedVirtualizedDataTableProps<TData extends DataRecord> 
-  extends VirtualizedDataTableProps<TData> {
-  enableRowSelection?: boolean;
-  enableHover?: boolean;
-  stickyHeader?: boolean;
-  loadingRows?: number;
-  isLoading?: boolean;
-  emptyMessage?: string;
-  // Additional props for DataTable integration
-  variant?: 'default' | 'compact' | 'spacious';
-  enableGrouping?: boolean;
-  actions?: unknown[];
-  enableEditing?: boolean;
-  enableDeletion?: boolean;
-  onEditRow?: (row: TData, data: Partial<TData>) => void;
-  onDeleteRow?: (row: TData) => void;
-  getRowId?: (row: TData) => string;
-}
-
-/**
- * Enhanced virtualized DataTable component.
- * Provides virtual scrolling for large datasets with performance optimizations.
- * 
- * @template TData - The type of data records in the table
- * @param props - Virtualized table configuration
- * @returns The rendered virtualized table
- */
-export function EnhancedVirtualizedDataTable<TData extends DataRecord>({
-  table,
-  height = 400,
-  overscan = 5,
-  className,
-  enableRowSelection = false,
-  enableHover = true,
-  stickyHeader = true,
-  loadingRows = 10,
-  isLoading = false,
-  emptyMessage = "No data available",
-  onVisibilityChange,
-  // Additional props for DataTable integration
-  variant = 'default',
-  enableGrouping = false,
-  actions = [],
-  enableEditing = false,
-  enableDeletion = false,
-  onEditRow,
-  onDeleteRow,
-  getRowId
-}: EnhancedVirtualizedDataTableProps<TData>) {
-  const parentRef = useRef<HTMLDivElement>(null);
-  const headerRef = useRef<HTMLTableElement>(null);
-  const bodyRef = useRef<HTMLTableElement>(null);
-  const rows = table.getRowModel().rows;
-
-  // Show loading skeleton if loading
-  const displayRows = useMemo(() => {
-    if (isLoading) {
-      return Array.from({ length: loadingRows }, (_, index) => ({
-        id: `loading-${index}`,
-        isLoading: true,
-      }));
-    }
-    return rows;
-  }, [isLoading, loadingRows, rows]);
-
-  const virtualizer = useVirtualizer({
-    count: displayRows.length,
-    getScrollElement: () => parentRef.current,
-    estimateSize: () => 40,
-    overscan,
-  });
-
-  const virtualRows = virtualizer.getVirtualItems();
-  const headerGroups = table.getHeaderGroups();
-  const totalSize = virtualizer.getTotalSize();
-
-
-  // Handle visibility changes
-  React.useEffect(() => {
-    if (virtualRows.length > 0 && onVisibilityChange && !isLoading) {
-      const start = virtualRows[0].index;
-      const end = virtualRows[virtualRows.length - 1].index;
-      onVisibilityChange({ start, end });
-    }
-  }, [virtualRows, onVisibilityChange, isLoading]);
-
-  // Loading row component
-  const LoadingRow = memo(({ style }: { style: React.CSSProperties }) => (
-    <tr style={style} className="animate-pulse">
-      {headerGroups[0]?.headers.map((header) => (
-        <td 
-          key={header.id} 
-          className="px-4 py-2 border-b border-app-sec-200"
-          style={{}}
-        >
-          <div className="h-4 bg-app-sec-200 rounded"></div>
-        </td>
-      ))}
-    </tr>
-  ));
-
-  LoadingRow.displayName = 'LoadingRow';
-
-  // Empty state
-  if (!isLoading && rows.length === 0) {
-    return (
-      <div className={cn("border rounded-lg overflow-hidden", className)} data-testid="enhanced-virtualized-table">
-        <div className="bg-app-sec-50 border-b">
-          <table ref={headerRef} className="w-full table-fixed">
-            <thead>
-              {headerGroups.map((headerGroup) => (
-                <tr key={headerGroup.id}>
-                  {headerGroup.headers.map((header) => (
-                    <th
-                      key={header.id}
-                      className="px-4 py-3 text-left text-xs font-medium text-app-sec-500 uppercase tracking-wider"
-                      style={{}}
-                    >
-                      {header.isPlaceholder
-                        ? null
-                        : flexRender(header.column?.columnDef?.header, header.getContext?.() || {})}
-                    </th>
-                  ))}
-                </tr>
-              ))}
-            </thead>
-          </table>
-        </div>
-        <div className="flex items-center justify-center py-12">
-          <div className="text-center">
-            <div className="text-app-sec-400 text-lg mb-2">📊</div>
-            <p className="text-app-sec-500">{emptyMessage}</p>
-          </div>
-        </div>
-      </div>
-    );
-  }
-
-  return (
-    <div className={cn("border rounded-lg overflow-hidden", className)} data-testid="enhanced-virtualized-table">
-      {/* Sticky Header */}
-      <div className={cn("bg-app-sec-50 border-b", stickyHeader && "sticky top-0 z-10")}>
-        <table ref={headerRef} className="w-full table-fixed">
-          <thead>
-            {headerGroups.map((headerGroup) => (
-              <tr key={headerGroup.id}>
-                {headerGroup.headers.map((header) => (
-                  <th
-                    key={header.id}
-                    className={cn(
-                      "px-4 py-3 text-left text-xs font-medium text-app-sec-500 uppercase tracking-wider",
-                      header.column?.getCanSort && header.column.getCanSort() && "cursor-pointer select-none hover:bg-app-sec-100"
-                    )}
-                    style={{}}
-                    onClick={header.column?.getToggleSortingHandler ? header.column.getToggleSortingHandler() : undefined}
-                  >
-                    <div className="flex items-center space-x-1">
-                      {header.isPlaceholder
-                        ? null
-                        : flexRender(header.column?.columnDef?.header, header.getContext?.() || {})}
-                      {header.column?.getCanSort && header.column.getCanSort() && (
-                        <span className="ml-1">
-                          {{
-                            asc: '↑',
-                            desc: '↓',
-                          }[header.column?.getIsSorted ? header.column.getIsSorted() as string : ''] ?? '↕'}
-                        </span>
-                      )}
-                    </div>
-                  </th>
-                ))}
-              </tr>
-            ))}
-          </thead>
-        </table>
-      </div>
-
-      {/* Virtualized Body */}
-      <div
-        ref={parentRef}
-        className="overflow-auto"
-        style={{ height: `${height}px` }}
-      >
-        <div
-          style={{
-            height: `${totalSize}px`,
-            width: '100%',
-            position: 'relative',
-          }}
-        >
-          <table ref={bodyRef} className="w-full table-fixed">
-            <tbody>
-              {virtualRows.map((virtualRow) => {
-                const displayRow = displayRows[virtualRow.index];
-                
-                if ('isLoading' in displayRow) {
-                  return (
-                    <LoadingRow
-                      key={displayRow.id}
-                      style={{
-                        position: 'absolute',
-                        top: 0,
-                        left: 0,
-                        width: '100%',
-                        height: `${virtualRow.size}px`,
-                        transform: `translateY(${virtualRow.start}px)`,
-                      }}
-                    />
-                  );
-                }
-
-                const row = displayRow as Row<TData>;
-                return (
-                  <MemoizedRow
-                    key={row.id}
-                    row={row as unknown as Row<DataRecord>}
-                    style={{
-                      position: 'absolute',
-                      top: 0,
-                      left: 0,
-                      width: '100%',
-                      height: `${virtualRow.size}px`,
-                      transform: `translateY(${virtualRow.start}px)`,
-                    }}
-                  />
-                );
-              })}
-            </tbody>
-          </table>
-        </div>
-      </div>
-
-      {/* Performance Footer */}
-      <div className="bg-app-sec-50 border-t px-4 py-2">
-        <div className="flex items-center justify-between text-sm text-app-sec-500">
-          <span>
-            {isLoading ? (
-              "Loading..."
-            ) : (
-              <>
-                Showing {virtualRows.length > 0 ? virtualRows[0].index + 1 : 0} to{' '}
-                {virtualRows.length > 0 ? virtualRows[virtualRows.length - 1].index + 1 : 0} of{' '}
-                {rows.length} rows
-              </>
-            )}
-          </span>
-          <span>
-            Virtual: {virtualRows.length} / {displayRows.length}
-          </span>
-        </div>
-      </div>
-    </div>
-  );
-}