@jmruthers/pace-core 0.6.5 → 0.6.7

package/src/components/ContextSelector/ContextSelector.tsx

@@ -117,30 +117,30 @@ export function ContextSelector({
   showOrganisations = true,
   showEvents = true
 }: ContextSelectorProps) {
-  const { 
-    organisations, 
+  const {
+    organisations,
     selectedOrganisation,
     isLoading: orgLoading,
     error: orgError,
     refreshOrganisations
   } = useOrganisations();
-  
-  const { 
-    events, 
-    selectedEvent, 
-    isLoading: eventLoading, 
-    error: eventError, 
+
+  const {
+    events,
+    selectedEvent,
+    isLoading: eventLoading,
+    error: eventError,
     refreshEvents
   } = useEvents();
-  
+
   const { isSuperAdmin } = useRBAC();
-  
+
   const isLoading = (showOrganisations && orgLoading) || (showEvents && eventLoading);
   const hasError = (showOrganisations && orgError) || (showEvents && eventError);
-  const hasItems = 
-    (showOrganisations && (organisations?.length || 0) > 0) || 
+  const hasItems =
+    (showOrganisations && (organisations?.length || 0) > 0) ||
     (showEvents && (events?.length || 0) > 0);
-  
+
   // Determine current selection value
   // Priority: Event selection takes precedence over organisation selection
   // When an event is selected, show the event (even if an org is also selected)
@@ -154,10 +154,10 @@ export function ContextSelector({
     }
     return '';
   }, [showOrganisations, showEvents, selectedOrganisation?.id, selectedEvent]);
-  
+
   const handleValueChange = (value: string) => {
     if (disabled || isLoading) return;
-    
+
     if (value.startsWith('org:') && showOrganisations) {
       const orgId = value.replace('org:', '');
       const org = organisations?.find(o => o.id === orgId);
@@ -172,7 +172,7 @@ export function ContextSelector({
       }
     }
   };
-  
+
   const handleRetry = async () => {
     try {
       if (showOrganisations && orgError) {
@@ -185,24 +185,24 @@ export function ContextSelector({
       logger.error('ContextSelector', 'Failed to refresh:', error);
     }
   };
-  
+
   // Loading state - only show loading if we don't have any items yet
   // This prevents the selector from being stuck in loading when data exists
   if (isLoading && !hasItems) {
-    const loadingText = compact ? "Loading..." : 
+    const loadingText = compact ? "Loading..." :
       showOrganisations && showEvents ? "Loading organisations and events..." :
-      showOrganisations ? "Loading organisations..." :
-      "Loading events...";
+        showOrganisations ? "Loading organisations..." :
+          "Loading events...";
     return (
-      <div className={`flex items-center gap-2 ${className}`}>
-        <LoadingSpinner size="sm" />
+      <p className={className}>
+        <LoadingSpinner size="sm" /><br/>
         <span className="text-sm text-muted-foreground">
           {loadingText}
         </span>
-      </div>
+      </p>
     );
   }
-  
+
   // Error state
   if (hasError) {
     const errorMessages = [];
@@ -213,17 +213,15 @@ export function ContextSelector({
       errorMessages.push(`Failed to load events: ${eventError.message}`);
     }
     return (
-      <div className={`space-y-2 ${className}`}>
-        <Alert variant="destructive">
-          <AlertCircle className="size-4" />
-          <AlertDescription>
-            {errorMessages.join(' ')}
-          </AlertDescription>
-        </Alert>
+      <Alert variant="destructive" className={`space-y-2 ${className}`}>
+        <AlertCircle className="size-4" />
+        <AlertDescription>
+          {errorMessages.join(' ')}
+        </AlertDescription>
         {showRetryButton && (
-          <Button 
-            variant="outline" 
-            size="sm" 
+          <Button
+            variant="outline"
+            size="sm"
             onClick={handleRetry}
             disabled={isLoading}
             className="w-full"
@@ -232,29 +230,27 @@ export function ContextSelector({
             Retry
           </Button>
         )}
-      </div>
+      </Alert>
     );
   }
-  
+
   // No items available
   if (!hasItems) {
     if (showNoItemsMessage) {
-      const noItemsText = 
+      const noItemsText =
         showOrganisations && showEvents ? "No organisations or events available. Please contact your administrator." :
-        showOrganisations ? "No organisations available. Please contact your administrator." :
-        "No events available. Please contact your administrator.";
+          showOrganisations ? "No organisations available. Please contact your administrator." :
+            "No events available. Please contact your administrator.";
       return (
-        <div className={`space-y-2 ${className}`}>
-          <Alert>
+          <Alert className={`space-y-2 ${className}`}>
             <AlertCircle className="size-4" />
             <AlertDescription>
               {noItemsText}
             </AlertDescription>
-          </Alert>
           {showRetryButton && (
-            <Button 
-              variant="outline" 
-              size="sm" 
+            <Button
+              variant="outline"
+              size="sm"
               onClick={handleRetry}
               disabled={isLoading}
               className="w-full"
@@ -263,34 +259,34 @@ export function ContextSelector({
               Check Again
             </Button>
           )}
-        </div>
+      </Alert>
       );
     }
     return null;
   }
-  
+
   // Format display value
   // Priority: Event selection takes precedence over organisation selection (matches currentValue)
   const displayValue = useMemo(() => {
     if (showEvents && selectedEvent) {
       return (
-        <div className="flex items-center gap-2">
-          <Calendar className="size-4 flex-shrink-0" />
+        <>
+          <Calendar className="inline-block size-4 mr-2" />
           <span className="truncate">{selectedEvent.event_name}</span>
-        </div>
+        </>
       );
     }
     if (showOrganisations && selectedOrganisation) {
       return (
-        <div className="flex items-center gap-2">
-          <Building2 className="size-4 flex-shrink-0" />
+        <>
+          <Building2 className="inline-block size-4 mr-2" />
           <span className="truncate">{selectedOrganisation.display_name}</span>
-        </div>
+        </>
       );
     }
     return null;
   }, [showOrganisations, showEvents, selectedOrganisation, selectedEvent]);
-  
+
   // Determine placeholder text based on what's shown
   const effectivePlaceholder = useMemo(() => {
     if (placeholder !== "Select organisation or event") {
@@ -307,78 +303,69 @@ export function ContextSelector({
     }
     return placeholder;
   }, [placeholder, showOrganisations, showEvents]);
-  
+
   return (
-    <div className={className} data-testid="context-selector">
-      <Select 
-        value={currentValue}
-        onValueChange={handleValueChange}
-        disabled={disabled || isLoading}
+    <Select
+      value={currentValue}
+      onValueChange={handleValueChange}
+      disabled={disabled || isLoading}
+      className={className} data-testid="context-selector"
+    >
+      <SelectTrigger
+        className="text-left"
+        variant="outline"
       >
-        <SelectTrigger 
-          className="text-left"
-          variant="outline"
-        >
-          <SelectValue placeholder={effectivePlaceholder}>
-            {displayValue}
-          </SelectValue>
-        </SelectTrigger>
-        <SelectContent>
-          {/* Organisations Section */}
-          {showOrganisations && organisations && organisations.length > 0 && (
-            <>
-              <SelectGroup>
-                <SelectLabel>Organisations</SelectLabel>
-                {organisations.map((org) => (
-                  <SelectItem 
-                    key={org.id} 
-                    value={`org:${org.id}`}
-                  >
-                    <div className="flex items-center gap-2">
-                      <Building2 className="size-4" />
-                      <div className="flex flex-col">
-                        <span className="font-medium">{org.display_name}</span>
-                        {!compact && org.description && (
-                          <span className="text-xs text-muted-foreground truncate max-w-40">
-                            {org.description}
-                          </span>
-                        )}
-                      </div>
-                    </div>
-                  </SelectItem>
-                ))}
-              </SelectGroup>
-              {showEvents && events && events.length > 0 && <SelectSeparator />}
-            </>
-          )}
-          
-          {/* Events Section */}
-          {showEvents && events && events.length > 0 && (
+        <SelectValue placeholder={effectivePlaceholder}>
+          {displayValue}
+        </SelectValue>
+      </SelectTrigger>
+      <SelectContent>
+        {/* Organisations Section */}
+        {showOrganisations && organisations && organisations.length > 0 && (
+          <>
             <SelectGroup>
-              <SelectLabel>Events</SelectLabel>
-              {events.map((event) => (
-                <SelectItem 
-                  key={event.event_id || event.id} 
-                  value={`event:${event.event_id || event.id}`}
+              <SelectLabel>Organisations</SelectLabel>
+              {organisations.map((org) => (
+                <SelectItem
+                  key={org.id}
+                  value={`org:${org.id}`}
                 >
-                  <div className="flex items-center gap-2">
-                    <Calendar className="size-4" />
-                    <div className="flex flex-col">
-                      <span className="font-medium">{event.event_name}</span>
-                      {!compact && event.event_date && (
-                        <span className="text-xs text-muted-foreground">
-                          {new Date(event.event_date).toLocaleDateString()}
-                        </span>
-                      )}
-                    </div>
-                  </div>
+                  <Building2 className="inline-block size-4 mr-2" />
+                  <span className="font-medium">{org.display_name}</span><br />
+                  {!compact && org.description && (
+                    <span className="text-xs text-muted-foreground">
+                      {org.description}
+                    </span>
+                  )}
                 </SelectItem>
               ))}
             </SelectGroup>
-          )}
-        </SelectContent>
-      </Select>
-    </div>
+            {showEvents && events && events.length > 0 && <SelectSeparator />}
+          </>
+        )}
+
+        {/* Events Section */}
+        {showEvents && events && events.length > 0 && (
+          <SelectGroup>
+            <SelectLabel>Events</SelectLabel>
+            {events.map((event) => (
+              <SelectItem
+                key={event.event_id || event.id}
+                value={`event:${event.event_id || event.id}`}
+              >
+                <Calendar className=" inline-block size-4 mr-2" />
+                <span className="font-medium">{event.event_name}</span><br />
+                {!compact && event.event_date && (
+                  <span className="text-xs text-muted-foreground">
+                    {new Date(event.event_date).toLocaleDateString()}
+                  </span>
+                )}
+              </SelectItem>
+            ))}
+          </SelectGroup>
+        )}
+      </SelectContent>
+    </Select>
   );
 }
 

package/src/components/DataTable/AUDIT_REPORT.md

@@ -0,0 +1,293 @@
+# DataTable Component Audit Report
+
+**Date**: 2024-12-17  
+**Last Updated**: 2024-12-17 (All deprecated components deleted)  
+**Scope**: Complete audit of DataTable component structure, imports/exports, and component status
+
+## Executive Summary
+
+This audit examined all subcomponents, hooks, and utilities within the DataTable component to identify:
+- Deprecated/unused components
+- Export/import structure
+- Component usage patterns
+- Potential cleanup opportunities
+
+## Component Status Summary
+
+### ✅ ACTIVE COMPONENTS (Used in Production)
+
+| Component | Status | Location | Used By | Notes |
+|-----------|--------|----------|---------|-------|
+| **ActionButtons** | ✅ Active | `components/ActionButtons.tsx` | `RowComponent` | Used for row actions |
+| **BulkOperationsDropdown** | ✅ Active | `components/BulkOperationsDropdown.tsx` | `DataTableToolbar` | Bulk operations menu |
+| **ColumnFilter** | ✅ Active | `components/ColumnFilter.tsx` | `FilterRow` | Individual column filtering |
+| **ColumnVisibilityDropdown** | ✅ Active | `components/ColumnVisibilityDropdown.tsx` | `DataTableToolbar` | Show/hide columns |
+| **DataTableCore** | ✅ Active | `components/DataTableCore.tsx` | `DataTable.tsx` | Main orchestrator |
+| **DataTableErrorBoundary** | ✅ Active | `components/DataTableErrorBoundary.tsx` | `DataTable.tsx` | Error handling |
+| **DataTableLayout** | ✅ Active | `components/DataTableLayout.tsx` | `DataTableCore` | Main layout component |
+| **DataTableModals** | ✅ Active | `components/DataTableModals.tsx` | `DataTableLayout` | Modal container |
+| **DataTableToolbar** | ✅ Active | `components/DataTableToolbar.tsx` | `DataTableLayout` | Toolbar with controls |
+| **EditableRow** | ✅ Active | `components/EditableRow.tsx` | `RowComponent` | Inline row editing |
+| **EmptyState** | ✅ Active | `components/EmptyState.tsx` | `UnifiedTableBody` | Empty state display |
+| **FilterRow** | ✅ Active | `components/FilterRow.tsx` | `UnifiedTableBody` | Filter row for columns |
+| **GroupingDropdown** | ✅ Active | `components/GroupingDropdown.tsx` | `DataTableToolbar` | Group by dropdown |
+| **ImportModal** | ✅ Active | `components/ImportModal.tsx` | `DataTableModals` | CSV import modal |
+| **LoadingState** | ✅ Active | `components/LoadingState.tsx` | `DataTableCore`, `UnifiedTableBody` | Loading spinner |
+| **PaginationControls** | ✅ Active | `components/PaginationControls.tsx` | `DataTableLayout` | Pagination UI |
+| **RowComponent** | ✅ Active | `components/RowComponent.tsx` | `UnifiedTableBody` | Row rendering (as MemoizedRow) |
+| **SortIndicator** | ✅ Active | `components/SortIndicator.tsx` | `DataTableLayout` | Sorting chevrons |
+| **UnifiedTableBody** | ✅ Active | `components/UnifiedTableBody.tsx` | `DataTableLayout` | Table body with virtualization |
+
+### ❌ DELETED COMPONENTS (Removed 2024-12-17)
+
+| Component | Status | Location | Reason | Action Taken |
+|-----------|--------|----------|--------|--------------|
+| **GroupHeader** | ❌ **DELETED** | `components/GroupHeader.tsx` | Not imported/used anywhere | ✅ **DELETED** - Functionality implemented inline in `RowComponent` |
+| **ViewRowModal** | ❌ **DELETED** | `components/ViewRowModal.tsx` | Only used in tests, not integrated | ✅ **DELETED** |
+| **ExpandButton** | ❌ **DELETED** | `components/ExpandButton.tsx` | Not used in production; functionality inline | ✅ **DELETED** - Removed from types.ts |
+| **DraggableColumnHeader** | ❌ **DELETED** | `components/DraggableColumnHeader.tsx` | Not imported anywhere | ✅ **DELETED** |
+| **VirtualizedDataTable** | ❌ **DELETED** | `components/VirtualizedDataTable.tsx` | Replaced by UnifiedTableBody | ✅ **DELETED** (previous cleanup) |
+
+### 🔧 UTILITY FILES
+
+| Utility | Status | Location | Used By | Notes |
+|---------|--------|----------|---------|-------|
+| **cellValueUtils** | ✅ Active | `components/cellValueUtils.ts` | `DataTableCore` | Converts data to cell values |
+| **EditFields** | ✅ Active | `components/EditFields.tsx` | `UnifiedTableBody`, `EditableRow` | Field rendering for editing |
+
+### 📁 INTERNAL COMPONENTS (Not Exported)
+
+| Component | Status | Location | Used By | Notes |
+|-----------|--------|----------|---------|-------|
+| **AccessDeniedPage** | ✅ Active | `components/AccessDeniedPage.tsx` | `DataTableCore` | RBAC access denied page |
+| **EditFields** | ✅ Active | `components/EditFields.tsx` | `UnifiedTableBody`, `EditableRow` | Internal field rendering |
+
+## Hooks Status
+
+### ✅ ACTIVE HOOKS
+
+| Hook | Status | Location | Used By | Notes |
+|------|--------|----------|---------|-------|
+| **useColumnOrderPersistence** | ✅ Active | `hooks/useColumnOrderPersistence.ts` | `DataTableCore` | Persists column order |
+| **useColumnVisibilityPersistence** | ✅ Active | `hooks/useColumnVisibilityPersistence.ts` | `DataTableCore` | Persists column visibility |
+| **useDataTableConfiguration** | ✅ Active | `hooks/useDataTableConfiguration.ts` | `DataTableCore` | Configuration management |
+| **useDataTableDataPipeline** | ✅ Active | `hooks/useDataTableDataPipeline.ts` | `DataTableCore` | Data processing pipeline |
+| **useDataTablePermissions** | ✅ Active | `hooks/useDataTablePermissions.ts` | `DataTableCore` | RBAC permissions |
+| **useDataTableState** | ✅ Active | `hooks/useDataTableState.ts` | `DataTableCore` | State management |
+| **useEffectiveColumnOrder** | ✅ Active | `hooks/useEffectiveColumnOrder.ts` | `DataTableCore` | Column ordering logic |
+| **useHierarchicalState** | ✅ Active | `hooks/useHierarchicalState.ts` | `DataTableCore` | Hierarchical data state |
+| **useKeyboardNavigation** | ✅ Active | `hooks/useKeyboardNavigation.ts` | `DataTableCore` | Keyboard navigation |
+| **useServerSideDataEffect** | ✅ Active | `hooks/useServerSideDataEffect.ts` | `DataTableCore` | Server-side data fetching |
+| **useTableColumns** | ✅ Active | `hooks/useTableColumns.ts` | `DataTableCore` | Column management |
+| **useTableHandlers** | ✅ Active | `hooks/useTableHandlers.ts` | `DataTableCore` | Event handlers |
+
+### 🔧 COMPONENT-LEVEL HOOKS
+
+| Hook | Status | Location | Used By | Notes |
+|------|--------|----------|---------|-------|
+| **useImportModalFocus** | ✅ Active | `components/hooks/useImportModalFocus.ts` | `DataTableCore` | Focus management for import modal |
+| **usePermissionTracking** | ✅ Active | `components/hooks/usePermissionTracking.ts` | `DataTableCore` | Permission change tracking |
+
+## Utilities Status
+
+### ✅ ACTIVE UTILITIES
+
+| Utility | Status | Location | Used By | Notes |
+|---------|--------|----------|---------|-------|
+| **a11yUtils** | ✅ Active | `utils/a11yUtils.ts` | Multiple components | Accessibility utilities |
+| **aggregationUtils** | ✅ Active | `utils/aggregationUtils.ts` | Exported, used externally | Aggregation functions |
+| **columnUtils** | ✅ Active | `utils/columnUtils.ts` | Multiple components | Column helper functions |
+| **errorHandling** | ✅ Active | `utils/errorHandling.ts` | `useDataTablePerformance` | Error handling stubs (used by performance hook) |
+| **exportUtils** | ✅ Active | `utils/exportUtils.ts` | `DataTableLayout` | CSV export functionality |
+| **flexibleImport** | ✅ Active | `utils/flexibleImport.ts` | Exported, used externally | Flexible CSV import |
+| **hierarchicalSorting** | ✅ Active | `utils/hierarchicalSorting.ts` | Used internally | Hierarchical data sorting |
+| **hierarchicalUtils** | ✅ Active | `utils/hierarchicalUtils.ts` | `RowComponent` | Hierarchical data utilities |
+| **paginationUtils** | ✅ Active | `utils/paginationUtils.ts` | Used internally | Pagination calculations |
+| **performanceUtils** | ✅ Active | `utils/performanceUtils.ts` | Exported, used externally | Performance utilities |
+| **rowUtils** | ✅ Active | `utils/rowUtils.ts` | Multiple components | Row helper functions |
+
+### ❌ DEPRECATED UTILITIES
+
+| Utility | Status | Location | Notes |
+|---------|--------|----------|-------|
+| **debugTools** | ❌ **DELETED** | `utils/debugTools.ts` | Unused debugging infrastructure | ✅ **DELETED** |
+
+## Context Status
+
+### ✅ ACTIVE CONTEXT
+
+| Context | Status | Location | Used By | Notes |
+|---------|--------|----------|---------|-------|
+| **DataTableContext** | ✅ Active | `context/DataTableContext.tsx` | Used internally | Newer context implementation |
+
+### ❌ DEPRECATED CONTEXT
+
+| Context | Status | Location | Notes |
+|---------|--------|----------|-------|
+| **core/DataTableContext** | ❌ **DELETED** | `core/DataTableContext.tsx` | Already deleted - replaced by hook-based architecture |
+
+## Core Architecture Status
+
+### ✅ ACTIVE CORE COMPONENTS
+
+| Component | Status | Location | Used By | Notes |
+|-----------|--------|----------|---------|-------|
+| **ActionManager** | ✅ Active | `core/ActionManager.ts` | Used by core architecture | Action management |
+| **ColumnFactory** | ✅ Active | `core/ColumnFactory.ts` | `DataTableCore`, exported | Column creation |
+| **ColumnManager** | ✅ Active | `core/ColumnManager.ts` | Used by core architecture | Column management |
+| **DataManager** | ✅ Active | `core/DataManager.ts` | Used by core architecture | Data management |
+| **LocalDataAdapter** | ✅ Active | `core/LocalDataAdapter.ts` | Used by core architecture | Local data adapter |
+| **PluginRegistry** | ✅ Active | `core/PluginRegistry.ts` | Used by core architecture | Plugin system |
+| **StateManager** | ✅ Active | `core/StateManager.ts` | Used by core architecture | State management |
+| **interfaces** | ✅ Active | `core/interfaces.ts` | Core architecture | Type definitions |
+
+## Export Structure Analysis
+
+### Main Exports (`index.ts`)
+
+**Exported Components:**
+- ✅ `DataTable` - Main component
+- ✅ `DataTableCore` - Core orchestrator
+- ✅ `DataTableErrorBoundary` - Error boundary
+- ✅ `PaginationControls`, `EnhancedPaginationControls` - Pagination
+- ✅ All components from `components/index.ts` (via `export * from './components'`)
+- ✅ All utilities from `utils/index.ts` (via `export * from './utils'`)
+
+### Component Exports (`components/index.ts`)
+
+**Exported:**
+- ✅ ActionButtons
+- ✅ BulkOperationsDropdown
+- ✅ ColumnVisibilityDropdown
+- ✅ UnifiedTableBody
+- ✅ EditableRow
+- ✅ DataTableToolbar
+- ✅ DataTableModals
+- ✅ ImportModal (+ ImportModalConfig type)
+- ❌ **GroupHeader** - Exported but UNUSED
+- ✅ GroupingDropdown
+- ✅ DataTableErrorBoundary
+- ✅ PaginationControls
+- ✅ LoadingState
+- ✅ EmptyState
+- ✅ SortIndicator (+ SortIndicatorProps type)
+
+**NOT Exported (Internal Only):**
+- AccessDeniedPage
+- ColumnFilter
+- DataTableCore
+- DataTableLayout
+- EditFields
+- FilterRow
+- RowComponent (exported as MemoizedRow)
+- cellValueUtils
+
+## Detailed Findings
+
+### ✅ All Deprecated Components Deleted (2024-12-17)
+
+The following components, hooks, and utilities have been successfully removed:
+
+1. **GroupHeader** - ✅ DELETED
+   - Component and test file removed
+   - Removed from exports
+   - Functionality handled inline by `RowComponent`
+
+2. **ViewRowModal** - ✅ DELETED
+   - Component and test file removed
+   - Never integrated into DataTableModals
+
+3. **ExpandButton** - ✅ DELETED
+   - Component and test file removed
+   - `ExpandButtonProps` interface removed from `types.ts`
+   - `expandButton` prop removed from `HierarchicalConfig`
+   - Functionality handled inline by `RowComponent`
+
+4. **DraggableColumnHeader** - ✅ DELETED
+   - Component removed
+   - Drag-and-drop UI not implemented (column reordering persistence exists via `useColumnOrderPersistence`)
+
+5. **useColumnReordering** - ✅ DELETED
+   - Hook and test file removed
+   - Related to DraggableColumnHeader
+
+6. **debugTools** - ✅ DELETED
+   - Utility removed (unused debugging infrastructure)
+
+7. **VirtualizedDataTable** - ✅ DELETED (previous cleanup)
+   - Replaced by UnifiedTableBody
+
+8. **core/DataTableContext** - ✅ DELETED (previous cleanup)
+   - Replaced by hook-based architecture
+
+All related documentation has been updated to reflect these deletions.
+
+## Import/Export Structure
+
+### External Usage Check
+
+**Components imported from `@jmruthers/pace-core`:**
+- Only `DataTable` main component is imported externally
+- No external usage of subcomponents found
+- All subcomponents are internal to the DataTable system
+
+### Internal Dependencies
+
+**Clean Structure:**
+- ✅ No circular dependencies detected
+- ✅ Clear separation between components, hooks, and utils
+- ✅ Proper export hierarchy
+
+## Recommendations
+
+### ✅ Completed Actions (2024-12-17)
+
+All deprecated components have been successfully deleted:
+1. ✅ **GroupHeader** - Deleted component, test, and removed from exports
+2. ✅ **ViewRowModal** - Deleted component and test
+3. ✅ **ExpandButton** - Deleted component, test, and removed from types.ts
+4. ✅ **DraggableColumnHeader** - Deleted component
+5. ✅ **useColumnReordering** - Deleted hook and test
+6. ✅ **debugTools** - Deleted utility
+7. ✅ **VirtualizedDataTable** - Already deleted (previous cleanup)
+8. ✅ **core/DataTableContext** - Already deleted (previous cleanup)
+
+### Code Quality Improvements
+
+1. ✅ **Removed unused exports** from `components/index.ts`
+
+2. **Document internal components** that are not exported but used internally
+
+3. **Consider consolidating** inline group header logic in RowComponent into a shared utility if it grows
+
+## Summary Statistics
+
+- **Total Components**: 20 (after cleanup)
+  - ✅ Active: 20
+  - ❌ Deleted: 5 (GroupHeader, ViewRowModal, ExpandButton, DraggableColumnHeader, VirtualizedDataTable)
+
+- **Total Hooks**: 12 (after cleanup)
+  - ✅ Active: 12
+  - ❌ Deleted: 1 (useColumnReordering)
+
+- **Total Utilities**: 10 (after cleanup)
+  - ✅ Active: 10
+  - ❌ Deleted: 1 (debugTools)
+
+- **Total Core Components**: 8
+  - ✅ Active: 8
+
+## Conclusion
+
+The DataTable component structure is well-organized with clear separation of concerns. All deprecated and unused components have been successfully removed:
+
+✅ **Cleanup Complete (2024-12-17)**
+- All deprecated components deleted
+- All unused hooks removed
+- All unused utilities removed
+- Type references cleaned up
+- Documentation updated
+- Export structure cleaned
+
+All remaining active components, hooks, and utilities are properly used and integrated into the DataTable system. The codebase is now cleaner and more maintainable.
+

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

@@ -354,7 +354,11 @@ describe('DataTableCore Component', () => {
         />
       );
 
-      expect(screen.getByText('Loading...')).toBeInTheDocument();
+      // There are two "Loading..." texts (sr-only and visible), use getAllByText
+      const loadingTexts = screen.getAllByText('Loading...');
+      expect(loadingTexts.length).toBeGreaterThan(0);
+      // Check that the visible text is present
+      expect(screen.getByText('Loading...', { selector: 'strong' })).toBeInTheDocument();
     });
   });
 
@@ -1267,7 +1271,11 @@ describe('DataTableCore Component', () => {
         />
       );
 
-      expect(screen.getByText('Loading...')).toBeInTheDocument();
+      // There are two "Loading..." texts (sr-only and visible), use getAllByText
+      const loadingTexts = screen.getAllByText('Loading...');
+      expect(loadingTexts.length).toBeGreaterThan(0);
+      // Check that the visible text is present
+      expect(screen.getByText('Loading...', { selector: 'strong' })).toBeInTheDocument();
     });
 
     it('handles permission loading state', () => {