@jmruthers/pace-core 0.2.5 → 0.2.7

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

package/src/components/DataTable/components/DraggableColumnHeader.tsx

@@ -1,6 +1,5 @@
 import React, { useState } from 'react';
 import { Button } from '../../Button/Button';
-import { TableHead } from '../../Table/Table';
 import { ChevronUp, ChevronDown,ChevronsUpDown } from 'lucide-react';
 import { cn } from '../../../utils/cn';
 import type { Header } from '@tanstack/react-table';
@@ -89,7 +88,7 @@ export function DraggableColumnHeader<TData>({
   };
 
   return (
-    <TableHead
+    <th
       className={cn(
         'px-3 py-2 text-sm font-medium text-left relative group',
         isSortable && 'cursor-pointer hover:bg-sec-50',
@@ -97,10 +96,7 @@ export function DraggableColumnHeader<TData>({
         dragOver && 'bg-main-50 border-main-200',
         enableReordering && 'cursor-move'
       )}
-      style={{
-        width: header.getSize ? header.getSize() : 150,
-        minWidth: header.getSize ? header.getSize() : 150,
-      }}
+      style={{}}
       draggable={enableReordering}
       onDragStart={handleDragStart}
       onDragEnd={handleDragEnd}
@@ -143,6 +139,6 @@ export function DraggableColumnHeader<TData>({
           )}
         </div>
       </div>
-    </TableHead>
+    </th>
   );
 }

package/src/components/DataTable/components/EditableRow.tsx

@@ -1,6 +1,5 @@
 import React from 'react';
 import { flexRender } from '@tanstack/react-table';
-import { TableRow, TableCell } from '../../Table/Table';
 import { ActionButtons } from './ActionButtons';
 import { Input } from '../../Input/Input';
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '../../Select/Select';
@@ -109,9 +108,9 @@ export function EditableRow<TData extends DataRecord>({
   }));
 
   return (
-    <TableRow>
+    <tr>
       {row.getVisibleCells().map((cell: any) => (
-        <TableCell key={cell.id}>
+        <td key={cell.id}>
           {cell.column.id !== 'actions' ? (
                          renderEditField(cell.column, editingData[cell.column.id], (value) => {
                if (typeof value === 'object' && value !== null) {
@@ -140,10 +139,10 @@ export function EditableRow<TData extends DataRecord>({
               </Button>
             </div>
           )}
-        </TableCell>
+        </td>
       ))}
       {actions.length > 0 && (
-        <TableCell>
+        <td>
           <ActionButtons
             row={row.original}
             rowId={rowId}
@@ -153,8 +152,8 @@ export function EditableRow<TData extends DataRecord>({
             isParent={isParent}
             hierarchical={hierarchical}
           />
-        </TableCell>
+        </td>
       )}
-    </TableRow>
+    </tr>
   );
 }

package/src/components/DataTable/components/FilterRow.tsx

@@ -79,7 +79,6 @@ export function FilterRow<TData>({ table, visibleColumns }: FilterRowProps<TData
           <td
             key={header.id}
             className="px-4 py-2"
-            style={{ width: header.getSize() }}
           >
             {canFilter ? (
               <ColumnFilter

package/src/components/DataTable/components/GroupingDropdown.tsx

@@ -56,7 +56,7 @@ export function GroupingDropdown<TData extends DataRecord>({
   }
 
   return (
-    <Select>
+    <Select className="w-40">
       <SelectTrigger asChild>
         <Button 
           variant="outline" 
@@ -66,7 +66,7 @@ export function GroupingDropdown<TData extends DataRecord>({
           <span className="truncate">Grouping</span>
         </Button>
       </SelectTrigger>
-      <SelectContent className="w-48 !bg-main-50 border border-sec-200 shadow-lg z-[9999]" style={{ backgroundColor: 'white' }}>
+      <SelectContent>
         <SelectItem
           value="no-grouping"
           onClick={() => onGroupByChange(null)}