Skip to content

v0.4.0: Hierarchical Subrows & Comprehensive Documentation

Latest
Latest

Choose a tag to compare

View all tags
@jacksonkasi1 jacksonkasi1 released this 17 Nov 18:38
· 55 commits to main since this release
v0.4.0
2d2b0e5

🎉 Release v0.4.0: Hierarchical Subrows & Comprehensive Documentation

This is a major feature release introducing hierarchical subrows support, comprehensive documentation, and three production-ready example implementations.

🌟 Highlights

Hierarchical Subrows Feature

Three powerful rendering modes for nested data structures:

  • Same-Columns Mode: Parent and child rows share the same column structure
  • Custom-Columns Mode: Different columns for parent rows and subrows
  • Custom-Component Mode: Fully custom React components for rendering subrows

Three Complete Examples

  1. Orders Example (/example/orders) - same-columns mode

    • Hierarchical order management with order items
    • CRUD operations with bulk actions
    • Demonstrates parent-child relationships

  2. Bookings Example (/example/bookings) - custom-columns mode

    • Logistics bookings with detailed stops
    • Different column structures for parent/child
    • Shows flexible column configuration

  3. Tickets Example (/example/tickets) - custom-component mode

    • Ticket management with threaded comments
    • Custom comment components
    • Maximum rendering flexibility

Comprehensive Documentation

Complete Fumadocs documentation site with:

  • Getting Started guides
  • Interactive API documentation
  • Configuration guides
  • Best practices & troubleshooting
  • Multi-language support
  • Advanced search functionality

✨ What's New

Added

  • ✅ Hierarchical Subrows Feature with expand/collapse animations
  • ✅ Cross-Page Selection for hierarchical data
  • ✅ Enhanced Export with flatten and parent-only options
  • ✅ New Database Tables: Orders, Bookings, Tickets with relationships
  • ✅ Batch API Endpoints for efficient cross-page operations
  • ✅ Expand Icon Component with smooth animations
  • ✅ Status Badge Component with predefined styles
  • ✅ Currency & Date Formatting utilities
  • ✅ Updated Shadcn Registry with expand-icon.tsx and exceljs dependency

Changed

  • ⚡ Performance Optimizations for subrow rendering and sorting
  • ⚡ N+1 Query Fixes in API endpoints with batch fetching
  • 📝 Documentation Structure - moved legacy docs, added Fumadocs site
  • 🎨 Improved Styling - better theming and visibility

Fixed

  • 🐛 Selection Issues with hierarchical data
  • 🐛 Checkbox State Management for parent-child relationships
  • 🐛 Row ID Generation for nested structures
  • 🐛 Cross-Page Selection now works correctly with subrows

📦 Installation

Quick Start with Shadcn CLI

# Install required Shadcn UI components
npx shadcn@latest add button checkbox input select popover calendar dropdown-menu separator table command

# Install the data-table component (now with subrows!)
npx shadcn@latest add https://tnks-data-table.vercel.app/r/data-table.json

# Install the calendar-date-picker dependency
npx shadcn@latest add https://tnks-data-table.vercel.app/r/calendar-date-picker.json

Using Subrows Feature

<DataTable
  columns={columns}
  fetchDataFn={fetchData}
  subRowsConfig={{
    enabled: true,
    mode: 'same-columns', // or 'custom-columns' or 'custom-component'
    subRowsField: 'subRows',
    defaultExpanded: false,
  }}
  // ... other props
/>

📊 Technical Stats

  • 186 files changed
  • +26,151 insertions, -3,444 deletions
  • 31 commits since v0.3.2
  • All tests passing ✅ (typecheck, lint, build)

🗄️ Database & API

New Tables

  • tbl_orders & tbl_order_items - Order management
  • tbl_bookings & tbl_booking_stops - Logistics tracking
  • tbl_tickets & tbl_ticket_comments - Support system

New Endpoints

  • GET /api/orders/grouped - Orders with items
  • GET /api/orders/by-ids - Batch fetch orders
  • GET /api/bookings/grouped - Bookings with stops
  • GET /api/bookings/by-ids - Batch fetch bookings
  • GET /api/tickets/grouped - Tickets with comments
  • GET /api/tickets/by-ids - Batch fetch tickets

Seed Data

  • 200 orders with 2,714 order items
  • 150 bookings with logistics stops
  • 100 tickets with comments

🔧 Migration Notes

Database Migration

npm run db:push    # Push new schema
npm run seed       # Seed example data (optional)

Dependencies

This release uses exceljs instead of xlsx for better Excel export support. Update your dependencies:

npm install exceljs
npm uninstall xlsx  # if you were using it directly

Breaking Changes

None! All existing functionality remains fully backward compatible.

📚 Documentation

🙏 Acknowledgments

Special thanks to the community for feedback and suggestions!

Full Changelog: v0.3.2...v0.4.0

🤖 Generated with Claude Code

Co-Authored-By: Claude noreply@anthropic.com

Assets 2
Loading