@jmruthers/pace-core 0.6.6 → 0.6.8

package/src/components/ContextSelector/ContextSelector.tsx

@@ -55,7 +55,6 @@ import { LoadingSpinner } from '../LoadingSpinner/LoadingSpinner';
 import { RefreshCw, AlertCircle, Building2, Calendar } from 'lucide-react';
 import { useOrganisations } from '../../hooks/useOrganisations';
 import { useEvents } from '../../hooks/useEvents';
-import { useRBAC } from '../../rbac/hooks/useRBAC';
 import type { Organisation } from '../../types/organisation';
 import type { Event } from '../../types/event';
 import { logger } from '../../utils/core/logger';
@@ -117,32 +116,29 @@ 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);
-  
-  // Call all hooks unconditionally at the top level
-  // Hooks must be called in the same order on every render
+
   // 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)
@@ -156,30 +152,30 @@ export function ContextSelector({
     }
     return '';
   }, [showOrganisations, showEvents, selectedOrganisation?.id, selectedEvent]);
-  
-  // Format display value - must be called before any early returns
+
+  // 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 - must be called before any early returns
+
+  // Determine placeholder text based on what's shown
   const effectivePlaceholder = useMemo(() => {
     if (placeholder !== "Select organisation or event") {
       return placeholder;
@@ -195,10 +191,10 @@ export function ContextSelector({
     }
     return placeholder;
   }, [placeholder, showOrganisations, showEvents]);
-  
+
   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);
@@ -213,7 +209,7 @@ export function ContextSelector({
       }
     }
   };
-  
+
   const handleRetry = async () => {
     try {
       if (showOrganisations && orgError) {
@@ -226,24 +222,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 = [];
@@ -254,17 +250,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"
@@ -273,29 +267,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"
@@ -304,84 +296,74 @@ export function ContextSelector({
               Check Again
             </Button>
           )}
-        </div>
+      </Alert>
       );
     }
     return null;
   }
-  
-  // Early returns have been handled above, now render the main component
+
   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/DataTable.tsx

@@ -283,25 +283,7 @@
 import React from 'react';
 import { DataTableCore } from './components/DataTableCore';
 import { createLogger } from '../../utils/core/logger';
-import { normalizeDataTableFeatures } from './types';
-import type {
-  DataRecord,
-  GetRowId,
-  ServerSideParams,
-  PerformanceConfig,
-  ServerSideConfig,
-  ChunkingConfig,
-  SearchIndexConfig,
-  PaginationMode,
-  EmptyStateConfig,
-  DataTableFeatureConfig,
-  DataTableColumn,
-  SimpleColumn,
-  AggregateConfig,
-  DataTableAction,
-  HierarchicalConfig,
-  DataTableRBACConfig
-} from './types';
+import { normalizeDataTableFeatures, type DataRecord, type GetRowId, type ServerSideParams, type PerformanceConfig, type ServerSideConfig, type ChunkingConfig, type SearchIndexConfig, type PaginationMode, type EmptyStateConfig, type DataTableFeatureConfig, type DataTableColumn, type SimpleColumn, type AggregateConfig, type DataTableAction, type HierarchicalConfig, type DataTableRBACConfig } from './types';
 import type { ImportModalConfig } from './components/ImportModal';
 
 // ============================================================================