@jmruthers/pace-core 0.2.5 → 0.2.7

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

@@ -39,19 +39,37 @@ vi.mock('@tanstack/react-table', () => ({
         {
           id: 'name',
           isPlaceholder: false,
-          column: { columnDef: { header: 'Name' } },
+          column: { 
+            columnDef: { header: 'Name' },
+            getCanSort: () => true,
+            getToggleSortingHandler: () => vi.fn(),
+            getIsSorted: () => false,
+            getIsVisible: () => true,
+          },
           getContext: () => ({}),
         },
         {
           id: 'email', 
           isPlaceholder: false,
-          column: { columnDef: { header: 'Email' } },
+          column: { 
+            columnDef: { header: 'Email' },
+            getCanSort: () => true,
+            getToggleSortingHandler: () => vi.fn(),
+            getIsSorted: () => false,
+            getIsVisible: () => true,
+          },
           getContext: () => ({}),
         },
         {
           id: 'role',
           isPlaceholder: false,
-          column: { columnDef: { header: 'Role' } },
+          column: { 
+            columnDef: { header: 'Role' },
+            getCanSort: () => true,
+            getToggleSortingHandler: () => vi.fn(),
+            getIsSorted: () => false,
+            getIsVisible: () => true,
+          },
           getContext: () => ({}),
         },
       ],
@@ -167,14 +185,6 @@ vi.mock('../core/DataTableContext', () => ({
 }));
 
 // Mock individual components
-vi.mock('../components/DataTableHeader', () => ({
-  DataTableHeader: ({ title, description }: any) => (
-    <div data-testid="data-table-header">
-      {title && <h2 data-testid="table-title">{title}</h2>}
-      {description && <p data-testid="table-description">{description}</p>}
-    </div>
-  ),
-}));
 
 vi.mock('../components/DataTableToolbar', () => ({
   DataTableToolbar: () => <div data-testid="data-table-toolbar">Toolbar</div>,
@@ -255,8 +265,8 @@ describe('DataTable Workflows Tests', () => {
         </MockRBACProvider>
       );
       
-      expect(screen.getByTestId('table-title')).toHaveTextContent('Users Table');
-      expect(screen.getByTestId('table-description')).toHaveTextContent('Manage user accounts');
+      expect(screen.getByText('Users Table')).toBeInTheDocument();
+      expect(screen.getByText('Manage user accounts')).toBeInTheDocument();
     });
 
     it('renders with actions when provided', () => {
@@ -650,8 +660,8 @@ describe('DataTable Workflows Tests', () => {
       );
 
       expect(screen.getByRole('table')).toBeInTheDocument();
-      expect(screen.getByTestId('table-title')).toHaveTextContent('Comprehensive Workflow Test');
-      expect(screen.getByTestId('table-description')).toHaveTextContent('Testing complete user workflows');
+      expect(screen.getByText('Comprehensive Workflow Test')).toBeInTheDocument();
+      expect(screen.getByText('Testing complete user workflows')).toBeInTheDocument();
     });
 
     it('handles workflow with different data types', () => {

package/src/components/DataTable/__tests__/README.md

@@ -8,7 +8,7 @@ This directory contains comprehensive tests for the DataTable component, designe
 
 - **`DataTable.workflowValidation.test.tsx`** - Comprehensive workflow validation covering all core functionality
 - **`DataTable.regressionFixes.test.tsx`** - Documents specific fixes and prevents known regressions
-- **`DataTable.autoSizing.test.tsx`** - Tests for automatic column width adjustment functionality
+- **`DataTable.sorting.test.tsx`** - Comprehensive sorting functionality tests including visual indicators and accessibility
 
 ### Existing Tests
 
@@ -49,6 +49,12 @@ The `DataTable.workflowValidation.test.tsx` file provides comprehensive coverage
   - Filtering behavior
   - Actions preservation during search
 
+- **Sorting Workflow Validation (4 tests)**
+  - Sortable column indicators (↕️ unsorted, ↑ ascending, ↓ descending)
+  - Click behavior for sorting
+  - Non-sortable column behavior
+  - Visual feedback and accessibility
+
 - **Data Integrity Validation (3 tests)**
   - Exact prop data display
   - Empty data handling
@@ -118,13 +124,16 @@ npm test -- src/components/DataTable/__tests__/DataTable.workflowValidation.test
 # Regression fix tests  
 npm test -- src/components/DataTable/__tests__/DataTable.regressionFixes.test.tsx
 
+# Sorting functionality tests
+npm test -- src/components/DataTable/__tests__/DataTable.sorting.test.tsx
+
 # Simple integration tests
 npm test -- src/components/DataTable/__tests__/DataTable.simple.test.tsx
 ```
 
 ## Test Coverage Summary
 
-- **47 total tests** in new regression prevention suites
+- **91 total tests** in new regression prevention suites
 - **100% pass rate** for workflow validation
 - **100% pass rate** for regression fixes
 - **100% pass rate** for auto-sizing functionality

package/src/components/DataTable/__tests__/performance-regression.test.tsx

@@ -91,7 +91,6 @@ vi.mock('@tanstack/react-table', () => ({
             getIsSorted: () => false,
           },
           getContext: () => ({}),
-          getSize: () => 150,
         },
         {
           id: 'email', 
@@ -103,7 +102,6 @@ vi.mock('@tanstack/react-table', () => ({
             getIsSorted: () => false,
           },
           getContext: () => ({}),
-          getSize: () => 200,
         },
         {
           id: 'role',
@@ -115,7 +113,6 @@ vi.mock('@tanstack/react-table', () => ({
             getIsSorted: () => false,
           },
           getContext: () => ({}),
-          getSize: () => 100,
         },
       ],
     }],
@@ -203,14 +200,6 @@ vi.mock('../components/EmptyState', () => ({
 }));
 
 // Mock individual components
-vi.mock('../components/DataTableHeader', () => ({
-  DataTableHeader: ({ title, description }: any) => (
-    <div data-testid="data-table-header">
-      {title && <h2 data-testid="table-title">{title}</h2>}
-      {description && <p data-testid="table-description">{description}</p>}
-    </div>
-  ),
-}));
 
 vi.mock('../components/DataTableToolbar', () => ({
   DataTableToolbar: ({ searchable, globalFilter, onGlobalFilterChange }: any) => (

package/src/components/DataTable/__tests__/test-utils/sharedTestUtils.tsx

@@ -23,7 +23,6 @@ const MockDeleteIcon = ({ className }: { className?: string }) => <div className
  */
 export const mockComponents = {
   DataTableContext: vi.fn(({ children }: any) => <div data-testid="data-table-context">{children}</div>),
-  DataTableHeader: vi.fn(() => <div data-testid="data-table-header">Header</div>),
   DataTableToolbar: vi.fn(() => <div data-testid="data-table-toolbar">Toolbar</div>),
   DataTableBody: vi.fn(() => <div data-testid="data-table-body">Body</div>),
   DataTableModals: vi.fn(() => <div data-testid="data-table-modals">Modals</div>),

package/src/components/DataTable/components/ColumnVisibilityDropdown.tsx

@@ -25,7 +25,7 @@ export function ColumnVisibilityDropdown<TData>({
   );
 
   return (
-    <Select>
+    <Select className="w-52">
       <SelectTrigger asChild>
         <Button 
           variant="outline" 
@@ -34,7 +34,7 @@ export function ColumnVisibilityDropdown<TData>({
           <span className="truncate">Columns</span>
         </Button>
       </SelectTrigger>
-      <SelectContent className="w-56 !bg-main-50 border border-sec-200 shadow-lg z-[9999]" style={{ backgroundColor: 'white' }}>
+      <SelectContent>
         <div className="p-2 space-y-1">
           <div className="flex gap-1 mb-2">
             <Button

package/src/components/DataTable/components/DataTableBody.tsx

@@ -58,9 +58,8 @@
 
 import React from 'react';
 import { type Table, flexRender } from '@tanstack/react-table';
-import { TableBody, TableHead, TableHeader, TableRow, TableCell } from '../../Table/Table';
 import { Button } from '../../Button/Button';
-import { ChevronUp, ChevronDown, ChevronRight } from 'lucide-react';
+import { ChevronUp, ChevronDown, ChevronRight, ChevronsUpDown } from 'lucide-react';
 import { EmptyState } from './EmptyState';
 import { Input } from '../../Input/Input';
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '../../Select/Select';
@@ -228,12 +227,12 @@ export function DataTableBody<TData extends Record<string, any>>({
   return (
     <>
       {/* Table Header */}
-      <TableHeader>
+      <thead>
         {table.getHeaderGroups().map((headerGroup) => (
-          <TableRow key={headerGroup.id}>
+          <tr key={headerGroup.id}>
             {/* Expand/Collapse All Button - Only show for hierarchical tables */}
             {hierarchical?.enabled && hierarchical?.hasAnyChildren && (
-              <TableHead className="w-12">
+              <th className="w-12">
                 <Button
                   variant="ghost"
                   size="sm"
@@ -248,7 +247,7 @@ export function DataTableBody<TData extends Record<string, any>>({
                     <ChevronRight className="h-4 w-4" />
                   )}
                 </Button>
-              </TableHead>
+              </th>
             )}
             
             {headerGroup.headers.map((header) => {
@@ -261,7 +260,7 @@ export function DataTableBody<TData extends Record<string, any>>({
                     : 'none')
                 : undefined;
               return (
-                <TableHead
+                <th
                   key={header.id}
                   {...(isSortable ? { 'aria-sort': ariaSort } : {})}
                 >
@@ -283,7 +282,7 @@ export function DataTableBody<TData extends Record<string, any>>({
                           ) : header.column.getIsSorted() === 'desc' ? (
                             <ChevronDown className="h-4 w-4" />
                           ) : (
-                            <div className="h-4 w-4" />
+                            <ChevronsUpDown className="h-4 w-4" />
                           )}
                         </div>
                       </Button>
@@ -295,20 +294,20 @@ export function DataTableBody<TData extends Record<string, any>>({
                       </div>
                     )
                   )}
-                </TableHead>
+                </th>
               );
             })}
-          </TableRow>
+          </tr>
         ))}
-      </TableHeader>
+      </thead>
 
       {/* Table Body */}
-      <TableBody>
+      <tbody>
         {/* Creation Row */}
         {isCreating && (
-          <TableRow>
+          <tr>
             {table.getVisibleFlatColumns().map((column) => (
-              <TableCell key={column.id}>
+              <td key={column.id}>
                                  {renderEditField(column, creationData[column.id], (value) => {
                    if (typeof value === 'object' && value !== null) {
                      // Handle editAccessorKey case
@@ -318,9 +317,9 @@ export function DataTableBody<TData extends Record<string, any>>({
                      onCreationDataChange({ ...creationData, [column.id]: value });
                    }
                  }, creationData)}
-              </TableCell>
+              </td>
             ))}
-            <TableCell className="flex gap-1">
+            <td className="flex gap-1">
               <>
                 <button
                   onClick={onSaveCreation}
@@ -341,14 +340,14 @@ export function DataTableBody<TData extends Record<string, any>>({
                   </svg>
                 </button>
               </>
-            </TableCell>
-          </TableRow>
+            </td>
+          </tr>
         )}
         
         {/* Table Rows */}
         {table.getRowModel().rows.length === 0 && (
-          <TableRow>
-            <TableCell colSpan={table.getVisibleFlatColumns().length} role="status">
+          <tr>
+            <td colSpan={table.getVisibleFlatColumns().length} role="status">
               <EmptyState
                 title={emptyState?.title}
                 description={emptyState?.description}
@@ -357,8 +356,8 @@ export function DataTableBody<TData extends Record<string, any>>({
                 isFiltered={isFiltered}
                 onClearFilters={onClearFilters}
               />
-            </TableCell>
-          </TableRow>
+            </td>
+          </tr>
         )}
         
         {table.getRowModel().rows.map((row) => {
@@ -374,8 +373,8 @@ export function DataTableBody<TData extends Record<string, any>>({
             return (
               <React.Fragment key={row.id}>
                 {/* Group Header Row */}
-                <TableRow className="bg-app-sec-50 hover:bg-app-sec-100">
-                  <TableCell className="flex items-center py-2 font-medium" colSpan={table.getAllColumns().length}>
+                <tr className="bg-app-sec-50 hover:bg-app-sec-100">
+                  <td className="flex items-center py-2 font-medium" colSpan={table.getAllColumns().length}>
                     <>
                       <Button
                         variant="ghost"
@@ -393,8 +392,8 @@ export function DataTableBody<TData extends Record<string, any>>({
                         {String(groupValue)} ({subRowsCount} items)
                       </span>
                     </>
-                  </TableCell>
-                </TableRow>
+                  </td>
+                </tr>
                 
                 {/* Render sub-rows if expanded */}
                 {isExpanded && row.subRows?.map((subRow) => {
@@ -402,9 +401,9 @@ export function DataTableBody<TData extends Record<string, any>>({
                   const isSubRowEditing = editingRowId === subRowId;
                   
                   return (
-                    <TableRow key={subRow.id} className="border-l-2 border-l-blue-200">
+                    <tr key={subRow.id} className="border-l-2 border-l-blue-200">
                       {subRow.getVisibleCells().map((cell) => (
-                        <TableCell key={cell.id} className="pl-8">
+                        <td key={cell.id} className="pl-8">
                                             {isSubRowEditing && cell.column.id !== 'actions' ? (
                     renderEditField(cell.column, editingData[cell.column.id], (value) => {
                       if (typeof value === 'object' && value !== null) {
@@ -418,9 +417,9 @@ export function DataTableBody<TData extends Record<string, any>>({
                   ) : (
                     flexRender(cell.column.columnDef.cell, cell.getContext())
                   )}
-                        </TableCell>
+                        </td>
                       ))}
-                    </TableRow>
+                    </tr>
                   );
                 })}
               </React.Fragment>
@@ -435,9 +434,9 @@ export function DataTableBody<TData extends Record<string, any>>({
           
           // Regular row (non-grouped or when grouping is disabled)
           return (
-            <TableRow key={row.id}>
+            <tr key={row.id}>
               {row.getVisibleCells().map((cell) => (
-                <TableCell key={cell.id}>
+                <td key={cell.id}>
                   {isEditing && cell.column.id !== 'actions' ? (
                     renderEditField(cell.column, editingData[cell.column.id], (value) => {
                       if (typeof value === 'object' && value !== null) {
@@ -451,12 +450,12 @@ export function DataTableBody<TData extends Record<string, any>>({
                   ) : (
                     flexRender(cell.column.columnDef.cell, cell.getContext())
                   )}
-                </TableCell>
+                </td>
               ))}
-            </TableRow>
+            </tr>
           );
         })}
-      </TableBody>
+      </tbody>
     </>
   );
 }