Overview

Migrate all MUI Table-related components to shadcn/ui Table implementation.

Parent Issue: #18993
Estimated Duration: 2-3 days
Priority: High
Depends on: #18995 (Core Components)

Component Usage Analysis

• Table: 17 usages
• TableHead: 12 usages
• TableBody: 17 usages
• TableRow: 22 usages
• TableCell: 23 usages
• TableContainer: 18 usages
• TableFooter: 1 usage
• Total: 97 table-related component instances

Tasks

Table Component Generation

• Generate shadcn Table component suite
• Create Table, TableHeader, TableBody, TableRow, TableCell
• Set up responsive table wrapper
• Configure table styling with Tailwind

Core Table Migration

• Replace TableContainer with responsive wrapper
• Migrate Table component (17 instances)
• Update TableHead to TableHeader (12 instances)
• Convert TableBody components (17 instances)
• Replace TableRow components (22 instances)
• Migrate TableCell components (23 instances)

Advanced Table Features

• Migrate sorting functionality
• Update filtering integration
• Convert pagination components
• Handle loading states with Skeleton
• Migrate empty state handling

Specific Table Implementations

• Workspace tables in dashboard
• User management tables
• Template tables
• Audit log tables
• Resource tables

Files to Update

High Priority Files

• src/components/TableEmpty/TableEmpty.tsx - Empty state component
• src/components/TableEmpty/TableEmpty.stories.tsx - Storybook stories
• Workspace-related table components
• User management table components
• Template listing tables

Table-Heavy Pages

• Dashboard workspace listings
• Admin user management
• Template management
• Audit logs
• Resource monitoring

Implementation Strategy

1. Generate Base Components: Create shadcn Table components
2. Create Table Utilities: Build sorting, filtering helpers
3. Migrate Simple Tables: Start with basic data tables
4. Complex Tables: Handle advanced features
5. Responsive Design: Ensure mobile compatibility

Acceptance Criteria

• All Table components use shadcn implementation
• Sorting functionality works correctly
• Filtering integration maintained
• Pagination works as expected
• Loading states display properly
• Empty states render correctly
• Responsive design on mobile devices
• Accessibility features maintained
• Performance is equal or better
• All table tests pass

Component API Compatibility

Table Structure Mapping

// MUI -> shadcn
TableContainer -> div with overflow handling
Table -> Table
TableHead -> TableHeader
TableBody -> TableBody
TableRow -> TableRow
TableCell -> TableCell (with proper variants)

Styling Considerations

• Maintain zebra striping for readability
• Preserve hover states
• Keep consistent spacing
• Ensure proper borders and dividers
• Maintain responsive behavior

Advanced Features

Sorting

• Column header click handling
• Sort direction indicators
• Multi-column sorting support
• Custom sort functions

Filtering

• Integration with Filter component
• Search functionality
• Column-specific filters
• Filter state management

Pagination

• Page size controls
• Navigation controls
• Total count display
• Loading states during pagination

Testing Requirements

• Unit tests for table components
• Integration tests for sorting/filtering
• Visual regression tests
• Accessibility testing (screen readers)
• Performance testing with large datasets
• Mobile responsiveness testing

Performance Considerations

• Virtual scrolling for large datasets
• Efficient re-rendering
• Memoization of table cells
• Optimized sorting algorithms

Documentation Updates

• Table component usage guide
• Sorting and filtering examples
• Responsive table patterns
• Accessibility guidelines
• Performance best practices