Expandable Rows

Data Table

Display tabular data with expandable rows for additional details. Each row is a <details> element with a grid-based summary.

Recent Orders
Click any row to expand and see order details and shipping information.
Order ID Customer Date Status Total
ORD-001 Alice Johnson 2024-01-15 completed $284.00

Order Items

Wireless Keyboard x 1 $89.00
USB-C Hub x 2 $130.00
Mouse Pad XL x 1 $65.00
Total $284.00

Shipping Details

Address
123 Main St, New York, NY 10001
Method
Express Shipping
Tracking
1Z999AA10123456784
ORD-002 Bob Smith 2024-01-14 processing $156.50

Order Items

Mechanical Keyboard x 1 $129.00
Keycap Set x 1 $27.50
Total $156.50

Shipping Details

Address
456 Oak Ave, Los Angeles, CA 90001
Method
Standard Shipping
ORD-003 Carol Davis 2024-01-13 pending $89.99

Order Items

Webcam HD x 1 $89.99
Total $89.99

Shipping Details

Address
789 Pine Rd, Chicago, IL 60601
Method
Free Shipping
Why Expandable Rows?
  • • Show key information in the row, details on demand
  • • Maintain scanability while providing depth
  • • Reduce navigation by keeping context in place
  • • Works well with both mouse and keyboard navigation