@jmruthers/pace-core 0.2.4 → 0.2.6

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>
     </>
   );
 }

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

@@ -17,6 +17,7 @@ import {
   getPaginationRowModel, 
   getGroupedRowModel, 
   getExpandedRowModel,
+  flexRender,
   type SortingState,
   type ColumnDef,
   type ColumnFiltersState,
@@ -27,12 +28,12 @@ import {
   type HeaderContext,
   type CellContext,
 } from '@tanstack/react-table';
-import { Edit, Trash } from 'lucide-react';
+import { Edit, Trash, ChevronUp, ChevronDown, ChevronsUpDown } from 'lucide-react';
 import { cn } from '../../../utils/cn';
 import { Checkbox } from '../../Checkbox/Checkbox';
+import { Button } from '../../Button/Button';
 import { getTableClasses, getMainContainerClasses } from '../styles';
 import { useDataTablePerformance } from '../../../hooks/useDataTablePerformance';
-import { DataTableHeader } from './DataTableHeader';
 import { DataTableToolbar } from './DataTableToolbar';
 import { UnifiedTableBody } from './UnifiedTableBody';
 import { PaginationControls, EnhancedPaginationControls } from './PaginationControls';
@@ -44,7 +45,6 @@ import { useHierarchicalState } from '../hooks/useHierarchicalState';
 import { useDataTableState } from '../hooks/useDataTableState';
 import { validateHierarchicalData, sortHierarchicalData } from '../utils/hierarchicalUtils';
 import { sortHierarchicalData as sortHierarchicalDataWithSorting } from '../utils/hierarchicalSorting';
-import { calculateColumnWidths, getColumnSizingConfig } from '../utils/columnSizing';
 import { ColumnFactory } from '../core/ColumnFactory';
 
 import type { 
@@ -551,17 +551,6 @@ function DataTableInternal<TData extends DataRecord>({
   // COLUMN WIDTHS
   // ============================================================================
   
-  const columnWidths = useMemo(() => {
-    if (features.autoColumnSizing) {
-      return calculateColumnWidths(data, enhancedColumns, {
-        minWidth: 80,
-        maxWidth: 400,
-        padding: 32,
-        sampleSize: Math.min(100, data.length)
-      });
-    }
-    return undefined;
-  }, [data, enhancedColumns, features.autoColumnSizing]);
 
   // ============================================================================
   // TABLE CONFIGURATION
@@ -610,7 +599,6 @@ function DataTableInternal<TData extends DataRecord>({
     manualFiltering: finalPaginationMode === 'server',
     manualPagination: finalPaginationMode === 'server',
     pageCount: finalPaginationMode === 'server' ? Math.ceil(dataCount / pagination.pageSize) : undefined,
-    ...getColumnSizingConfig(features.autoColumnSizing || false, columnWidths),
   }), [
     finalTableData,
     enhancedColumns,
@@ -629,8 +617,6 @@ function DataTableInternal<TData extends DataRecord>({
     onRowSelectionChange,
     finalPaginationMode,
     features.pagination,
-    features.autoColumnSizing,
-    columnWidths,
     dataCount,
     pagination.pageSize
   ]);
@@ -707,135 +693,221 @@ function DataTableInternal<TData extends DataRecord>({
     ? EnhancedPaginationControls 
     : PaginationControls;
 
+  // Calculate column counts for colgroup
+  const visibleColumns = table?.getVisibleFlatColumns() || [];
+  const dataColumns = visibleColumns.filter(col => 
+    col.id !== 'select' && col.id !== 'actions'
+  ).length;
+  const hasSelectColumn = visibleColumns.some(col => col.id === 'select');
+  const hasActionsColumn = visibleColumns.some(col => col.id === 'actions');
+
   return (
     <>
-      {/* Header */}
-      {(title || description) && (
-        <DataTableHeader
-          title={title}
-          description={description}
-        />
-      )}
-
-      {/* Toolbar */}
-      <DataTableToolbar
-        features={features}
-        globalFilter={searchQuery}
-        onGlobalFilterChange={handleSearch}
-        columns={columns}
-        grouping={grouping}
-        onGroupByChange={(columnId) => {
-          setGrouping(columnId ? [columnId] : []);
-        }}
-        tableColumns={table?.getAllColumns() || []}
-        onColumnVisibilityChange={(columnId, visible) => {
-          setColumnVisibility(prev => ({ ...prev, [columnId]: visible }));
-        }}
-        onCreateRow={features.creation && onCreateRow ? () => tableActions.setCreating(true) : undefined}
-        onImportClick={() => setShowImportModal(true)}
-        onExport={() => {
-          // Export logic here
-        }}
-        rowSelection={rowSelection}
-        onDeleteSelected={onDeleteSelected}
-        onToggleFilterRow={() => setShowFilterRow(!showFilterRow)}
-        showFilterRow={showFilterRow}
-      />
-
-      {/* Table */}
+      {/* Table with semantic HTML structure */}
       <table className={getTableClasses({
-        isFixed: !features.autoColumnSizing,
+        isFixed: true,
         variant,
         className: cn('border-collapse relative w-full', className)
       })} style={{ 
-        tableLayout: features.autoColumnSizing ? 'auto' : 'fixed', 
+        tableLayout: 'fixed', 
         width: '100%' 
       }}>
+        {/* Caption with title, description, and toolbar */}
+        <caption className="text-left pb-2">
+          {(title || description) && (
+            <>
+              {title && <h2 >{title}</h2>}
+              {description && <p>{description}</p>}
+            </>
+          )}
+          <>
+            <DataTableToolbar
+              features={features}
+              globalFilter={searchQuery}
+              onGlobalFilterChange={handleSearch}
+              columns={columns}
+              grouping={grouping}
+              onGroupByChange={(columnId) => {
+                setGrouping(columnId ? [columnId] : []);
+              }}
+              tableColumns={table?.getAllColumns() || []}
+              onColumnVisibilityChange={(columnId, visible) => {
+                setColumnVisibility(prev => ({ ...prev, [columnId]: visible }));
+              }}
+              onCreateRow={features.creation && onCreateRow ? () => tableActions.setCreating(true) : undefined}
+              onImportClick={() => setShowImportModal(true)}
+              onExport={() => {
+                // Export logic here
+              }}
+              rowSelection={rowSelection}
+              onDeleteSelected={onDeleteSelected}
+              onToggleFilterRow={() => setShowFilterRow(!showFilterRow)}
+              showFilterRow={showFilterRow}
+            />
+          </>
+        </caption>
+
+        {/* Column groups */}
+        <colgroup>
+          {hasSelectColumn && <col span={1} data-col-type="select" />}
+          <col span={dataColumns} data-col-type="data" />
+          {hasActionsColumn && <col span={1} data-col-type="actions" />}
+        </colgroup>
+
+        {/* Table header */}
+        <thead>
+          {table?.getHeaderGroups().map((headerGroup) => (
+            <tr key={headerGroup.id}>
+              {headerGroup.headers
+                .filter(header => {
+                  return typeof header.column.getIsVisible === 'function' 
+                    ? header.column.getIsVisible() 
+                    : true;
+                })
+                .map((header) => {
+                  const isSortable = header.column.getCanSort();
+                  const ariaSort = isSortable
+                    ? (header.column.getIsSorted() === 'asc'
+                        ? 'ascending'
+                        : header.column.getIsSorted() === 'desc'
+                        ? 'descending'
+                        : 'none')
+                    : undefined;
+                  return (
+                    <th
+                      key={header.id}
+                      {...(isSortable ? { 'aria-sort': ariaSort } : {})}
+                    >
+                      {header.isPlaceholder ? null : (
+                        isSortable ? (
+                          <Button
+                            variant="ghost"
+                            className="h-auto p-0 font-medium hover:bg-transparent"
+                            onClick={header.column.getToggleSortingHandler()}
+                            aria-label={`Sort by ${typeof header.column.columnDef.header === 'string' ? header.column.columnDef.header : 'column'}`}
+                            tabIndex={0}
+                          >
+                            <div className="flex items-center gap-1">
+                              {typeof header.column.columnDef.header === 'function'
+                                ? header.column.columnDef.header(header.getContext())
+                                : header.column.columnDef.header}
+                              {header.column.getIsSorted() === 'asc' ? (
+                                <ChevronUp className="h-4 w-4" />
+                              ) : header.column.getIsSorted() === 'desc' ? (
+                                <ChevronDown className="h-4 w-4" />
+                              ) : (
+                                <ChevronsUpDown className="h-4 w-4" />
+                              )}
+                            </div>
+                          </Button>
+                        ) : (
+                          <div>
+                            {typeof header.column.columnDef.header === 'function'
+                              ? header.column.columnDef.header(header.getContext())
+                              : header.column.columnDef.header}
+                          </div>
+                        )
+                      )}
+                    </th>
+                  );
+                })}
+            </tr>
+          ))}
+        </thead>
+
+        {/* Table body */}
         <UnifiedTableBody
-          table={table}
-          isCreating={isCreating}
-          creationData={creationData}
-          onCreationDataChange={tableActions.setCreationData}
-          onSaveCreation={() => {
-            if (onCreateRow) {
-              onCreateRow(creationData as Partial<TData>);
+            table={table}
+            isCreating={isCreating}
+            creationData={creationData}
+            onCreationDataChange={tableActions.setCreationData}
+            onSaveCreation={() => {
+              if (onCreateRow) {
+                onCreateRow(creationData as Partial<TData>);
+                tableActions.clearCreationData();
+                tableActions.setCreating(false);
+              }
+            }}
+            onCancelCreation={() => {
               tableActions.clearCreationData();
               tableActions.setCreating(false);
-            }
-          }}
-          onCancelCreation={() => {
-            tableActions.clearCreationData();
-            tableActions.setCreating(false);
-          }}
-          editingRowId={editingRowId}
-          editingData={editingData}
-          onEditingDataChange={(data) => {
-            // Update the editing data in the centralized state
-            if (editingRowId) {
-              tableActions.setEditingRow(editingRowId, data);
-            }
-          }}
-          onSaveEditing={() => {
-            if (onEditRow && editingRowId) {
-              // Find the original row data
-              const originalRow = data.find(row => {
-                const rowId = getRowId ? getRowId(row, 0) : (row as any).id || String(0);
-                return rowId === editingRowId;
-              });
-              if (originalRow) {
-                onEditRow(originalRow, editingData as Partial<TData>);
+            }}
+            editingRowId={editingRowId}
+            editingData={editingData}
+            onEditingDataChange={(data) => {
+              // Update the editing data in the centralized state
+              if (editingRowId) {
+                tableActions.setEditingRow(editingRowId, data);
               }
-            }
-            tableActions.clearEditing();
-          }}
-          onCancelEditing={() => {
-            tableActions.clearEditing();
-          }}
-          grouping={grouping}
-          aggregates={aggregates}
-          getRowId={getRowId}
-          emptyState={React.isValidElement(emptyState) ? undefined : emptyState as any}
-          isFiltered={searchQuery !== '' || columnFilters.length > 0}
-          onClearFilters={() => {
-            setSearchQuery('');
-            setColumnFilters([]);
-          }}
-          enableFiltering={features.filtering}
-          showFilterRow={showFilterRow}
-          enableColumnReordering={features.columnReordering}
-          onColumnOrderChange={setColumnOrder}
-          onColumnDrop={(draggedColumnId, targetColumnId) => {
-            // Handle column drop
-          }}
-          savedColumnOrder={savedColumnOrder}
-          enablePersistence={features.columnReordering}
-          tableId={title ? `datatable-${title.toLowerCase().replace(/\s+/g, '-')}` : undefined}
-          dataLength={finalTableData?.length || 0}
-          virtualHeight={virtualHeight}
-          forceVirtualization={false}
-          hierarchical={features.hierarchical && hierarchical?.enabled ? {
-            ...hierarchical,
-            state: hierarchicalState,
-            expandAll: hierarchicalState.expandAll,
-            collapseAll: hierarchicalState.collapseAll,
-            isAllExpanded: hierarchicalState.getExpandedIds().length > 0 && 
-              hierarchicalState.getExpandedIds().length === (finalTableData as any[]).filter(row => row.isParent).length,
-            hasAnyChildren: (finalTableData as any[]).some(row => row.isParent),
-          } : undefined}
-          actions={effectiveActions}
-        />
-      </table>
+            }}
+            onSaveEditing={() => {
+              if (onEditRow && editingRowId) {
+                // Find the original row data
+                const originalRow = data.find(row => {
+                  const rowId = getRowId ? getRowId(row, 0) : (row as any).id || String(0);
+                  return rowId === editingRowId;
+                });
+                if (originalRow) {
+                  onEditRow(originalRow, editingData as Partial<TData>);
+                }
+              }
+              tableActions.clearEditing();
+            }}
+            onCancelEditing={() => {
+              tableActions.clearEditing();
+            }}
+            grouping={grouping}
+            aggregates={aggregates}
+            getRowId={getRowId}
+            emptyState={React.isValidElement(emptyState) ? undefined : emptyState as any}
+            isFiltered={searchQuery !== '' || columnFilters.length > 0}
+            onClearFilters={() => {
+              setSearchQuery('');
+              setColumnFilters([]);
+            }}
+            enableFiltering={features.filtering}
+            showFilterRow={showFilterRow}
+            enableColumnReordering={features.columnReordering}
+            onColumnOrderChange={setColumnOrder}
+            onColumnDrop={(draggedColumnId, targetColumnId) => {
+              // Handle column drop
+            }}
+            savedColumnOrder={savedColumnOrder}
+            enablePersistence={features.columnReordering}
+            tableId={title ? `datatable-${title.toLowerCase().replace(/\s+/g, '-')}` : undefined}
+            dataLength={finalTableData?.length || 0}
+            virtualHeight={virtualHeight}
+            forceVirtualization={false}
+            hierarchical={features.hierarchical && hierarchical?.enabled ? {
+              ...hierarchical,
+              state: hierarchicalState,
+              expandAll: hierarchicalState.expandAll,
+              collapseAll: hierarchicalState.collapseAll,
+              isAllExpanded: hierarchicalState.getExpandedIds().length > 0 && 
+                hierarchicalState.getExpandedIds().length === (finalTableData as any[]).filter(row => row.isParent).length,
+              hasAnyChildren: (finalTableData as any[]).some(row => row.isParent),
+            } : undefined}
+            actions={effectiveActions}
+          />
 
-      {/* Pagination */}
-      {features.pagination && (
-        <PaginationComponent
-          table={table}
-          pageSizeOptions={finalPageSizeOptions}
-          paginationMode={finalPaginationMode}
-          totalCount={finalDataCount}
-          isLoading={isLoading}
-        />
-      )}
+        {/* Table footer with pagination */}
+        {features.pagination && (
+          <tfoot>
+            <tr>
+              <td colSpan={visibleColumns.length}>
+                <PaginationComponent
+                  table={table}
+                  pageSizeOptions={finalPageSizeOptions}
+                  paginationMode={finalPaginationMode}
+                  totalCount={finalDataCount}
+                  isLoading={isLoading}
+                />
+              </td>
+            </tr>
+          </tfoot>
+        )}
+
+      </table>
 
       {/* Modal Dialogs */}
       <DataTableModals

package/src/components/DataTable/components/DataTableToolbar.tsx

@@ -150,11 +150,10 @@ export function DataTableToolbar<TData extends DataRecord>({
   const currentGroupBy = grouping.length > 0 ? grouping[0] : null;
 
   return (
-    <nav className="flex flex-col sm:flex-row items-stretch sm:items-center gap-4 p-4 border-b bg-sec-50">
-      {/* Left side - Search only */}
+
+<nav className="flex justify-end flex-wrap gap-2">
       {features.search && (
-        <div className="flex items-center gap-2 w-full sm:min-w-[200px] sm:max-w-[300px]">
-          <Search className="h-4 w-4 text-sec-500 flex-shrink-0" />
+
           <Input
             id="table-search"
             placeholder="Search..."
@@ -162,13 +161,13 @@ export function DataTableToolbar<TData extends DataRecord>({
             onChange={(e) => onGlobalFilterChange(e.target.value)}
             aria-label="Search table"
             tabIndex={0}
-            className="flex-1"
+            className="justify-self-start w-50 flex-1"
           />
-        </div>
+
       )}
 
-      {/* Right side - All Buttons in specified order */}
-      <div className="flex items-center gap-2 flex-wrap justify-end sm:justify-end min-w-0">
+
+      
         {/* Grouping */}
         {features.grouping && (
           <GroupingDropdown
@@ -245,7 +244,7 @@ export function DataTableToolbar<TData extends DataRecord>({
           </Button>
         )}
 
-      </div>
-    </nav>
+      </nav>
+
   );
 }