chore: release v0.7.7 - DataTable UI fixes

Author: Developer

.changeset/datatable-ui-fixes.md

@@ -0,0 +1,115 @@
+# 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 #70: [DataTable] Missing Sorting Indicators
+- Closes #71: [DataTable] Number Column Right Alignment Not Working
+- Closes #72: [DataTable] Column Resizing Handles Not Working
+
+## 📋 **Checklist**
+
+- [x] All tests passing
+- [x] Linter clean
+- [x] Storybook updated and tested
+- [x] Documentation updated (stories)
+- [x] No breaking changes
+- [x] Issues verified as resolved

.changeset/dry-clubs-hammer.md

@@ -1,5 +1,12 @@
 # @org/showcase
 
+## 0.1.15
+
+### Patch Changes
+
+- Updated dependencies [35e2fbf]
+  - @etherisc/ui-kit@0.7.7
+
 ## 0.1.14
 
 ### Patch Changes

docs/pr-descriptions/73-datatable-ui-fixes.md

@@ -1,6 +1,6 @@
 {
   "name": "@org/showcase",
-  "version": "0.1.14",
+  "version": "0.1.15",
   "private": true,
   "type": "module",
   "scripts": {

packages/showcase/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @etherisc/ui-kit
 
+## 0.7.7
+
+### Patch Changes
+
+- 35e2fbf: Fix DataTable UI issues: sorting indicators, column resizing, and alignment
+
+  - Fix sorting indicators not updating when clicking column headers
+  - Fix column resizing handles not being visible or functional
+  - Fix number column right alignment not working with meta.className
+  - Replace custom SVG icons with lucide-react icons for consistency
+  - Improve DataTable stories with proper alignment examples
+
 ## 0.6.1
 
 ### Patch Changes

packages/showcase/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@etherisc/ui-kit",
-  "version": "0.7.6",
+  "version": "0.7.7",
   "type": "module",
   "license": "Apache-2.0",
   "main": "./dist/index.cjs",