@jmruthers/pace-core 0.5.135 → 0.5.137

package/src/components/DataTable/components/PaginationControls.tsx

@@ -11,7 +11,7 @@ import {
   Database,
   Zap
 } from 'lucide-react';
-import { cn } from '../../../utils/cn';
+import { cn } from '../../../utils/core/cn';
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '../../Select/Select';
 import { getPaginationBinding, getPageSizeOptions } from '../utils/paginationUtils';
 import type { PaginationMode, ServerSideResponse, DataRecord } from '../types';
@@ -108,6 +108,7 @@ export function PaginationControls<TData extends DataRecord>({
         selectedText={currentPageSize?.toString() || '10'}
         onValueChange={(value) => setPageSize(Number(value))}
         disabled={isLoading}
+        direction="up"
         className="w-36 h-8"
       >
        

package/src/components/DataTable/components/UnifiedTableBody.tsx

@@ -22,11 +22,12 @@ import { EditableRow } from './EditableRow';
 import { getTableCellClasses, getTableHeadClasses, getTableRowClasses } from '../styles';
 import { Input } from '../../Input/Input';
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, SelectGroup, SelectLabel, SelectSeparator } from '../../Select/Select';
-import { createLogger } from '../../../utils/logger';
+import { createLogger } from '../../../utils/core/logger';
 import type {
   AggregateConfig,
   DataRecord,
   DataTableAction,
+  DataTableColumn,
   EditableColumnDef,
   EmptyStateConfig,
   HierarchicalConfig,
@@ -215,20 +216,6 @@ function SelectEditField<TData extends DataRecord>({
           // Always show create option when there's a search term (user might want to create even if matches exist)
           const shouldShow = isCreatable && !!columnDef.onCreateNew;
           
-          // Debug logging for creatable select
-          if (import.meta.env.MODE === 'development' && isCreatable) {
-            logger.debug('[SelectEditField] Creatable select check:', {
-              searchTerm: currentSearch,
-              searchLower,
-              hasMatch,
-              isCreatable,
-              hasOnCreateNew: !!columnDef.onCreateNew,
-              shouldShow,
-              fieldOptionsCount: columnDef.fieldOptions?.length || 0,
-              note: 'Create option shows when search term exists, regardless of matches'
-            });
-          }
-          
           setShowCreateOption(shouldShow);
         } else {
           setShowCreateOption(false);
@@ -529,6 +516,7 @@ const RowComponent = React.memo(({
 }: RowProps) => {
   const rowRef = useRef<HTMLTableRowElement>(null);
   const firstInputRef = useRef<HTMLInputElement>(null);
+  const logger = React.useMemo(() => createLogger('RowComponent'), []);
   
   const rowId = getRowIdSafe(row.original, row.index, getRowId);
   
@@ -577,33 +565,115 @@ const RowComponent = React.memo(({
     const groupValue = row.getValue(grouping[0]);
     const subRowsCount = row.subRows?.length || 0;
     const isExpanded = row.getIsExpanded();
+    const visibleCells = row.getVisibleCells();
+    
+    // Get child rows for aggregation (convert TanStack Row to original data)
+    const childRows: DataRecord[] = row.subRows?.map((subRow: any) => subRow.original) || [];
     
-    // Only render the group header row - sub-rows will be rendered by the standard rendering loop
+    // Render individual cells for each column with aggregation support
     return (
       <tr className="bg-sec-50 hover:bg-sec-100" style={style}>
-        <td 
-          className={getTableCellClasses({
-            isCompact: true,
-            className: "px-3 py-2 flex items-center font-medium"
-          })} 
-          colSpan={row.getAllCells().length}
-        >
-          <Button
-            variant="ghost"
-            size="sm"
-            onClick={() => row.toggleExpanded()}
-            className="p-0 h-auto mr-2"
-          >
-            {isExpanded ? (
-              <ChevronDown className="h-4 w-4" />
-            ) : (
-              <ChevronRight className="h-4 w-4" />
-            )}
-          </Button>
-          <span className="text-sm">
-            {String(groupValue)} ({subRowsCount} items)
-          </span>
-        </td>
+        {visibleCells.map((cell: any, cellIndex: number) => {
+          const columnDef = cell.column.columnDef as DataTableColumn<DataRecord>;
+          const isGroupingColumn = cellIndex === 0 || grouping.includes(cell.column.id || '');
+          
+          // For the grouping column, show the group header with expand/collapse
+          if (isGroupingColumn && cellIndex === 0) {
+            return (
+              <td
+                key={cell.id}
+                className={getTableCellClasses({
+                  isCompact: true,
+                  className: "px-3 py-2 flex items-center font-medium"
+                })}
+              >
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  onClick={() => row.toggleExpanded()}
+                  className="p-0 h-auto mr-2"
+                >
+                  {isExpanded ? (
+                    <ChevronDown className="h-4 w-4" />
+                  ) : (
+                    <ChevronRight className="h-4 w-4" />
+                  )}
+                </Button>
+                <span className="text-sm">
+                  {String(groupValue)} ({subRowsCount} items)
+                </span>
+              </td>
+            );
+          }
+          
+          // For other columns, check if they have aggregation functions
+          if (columnDef.aggregateFn && childRows.length > 0) {
+            try {
+              // Call the aggregation function with child rows
+              const aggregatedValue = columnDef.aggregateFn(childRows, columnDef);
+              
+              // Use aggregateCell renderer if provided, otherwise use regular cell renderer
+              let cellContent: React.ReactNode;
+              if (columnDef.aggregateCell) {
+                cellContent = columnDef.aggregateCell(aggregatedValue, childRows, columnDef);
+              } else if (columnDef.cell) {
+                // Use regular cell renderer with a mock cell context
+                // Create a mock cell object for the aggregated value
+                const mockCell = {
+                  ...cell,
+                  getValue: () => aggregatedValue,
+                  renderValue: () => aggregatedValue,
+                };
+                cellContent = flexRender(columnDef.cell, {
+                  ...mockCell,
+                  row: row,
+                  column: cell.column,
+                  cell: mockCell,
+                  getValue: () => aggregatedValue,
+                  renderValue: () => aggregatedValue,
+                });
+              } else {
+                // Fallback to displaying the raw value
+                cellContent = aggregatedValue != null ? String(aggregatedValue) : '';
+              }
+              
+              return (
+                <td
+                  key={cell.id}
+                  className={getTableCellClasses({
+                    isCompact: true,
+                    className: `px-3 py-2 ${cell.column.columnDef.meta?.align === 'right' ? 'text-right' : ''}`
+                  })}
+                >
+                  {cellContent}
+                </td>
+              );
+            } catch (error) {
+              // If aggregation fails, show empty cell
+              logger.warn('Error in aggregation function:', error);
+              return (
+                <td
+                  key={cell.id}
+                  className={getTableCellClasses({
+                    isCompact: true,
+                    className: "px-3 py-2"
+                  })}
+                />
+              );
+            }
+          }
+          
+          // For columns without aggregation, show empty cell
+          return (
+            <td
+              key={cell.id}
+              className={getTableCellClasses({
+                isCompact: true,
+                className: "px-3 py-2"
+              })}
+            />
+          );
+        })}
       </tr>
     );
   }
@@ -774,49 +844,6 @@ export function UnifiedTableBody<TData extends Record<string, any>>({
   const rows = table.getRowModel().rows;
   const headerGroups = table.getHeaderGroups();
 
-  // Diagnostic logging when rows are empty but data exists
-  useEffect(() => {
-    if (rows.length === 0 && dataLength > 0) {
-      const tableState = table.getState();
-      const pagination = tableState.pagination;
-      const columnFilters = tableState.columnFilters;
-      const globalFilter = tableState.globalFilter;
-      const coreRows = table.getCoreRowModel().rows;
-      const prePaginationRows = table.getPrePaginationRowModel?.()?.rows || [];
-      const filteredRows = table.getFilteredRowModel?.()?.rows || [];
-      const sortedRows = table.getSortedRowModel?.()?.rows || [];
-      const rowCount = table.getRowCount();
-      const pageCount = table.getPageCount();
-      
-      logger.warn('Rows empty but data exists!', {
-        dataLength,
-        rowsLength: rows.length,
-        coreRowsLength: coreRows.length,
-        prePaginationRowsLength: prePaginationRows.length,
-        filteredRowsLength: filteredRows.length,
-        sortedRowsLength: sortedRows.length,
-        rowCount,
-        pageCount,
-        pagination: {
-          pageIndex: pagination.pageIndex,
-          pageSize: pagination.pageSize,
-        },
-        columnFilters,
-        globalFilter,
-        tableOptions: {
-          getCoreRowModel: !!table.options.getCoreRowModel,
-          getFilteredRowModel: !!table.options.getFilteredRowModel,
-          getSortedRowModel: !!table.options.getSortedRowModel,
-          getPaginationRowModel: !!table.options.getPaginationRowModel,
-          manualPagination: table.options.manualPagination,
-          manualFiltering: table.options.manualFiltering,
-          manualSorting: table.options.manualSorting,
-        },
-        tableDataLength: table.options.data?.length || 0,
-      });
-    }
-  }, [rows.length, dataLength, table, logger]);
-
   // CRITICAL FIX: Virtual scrolling requires a scroll container (parentRef).
   // If virtualization is enabled but no scroll container exists, fall back to standard rendering.
   // This fixes the bug where rows exist but nothing renders when virtualization is enabled.