Expandable Data List

Ready

Grid-based master-detail list with expandable child rows, search functionality, and independent parent/child column configurations

Key Features

  • ✓Flexible grid-based layout with custom column widths
  • ✓Independent parent and child column configurations
  • ✓Built-in search functionality across all data
  • ✓Custom renderers for cells with badges, avatars, and actions
  • ✓Click handlers for both parent and child rows
  • ✓Expandable/collapsible child rows with smooth animations

Common Use Cases

  • →Invoice Management: Parent rows for invoices with expandable line items
  • →Order Details: Customer orders with product breakdowns
  • →Project Tasks: Projects with nested tasks and subtasks
  • →Patient Records: Patient visits with medical procedures and billing
  • →Shipment Tracking: Shipments with package details

Interactive Demo

Click on any row to expand and see child details. Use the search to filter across all data.

Total Revenue
$2,600.00+12%
Paid
$1,750.00+8%
Pending
$850.00-5%
Patients
4+2
Patient
Service
Total
Date
Status
SJ
Sarah Johnson
Dental Checkup
$450.00
Jan 15, 2024
Fully Paid
MC
Michael Chen
Root Canal Treatment
$1200.00
Jan 14, 2024
Partially Paid
ED
Emily Davis
Orthodontic Consultation
$350.00
Jan 13, 2024
Unpaid
JW
James Wilson
Teeth Whitening
$600.00
Jan 12, 2024
Fully Paid

Component API

Props

  • data - Array of parent row objects
  • columns - Parent column configuration with key, header, width, and render function
  • childKey - Key name for child data in parent objects (default: 'children')
  • childColumns - Child column configuration (independent from parent columns)
  • rowHeight - Height of parent rows in pixels
  • childRowHeight - Height of child rows in pixels
  • showSearch - Enable/disable search functionality
  • onRowClick - Callback for parent row clicks
  • onChildRowClick - Callback for child row clicks

Included Components

  • StatusBadge - Status indicator with icons and colors
  • Avatar - User avatar with initials fallback
  • ActionButton - Inline action buttons with ghost, outline, and primary variants