fix: resolve DataTable UI issues - sorting indicators, column resizing, and alignment

[christoph2806]

PR #73: Fix DataTable UI Issues - Sorting, Resizing, and Alignment

🎯 Overview

This hotfix resolves three critical DataTable UI issues reported by the web app team, improving the overall user experience and functionality of the DataTable component.

🐛 Issues Fixed

Issue #70: Missing Sorting Indicators ✅

• Problem: No visual indicators for sortable columns or current sort state
• Root Cause: Header groups were memoized, preventing sorting state changes from triggering re-renders
• Solution:
  • Removed memoization from headerGroups to ensure sorting indicators update properly
  • Implemented proper sorting icon logic with lucide-react chevrons:
    • ChevronsUpDown (opacity 50%) for sortable but unsorted columns
    • ChevronUp for ascending sort
    • ChevronDown for descending sort
    • No icon for non-sortable columns

Issue #71: Number Column Right Alignment Not Working ✅

• Problem: meta.className: 'text-right' was not being applied to table cells
• Root Cause: Table cell rendering was not applying the meta.className property
• Solution:
  • Fixed table cell rendering to apply meta.className using cn() utility
  • Added proper TypeScript interface for ColumnMeta
  • Updated stories to demonstrate left, right, and center alignment

Issue #72: Column Resizing Handles Not Working ✅

• Problem: Resize handles were visible but not functional
• Root Cause: Missing column sizing state management and poor handle visibility
• Solution:
  • Added columnSizing state and onColumnSizingChange callback
  • Improved resize handle styling:
    • Increased width from w-1 to w-2 for better visibility
    • Changed background from bg-border to bg-muted-foreground/20
    • Added smooth transitions and better hover effects

🔧 Additional Improvements

Custom SVG Icon Replacement

• Replaced custom SVG icons with lucide-react icons across multiple components:
  • ThemeToggle: Sun and Moon icons
  • NavItem: ChevronRight icon
  • ErrorBoundary: AlertTriangle icon
• Benefits: Better consistency, smaller bundle size, easier maintenance

Enhanced DataTable Stories

• Updated column configurations with explicit sorting and alignment settings
• Added comprehensive examples demonstrating all features:
  • ID & Age columns: Right-aligned numbers with sorting enabled
  • Name & Email columns: Left-aligned text with sorting enabled
  • Status column: Center-aligned badges with sorting disabled

🧪 Testing

• ✅ All DataTable tests passing (19 tests across 3 test files)
• ✅ All UI kit tests passing (1041 tests total)
• ✅ Linter clean (only existing warnings, no new errors)
• ✅ Storybook rebuilt with all fixes included
• ✅ Build successful for both ui-kit and showcase packages

📊 Verification

The updated Storybook now properly demonstrates:

1. ✅ Sorting Indicators:

   • Sortable columns show ChevronsUpDown when unsorted
   • Active sorting shows ChevronUp or ChevronDown
   • Non-sortable columns show no indicators
   • Icons now change when clicking column headers

2. ✅ Column Resizing:

   • Resize handles are now visible with improved styling
   • Hover effects work properly
   • Drag functionality is fully operational
   • Resize handles are now visible and functional

3. ✅ Text Alignment:

   • Numbers (ID, Age): Right-aligned
   • Text (Names, Email): Left-aligned
   • Status badges: Center-aligned
   • All alignments working correctly

🚀 Impact

• User Experience: Significantly improved DataTable usability with working sorting indicators and column resizing
• Developer Experience: Better alignment control and consistent icon usage across components
• Maintenance: Reduced custom code with standardized lucide-react icons
• Performance: Optimized rendering for sorting state changes

📝 Breaking Changes

None. All changes are backward compatible.

🔗 Related Issues

• Closes [DataTable] Missing Sorting Indicators #70: [DataTable] Missing Sorting Indicators
• Closes [DataTable] Number Column Right Alignment Not Working #71: [DataTable] Number Column Right Alignment Not Working
• Closes [DataTable] Column Resizing Handles Not Working #72: [DataTable] Column Resizing Handles Not Working

📋 Checklist

• All tests passing
• Linter clean
• Storybook updated and tested
• Documentation updated (stories)
• No breaking changes
• Issues verified as resolved