@jmruthers/pace-core 0.5.79 → 0.5.81

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jmruthers/pace-core",
-  "version": "0.5.79",
+  "version": "0.5.81",
   "description": "Clean, modern React component library with Tailwind v4 styling and native utilities",
   "private": false,
   "publishConfig": {

package/src/components/DataTable/__tests__/styles.test.ts

@@ -51,7 +51,7 @@ describe('DataTable Styles', () => {
     });
 
     it('has correct table base styles', () => {
-      expect(tableStyles.table).toBe('w-full caption-bottom text-sm');
+      expect(tableStyles.table).toBe('w-full caption-top text-sm');
       expect(tableStyles.tableFixed).toBe('w-full table-fixed');
     });
 
@@ -219,7 +219,7 @@ describe('DataTable Styles', () => {
   describe('getTableClasses', () => {
     it('returns default table classes', () => {
       const result = getTableClasses();
-      expect(result).toBe('w-full caption-bottom text-sm');
+      expect(result).toBe('w-full caption-top text-sm');
     });
 
     it('returns fixed table classes when isFixed is true', () => {
@@ -229,17 +229,17 @@ describe('DataTable Styles', () => {
 
     it('returns compact variant classes', () => {
       const result = getTableClasses({ variant: 'compact' });
-      expect(result).toBe('w-full caption-bottom text-sm text-sm');
+      expect(result).toBe('w-full caption-top text-sm text-sm');
     });
 
     it('returns spacious variant classes', () => {
       const result = getTableClasses({ variant: 'spacious' });
-      expect(result).toBe('w-full caption-bottom text-sm text-base');
+      expect(result).toBe('w-full caption-top text-sm text-base');
     });
 
     it('adds custom className', () => {
       const result = getTableClasses({ className: 'custom-table-class' });
-      expect(result).toBe('w-full caption-bottom text-sm custom-table-class');
+      expect(result).toBe('w-full caption-top text-sm custom-table-class');
     });
 
     it('combines all options correctly', () => {

package/src/components/DataTable/components/DataTableCore.tsx

@@ -412,9 +412,32 @@ function DataTableInternal<TData extends DataRecord>({
       savedColumnOrder &&
       savedColumnOrder.length > 0
     ) {
-      stateActions.setColumnOrder(savedColumnOrder);
+      // Normalize: ensure 'select' is first if selection is enabled
+      const normalizedOrder = secureFeatures.selection && savedColumnOrder.includes('select')
+        ? ['select', ...savedColumnOrder.filter(id => id !== 'select')]
+        : savedColumnOrder;
+      stateActions.setColumnOrder(normalizedOrder);
     }
-  }, [secureFeatures.columnReordering, isColumnOrderLoaded, savedColumnOrder, stateActions]);
+  }, [secureFeatures.columnReordering, secureFeatures.selection, isColumnOrderLoaded, savedColumnOrder, stateActions]);
+
+  // CRITICAL: Always ensure state.columnOrder has 'select' first if selection is enabled
+  // This fixes any state that gets out of sync (e.g., from localStorage or user reordering)
+  useEffect(() => {
+    if (secureFeatures.selection && state.columnOrder.includes('select') && state.columnOrder[0] !== 'select') {
+      const normalizedOrder = ['select', ...state.columnOrder.filter(id => id !== 'select')];
+      if (import.meta.env?.MODE === 'development') {
+        console.warn('[DataTable] Correcting column order state - moving select to first position:', {
+          before: state.columnOrder,
+          after: normalizedOrder
+        });
+      }
+      stateActions.setColumnOrder(normalizedOrder);
+      // Also update persisted order if persistence is enabled
+      if (secureFeatures.columnReordering) {
+        updateColumnOrder(normalizedOrder);
+      }
+    }
+  }, [secureFeatures.selection, secureFeatures.columnReordering, state.columnOrder, stateActions, updateColumnOrder]);
 
   // ============================================================================
   // CONFIGURATION RESOLUTION - ALWAYS call these hooks
@@ -445,6 +468,56 @@ function DataTableInternal<TData extends DataRecord>({
     return closestOption;
   }, [initialPageSize, finalPageSizeOptions, secureFeatures.pagination]);
   
+  // Determine the effective pageSize to use (validated or current state)
+  // CRITICAL: This ensures we always pass a valid pageSize to TanStack Table configuration.
+  // An invalid pageSize can cause getPaginationRowModel() to return empty rows.
+  const effectivePageSize = useMemo(() => {
+    if (!secureFeatures.pagination || !finalPageSizeOptions.length) {
+      return state.pagination.pageSize;
+    }
+    
+    // If current pageSize is invalid (not in options), use validated value immediately
+    // This is a safety net in case the useEffect hasn't run yet
+    if (!finalPageSizeOptions.includes(state.pagination.pageSize)) {
+      return validatedInitialPageSize;
+    }
+    
+    return state.pagination.pageSize;
+  }, [state.pagination.pageSize, validatedInitialPageSize, secureFeatures.pagination, finalPageSizeOptions]);
+  
+  // CRITICAL FIX: Ensure pagination state always uses a valid pageSize and pageIndex
+  // An invalid pageSize (not in page size options) causes getPaginationRowModel() to return empty rows,
+  // which manifests as "DataTable shows record count but no rows" bug for large datasets.
+  // An out-of-bounds pageIndex (beyond available pages) also causes empty rows.
+  // This fixes the bug where DataTable shows record count but no rows for large datasets.
+  useEffect(() => {
+    if (secureFeatures.pagination && finalPageSizeOptions.length > 0) {
+      const needsFix = !finalPageSizeOptions.includes(state.pagination.pageSize);
+      
+      // Also check if pageIndex is out of bounds for the current data
+      const currentPageSize = effectivePageSize || validatedInitialPageSize;
+      const totalPages = currentPageSize > 0 ? Math.ceil(finalDataCount / currentPageSize) : 0;
+      const pageIndexOutOfBounds = totalPages > 0 && state.pagination.pageIndex >= totalPages;
+      
+      if (needsFix || pageIndexOutOfBounds) {
+        // PageSize is invalid OR pageIndex is out of bounds - correct both to prevent empty rows
+        stateActions.setPagination({
+          pageSize: validatedInitialPageSize,
+          pageIndex: 0, // Reset to first page when correcting pagination issues
+        });
+      }
+    }
+  }, [
+    secureFeatures.pagination, 
+    finalPageSizeOptions, 
+    state.pagination.pageSize, 
+    state.pagination.pageIndex,
+    validatedInitialPageSize, 
+    stateActions,
+    effectivePageSize,
+    finalDataCount
+  ]);
+  
   const isLoading = externalIsLoading || performanceLoading;
   
   // ============================================================================
@@ -607,34 +680,68 @@ function DataTableInternal<TData extends DataRecord>({
     return result;
   }, [actions, secureFeatures, permissions, secureHandlers, resolvedGetRowId, stateActions, data]);
 
+  // Normalize columnOrder for useTableColumns: ensure 'select' is always first
+  const normalizedColumnOrderForColumns = useMemo(() => {
+    if (secureFeatures.selection && state.columnOrder.includes('select')) {
+      return ['select', ...state.columnOrder.filter(id => id !== 'select')];
+    }
+    return state.columnOrder;
+  }, [state.columnOrder, secureFeatures.selection]);
+
   // MANDATORY: Process columns with actions
   const { enhancedColumns } = useTableColumns({
     columns,
     features: secureFeatures,
     effectiveActions,
-    columnOrder: state.columnOrder
+    columnOrder: normalizedColumnOrderForColumns
   });
 
-  const tableStateSnapshot = useMemo<TableStateSnapshot<TData>>(() => ({
-    sorting: state.sorting,
-    columnFilters: state.columnFilters,
-    columnVisibility: state.columnVisibility,
-    rowSelection,
-    grouping: state.grouping,
-    expanded: state.expanded,
-    pagination: state.pagination,
-    globalFilter: searchQuery,
-    columnOrder: state.columnOrder,
-  }), [
+  // Use effective pageSize in pagination state snapshot to ensure table receives valid pageSize
+  const paginationStateWithValidatedSize = useMemo(() => ({
+    ...state.pagination,
+    pageSize: effectivePageSize,
+  }), [state.pagination, effectivePageSize]);
+  
+  const tableStateSnapshot = useMemo<TableStateSnapshot<TData>>(() => {
+    // Normalize columnOrder in snapshot: ensure 'select' is always first if selection is enabled
+    const normalizedColumnOrder = secureFeatures.selection && state.columnOrder.includes('select')
+      ? ['select', ...state.columnOrder.filter(id => id !== 'select')]
+      : state.columnOrder;
+    
+    // Debug logging in dev mode
+    if (import.meta.env?.MODE === 'development' && secureFeatures.selection) {
+      if (state.columnOrder[0] !== 'select') {
+        console.warn('[DataTable] Column order normalized:', {
+          original: state.columnOrder,
+          normalized: normalizedColumnOrder,
+          firstColumnOriginal: state.columnOrder[0],
+          firstColumnNormalized: normalizedColumnOrder[0]
+        });
+      }
+    }
+    
+    return {
+      sorting: state.sorting,
+      columnFilters: state.columnFilters,
+      columnVisibility: state.columnVisibility,
+      rowSelection,
+      grouping: state.grouping,
+      expanded: state.expanded,
+      pagination: paginationStateWithValidatedSize,
+      globalFilter: searchQuery,
+      columnOrder: normalizedColumnOrder,
+    };
+  }, [
     state.sorting,
     state.columnFilters,
     state.columnVisibility,
     rowSelection,
     state.grouping,
     state.expanded,
-    state.pagination,
+    paginationStateWithValidatedSize,
     searchQuery,
     state.columnOrder,
+    secureFeatures.selection,
   ]);
 
   const tableHandlers = useTableHandlers({
@@ -660,7 +767,7 @@ function DataTableInternal<TData extends DataRecord>({
     getRowId: resolvedGetRowId,
     finalPaginationMode,
     finalDataCount,
-    pageSize: state.pagination.pageSize,
+    pageSize: effectivePageSize,
   });
   
   const table = useReactTable(tableConfig);
@@ -705,7 +812,7 @@ function DataTableInternal<TData extends DataRecord>({
       {/* Table with semantic HTML structure */}
       <table 
         className={getTableClasses({
-          isFixed: true,
+          isFixed: false, // Use auto table-layout so columns size based on content
           variant,
           className: cn('border-collapse relative w-full', className)
         })}
@@ -800,7 +907,7 @@ function DataTableInternal<TData extends DataRecord>({
 
         {/* Column groups */}
         <colgroup>
-          {hasSelectColumn && <col span={1} data-col-type="select" className="w-12" />}
+          {hasSelectColumn && <col span={1} data-col-type="select"/>}
           <col span={dataColumns} data-col-type="data" />
           {hasActionsColumn && <col span={1} data-col-type="actions"/>}
         </colgroup>

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

@@ -95,39 +95,40 @@ export function PaginationControls<TData extends DataRecord>({
     }
   };
 
-
   return (
     <footer
       aria-label="pagination"
-      className="mx-auto grid grid-cols-[auto_auto_1fr_auto_auto_auto_auto] gap-4"
+      className="mx-auto grid grid-cols-[auto_auto_1fr_auto_auto_auto_auto] gap-4 items-center my-2"
     >
       {/* Left side - Page Size Selector */}
-   
-        <p className="text-sm text-sec-600">Rows per page</p>
-        <Select
-          value={currentPageSize?.toString() || '10'}
-          selectedText={currentPageSize?.toString() || '10'}
-          onValueChange={(value) => setPageSize(Number(value))}
-          disabled={isLoading}
-          className="w-36 h-8"
+
+      <label className="text-sec-600">Rows per page</label>
+      <Select
+        value={currentPageSize?.toString() || '10'}
+        selectedText={currentPageSize?.toString() || '10'}
+        onValueChange={(value) => setPageSize(Number(value))}
+        disabled={isLoading}
+        className="w-36 h-8"
+      >
+       
+        <SelectTrigger
+          className={cn(
+
+            isLoading && "opacity-50 cursor-not-allowed"
+          )}
+          aria-label="Rows per page"
         >
-          <SelectTrigger
-            className={cn(
-            
-              isLoading && "opacity-50 cursor-not-allowed"
-            )}
-            aria-label="Rows per page"
-          >
-            <SelectValue />
-          </SelectTrigger>
-          <SelectContent>
-            {availablePageSizes.map((pageSize) => (
-              <SelectItem key={pageSize} value={pageSize?.toString() || '10'}>
-                {pageSize}
-              </SelectItem>
-            ))}
-          </SelectContent>
-        </Select>
+          <SelectValue />
+        </SelectTrigger>
+        <SelectContent>
+          {availablePageSizes.map((pageSize) => (
+            <SelectItem key={pageSize} value={pageSize?.toString() || '10'}>
+              {pageSize}
+            </SelectItem>
+          ))}
+        </SelectContent>
+      </Select>
+
 
 
       {/* Performance Mode Indicator */}
@@ -144,61 +145,61 @@ export function PaginationControls<TData extends DataRecord>({
 
       {/* Center - Page Navigation */}
 
-        <p className="justify-self-center text-sm text-sec-600">
-          Page {currentPageIndex + 1} of {pageCount || 1}
-        </p>
+      <p className="justify-self-center text-sm text-sec-600 my-0 py-0">
+        Page {currentPageIndex + 1} of {pageCount || 1}
+      </p>
 
 
       {/* Right side - Navigation Buttons */}
 
 
-        <Button
-          variant="outline"
-          size="sm"
-          className="h-8 w-8 p-0"
-          onClick={goToFirstPage}
-          disabled={!canPreviousPage || isLoading}
-          aria-label="Go to first page"
-          tabIndex={0}
-        >
-          <ChevronsLeft className="h-4 w-4" />
-        </Button>
-
-        <Button
-          variant="outline"
-          size="sm"
-          className="h-8 w-8 p-0"
-          onClick={goToPreviousPage}
-          disabled={!canPreviousPage || isLoading}
-          aria-label="Go to previous page"
-          tabIndex={0}
-        >
-          <ChevronLeft className="h-4 w-4" />
-        </Button>
-
-        <Button
-          variant="outline"
-          size="sm"
-          className="h-8 w-8 p-0"
-          onClick={goToNextPage}
-          disabled={!canNextPage || isLoading}
-          aria-label="Go to next page"
-          tabIndex={0}
-        >
-          <ChevronRight className="h-4 w-4" />
-        </Button>
-
-        <Button
-          variant="outline"
-          size="sm"
-          className="h-8 w-8 p-0"
-          onClick={goToLastPage}
-          disabled={!canNextPage || isLoading}
-          aria-label="Go to last page"
-          tabIndex={0}
-        >
-          <ChevronsRight className="h-4 w-4" />
-        </Button>
+      <Button
+        variant="outline"
+        size="sm"
+        className="h-8 w-8 p-0"
+        onClick={goToFirstPage}
+        disabled={!canPreviousPage || isLoading}
+        aria-label="Go to first page"
+        tabIndex={0}
+      >
+        <ChevronsLeft className="h-4 w-4" />
+      </Button>
+
+      <Button
+        variant="outline"
+        size="sm"
+        className="h-8 w-8 p-0"
+        onClick={goToPreviousPage}
+        disabled={!canPreviousPage || isLoading}
+        aria-label="Go to previous page"
+        tabIndex={0}
+      >
+        <ChevronLeft className="h-4 w-4" />
+      </Button>
+
+      <Button
+        variant="outline"
+        size="sm"
+        className="h-8 w-8 p-0"
+        onClick={goToNextPage}
+        disabled={!canNextPage || isLoading}
+        aria-label="Go to next page"
+        tabIndex={0}
+      >
+        <ChevronRight className="h-4 w-4" />
+      </Button>
+
+      <Button
+        variant="outline"
+        size="sm"
+        className="h-8 w-8 p-0"
+        onClick={goToLastPage}
+        disabled={!canNextPage || isLoading}
+        aria-label="Go to last page"
+        tabIndex={0}
+      >
+        <ChevronsRight className="h-4 w-4" />
+      </Button>
     </footer>
   );
 }

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

@@ -425,10 +425,18 @@ const RowComponent = React.memo(({
     );
   }
   
-  // Skip leaf rows when grouping is enabled
-  if (grouping.length > 0 && typeof row.getParentRow === 'function' && row.getParentRow() && (!row.getIsGrouped || !row.getIsGrouped())) {
-    return null;
-  }
+  // CRITICAL FIX: Removed the buggy filter that was hiding all rows when grouping is enabled
+  // TanStack Table's getRowModel() already correctly handles collapsing/expanding groups,
+  // returning only visible rows (group headers + children of expanded groups).
+  // The previous check was incorrectly filtering out all child rows regardless of parent expansion state,
+  // causing the bug where DataTable showed record count but no rows for large datasets.
+  // 
+  // When grouping is enabled:
+  // - Group headers are rendered above (lines 317-426)
+  // - Child rows are ONLY in getRowModel().rows if their parent is expanded
+  // - Collapsed groups' children are NOT in getRowModel().rows (handled by TanStack Table)
+  // 
+  // Therefore, we should trust getRowModel() and render all rows it returns.
   
   // If we're in edit mode, use EditableRow for better UX (auto-focus, keyboard shortcuts)
   if (isEditing && editingData && onEditingDataChange && onSaveEditing && onCancelEditing) {

package/src/components/DataTable/hooks/useDataTableConfiguration.ts

@@ -40,20 +40,32 @@ export function useDataTableConfiguration<TData extends DataRecord>({
   finalDataCount,
   pageSize,
 }: UseDataTableConfigurationOptions<TData>) {
-  return useMemo(() => ({
-    data,
-    columns,
-    state: {
-      sorting: stateSnapshot.sorting,
-      columnFilters: stateSnapshot.columnFilters,
-      columnVisibility: stateSnapshot.columnVisibility,
-      rowSelection: stateSnapshot.rowSelection,
-      grouping: stateSnapshot.grouping,
-      expanded: stateSnapshot.expanded,
-      pagination: stateSnapshot.pagination,
-      globalFilter: stateSnapshot.globalFilter,
-      columnOrder: stateSnapshot.columnOrder,
-    },
+  return useMemo(() => {
+    // Normalize columnOrder: ensure 'select' is always first if selection is enabled
+    // This is critical for the UI - the select checkbox column must appear first
+    let normalizedColumnOrder = [...stateSnapshot.columnOrder];
+    
+    if (features.selection) {
+      // Remove 'select' from wherever it might be
+      normalizedColumnOrder = normalizedColumnOrder.filter(id => id !== 'select');
+      // Always place 'select' first
+      normalizedColumnOrder = ['select', ...normalizedColumnOrder];
+    }
+
+    return {
+      data,
+      columns,
+      state: {
+        sorting: stateSnapshot.sorting,
+        columnFilters: stateSnapshot.columnFilters,
+        columnVisibility: stateSnapshot.columnVisibility,
+        rowSelection: stateSnapshot.rowSelection,
+        grouping: stateSnapshot.grouping,
+        expanded: stateSnapshot.expanded,
+        pagination: stateSnapshot.pagination,
+        globalFilter: stateSnapshot.globalFilter,
+        columnOrder: normalizedColumnOrder,
+      },
     initialState: {
       expanded: features.grouping ? {} : undefined,
     },
@@ -70,10 +82,11 @@ export function useDataTableConfiguration<TData extends DataRecord>({
     manualSorting: finalPaginationMode === 'server',
     manualFiltering: finalPaginationMode === 'server',
     manualPagination: finalPaginationMode === 'server',
-    pageCount: finalPaginationMode === 'server'
+      pageCount: finalPaginationMode === 'server'
       ? Math.ceil(finalDataCount / pageSize)
       : undefined,
-  }), [
+    };
+  }, [
     data,
     columns,
     stateSnapshot,

package/src/components/DataTable/hooks/useEffectiveColumnOrder.ts

@@ -24,10 +24,12 @@ export function useEffectiveColumnOrder<TData extends DataRecord>({
   }, [columns, externalColumnOrder]);
 
   return useMemo(() => {
-    if (selectionEnabled && !baseOrder.includes('select')) {
-      return ['select', ...baseOrder];
+    if (!selectionEnabled) {
+      return baseOrder;
     }
-
-    return baseOrder;
+    
+    // Always ensure 'select' is first, even if it appears elsewhere in the order
+    const orderWithoutSelect = baseOrder.filter(id => id !== 'select');
+    return ['select', ...orderWithoutSelect];
   }, [baseOrder, selectionEnabled]);
 }

package/src/components/DataTable/hooks/useTableColumns.ts

@@ -95,24 +95,28 @@ export function useTableColumns<TData extends DataRecord>({
         meta: { align: 'right' },
       }) : null;
 
-    // Build final columns array respecting columnOrder
+    // Build final columns array - selection ALWAYS first, actions ALWAYS last
     const finalColumns: ColumnDef<TData>[] = [];
     
+    // ALWAYS add selection column first if it exists (regardless of columnOrder)
+    if (selectionColumn) {
+      finalColumns.push(selectionColumn);
+    }
+    
     if (columnOrder && columnOrder.length > 0) {
-      // Create set of used column IDs for remaining columns check
-      const usedColumnIds = new Set(columnOrder);
-      
-      // Add selection column first if it wasn't in the order
-      if (selectionColumn && !usedColumnIds.has('select')) {
-        finalColumns.unshift(selectionColumn);
-      }
+      // Create set of used column IDs (excluding 'select' and 'actions' which are handled separately)
+      const usedColumnIds = new Set(
+        columnOrder.filter(id => id !== 'select' && id !== 'actions')
+      );
       
-      // Use provided columnOrder to arrange columns
+      // Process columnOrder, skipping 'select' and 'actions' (handled separately)
       for (const columnId of columnOrder) {
-        if (columnId === 'select' && selectionColumn) {
-          finalColumns.push(selectionColumn);
+        if (columnId === 'select') {
+          // Skip - already added first
+          continue;
         } else if (columnId === 'actions' && actionsColumn) {
-          finalColumns.push(actionsColumn);
+          // Will be added at the end
+          continue;
         } else {
           // Find the data column by id or accessorKey
           const dataColumn = baseColumns.find(col => 
@@ -124,22 +128,19 @@ export function useTableColumns<TData extends DataRecord>({
         }
       }
       
-      // Add any remaining columns that weren't in the columnOrder
+      // Add any remaining data columns that weren't in the columnOrder
       const remainingDataColumns = baseColumns.filter(col => {
         const colId = col.id ? String(col.id) : ('accessorKey' in col ? String(col.accessorKey) : '');
         return !usedColumnIds.has(colId);
       });
       finalColumns.push(...remainingDataColumns);
       
-      // Add actions column if it wasn't in the order
-      if (actionsColumn && !usedColumnIds.has('actions')) {
+      // Add actions column last if it exists (regardless of columnOrder position)
+      if (actionsColumn) {
         finalColumns.push(actionsColumn);
       }
     } else {
-      // No columnOrder provided, use default behavior
-      if (selectionColumn) {
-        finalColumns.push(selectionColumn);
-      }
+      // No columnOrder provided: selection (already added), then data columns, then actions
       finalColumns.push(...baseColumns);
       if (actionsColumn) {
         finalColumns.push(actionsColumn);

package/src/components/DataTable/hooks/useTableHandlers.ts

@@ -139,15 +139,20 @@ export function useTableHandlers<TData extends DataRecord>({
     const nextValue = typeof updaterOrValue === 'function'
       ? (updaterOrValue as (prev: string[]) => string[])(stateSnapshot.columnOrder)
       : updaterOrValue as string[];
+    
+    // Normalize: ensure 'select' stays first if it exists
+    const normalizedOrder = nextValue.includes('select')
+      ? ['select', ...nextValue.filter(id => id !== 'select')]
+      : nextValue;
 
-    actions.setColumnOrder(nextValue);
+    actions.setColumnOrder(normalizedOrder);
 
     if (canPersistOrder) {
-      updateColumnOrder(nextValue);
+      updateColumnOrder(normalizedOrder);
     }
 
     onLayoutChange?.({
-      columnOrder: nextValue,
+      columnOrder: normalizedOrder,
       columnVisibility: stateSnapshot.columnVisibility,
     });
   }, [actions, stateSnapshot.columnOrder, stateSnapshot.columnVisibility, canPersistOrder, updateColumnOrder, onLayoutChange]);

package/src/components/DataTable/styles.ts

@@ -16,7 +16,7 @@ import { cn } from '../../utils/cn';
 
 export const tableStyles = {
   // Main table container
-  table: 'w-full caption-bottom text-sm',
+  table: 'w-full caption-top text-sm',
   tableFixed: 'w-full table-fixed',
   
   // Table sections