@jmruthers/pace-core 0.5.136 → 0.5.139

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

@@ -0,0 +1,513 @@
+/**
+ * @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 } from '@tanstack/react-table';
+import { cn } from '../../../utils/cn';
+import type { DataRecord } from '../types';
+
+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(({ cell, style }: { cell: any; 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: any; 
+  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: any) => (
+        <MemoizedCell
+          key={cell.id} 
+          cell={cell}
+          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}
+                    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?: any[];
+  enableEditing?: boolean;
+  enableDeletion?: boolean;
+  onEditRow?: (row: TData, data: Partial<TData>) => void;
+  onDeleteRow?: (row: TData) => void;
+  getRowId?: (row: any) => string;
+}
+
+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 any;
+                return (
+                  <MemoizedRow
+                    key={row.id}
+                    row={row}
+                    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>
+  );
+} 

package/src/components/DataTable/components/__tests__/AccessDeniedPage.test.tsx

@@ -567,75 +567,21 @@ describe('[component] AccessDeniedPage', () => {
       expect(handleRetry).toHaveBeenCalledTimes(3);
     });
 
-    // Move this test to the very end - it modifies global state and can break subsequent tests
-    // This test MUST run last to avoid breaking other tests
+    // Test SSR behavior where window might be undefined
+    // NOTE: This test is skipped because React DOM and user-event require window to exist.
+    // In jsdom, window is always defined, and stubbing it as undefined breaks React's internal
+    // event system. SSR behavior where window is undefined is tested in actual SSR environments
+    // (Next.js, Remix, etc.) where the component is server-rendered.
+    // 
+    // If you need to test SSR behavior, use a proper SSR testing setup or test in actual SSR environments.
     it.skip('handles undefined window object gracefully', () => {
-      // Save original values
-      const originalWindow = typeof window !== 'undefined' ? window : undefined;
-      const originalNavigator = typeof navigator !== 'undefined' ? navigator : undefined;
-      
-      // Store references before deletion
-      const savedWindow = originalWindow;
-      const savedNavigator = originalNavigator || {
-        clipboard: {
-          writeText: vi.fn(),
-          readText: vi.fn(),
-        },
-      };
-
-      // @ts-expect-error - Testing edge case
-      if (typeof global !== 'undefined') {
-        delete global.window;
-        delete global.navigator;
-      }
-
-      // Ensure navigator still exists on globalThis for userEvent cleanup
-      if (typeof globalThis !== 'undefined') {
-        Object.defineProperty(globalThis, 'navigator', {
-          value: savedNavigator,
-          writable: true,
-          configurable: true,
-        });
-      }
-
-      expect(() => {
-        render(<AccessDeniedPage resource="users" />);
-      }).not.toThrow();
-
-      // CRITICAL: Fully restore window and navigator to prevent breaking subsequent tests
-      if (typeof global !== 'undefined') {
-        if (savedWindow) {
-          global.window = savedWindow;
-        } else if (typeof window !== 'undefined') {
-          // Ensure window is restored even if it was undefined
-          Object.defineProperty(global, 'window', {
-            value: window,
-            writable: true,
-            configurable: true,
-          });
-        }
-        
-        if (savedNavigator) {
-          global.navigator = savedNavigator;
-        }
-      }
-      
-      // Ensure navigator on globalThis and window
-      if (typeof globalThis !== 'undefined') {
-        Object.defineProperty(globalThis, 'navigator', {
-          value: savedNavigator,
-          writable: true,
-          configurable: true,
-        });
-      }
-      
-      if (typeof window !== 'undefined') {
-        Object.defineProperty(window, 'navigator', {
-          value: savedNavigator,
-          writable: true,
-          configurable: true,
-        });
-      }
+      // This test cannot run in jsdom because:
+      // 1. React DOM requires window.event to exist
+      // 2. user-event cleanup hooks require window.navigator
+      // 3. jsdom always provides a window object
+      // 
+      // SSR behavior is validated in actual SSR environments where window is truly undefined
+      // during server-side rendering.
     });
   });
 

package/src/components/DataTable/components/__tests__/ColumnFilter.test.tsx

@@ -83,6 +83,10 @@ const createMockColumn = (overrides: Partial<Column<any, unknown>> = {}): Column
   getFilterValue: vi.fn(() => undefined),
   setFilterValue: vi.fn(),
   getCanFilter: vi.fn(() => true),
+  columnDef: {
+    header: undefined,
+    accessorKey: undefined,
+  },
   ...overrides,
 } as unknown as Column<any, unknown>);
 
@@ -133,6 +137,64 @@ describe('[component] ColumnFilter', () => {
       const input = screen.getByPlaceholderText('Search...');
       expect(input).toBeInTheDocument();
     });
+
+    it('uses column header text for placeholder when header is a string', () => {
+      const column = createMockColumn({
+        columnDef: {
+          header: 'Bulk Distribution',
+          accessorKey: 'item_bulkdistribution',
+        },
+      });
+
+      render(<ColumnFilter column={column} />);
+
+      const input = screen.getByPlaceholderText('Filter Bulk Distribution...');
+      expect(input).toBeInTheDocument();
+    });
+
+    it('falls back to accessorKey when header is not provided', () => {
+      const column = createMockColumn({
+        columnDef: {
+          header: undefined,
+          accessorKey: 'logistics_name',
+        },
+      });
+
+      render(<ColumnFilter column={column} />);
+
+      const input = screen.getByPlaceholderText('Filter logistics_name...');
+      expect(input).toBeInTheDocument();
+    });
+
+    it('falls back to column id when header and accessorKey are not provided', () => {
+      const column = createMockColumn({
+        id: 'fallback-column',
+        columnDef: {
+          header: undefined,
+          accessorKey: undefined,
+        },
+      });
+
+      render(<ColumnFilter column={column} />);
+
+      const input = screen.getByPlaceholderText('Filter fallback-column...');
+      expect(input).toBeInTheDocument();
+    });
+
+    it('falls back to accessorKey when header is a function', () => {
+      const column = createMockColumn({
+        columnDef: {
+          header: () => 'Function Header',
+          accessorKey: 'unit_name',
+        },
+      });
+
+      render(<ColumnFilter column={column} />);
+
+      // When header is a function, should fall back to accessorKey
+      const input = screen.getByPlaceholderText('Filter unit_name...');
+      expect(input).toBeInTheDocument();
+    });
   });
 
   describe('Text Filter', () => {