Nested Sub-Table Data Table

Shadcn UI Data Table Block

DataTable22 is a left-aligned section featuring a heading, descriptive text, and a data table with nested sub-tables. Each row can expand to reveal a full sub-table showing individual order items with their own columns for product, quantity, and price. The main table displays customer avatars, order status badges, and row action menus.

Light background with dark text. The table has a thin border with rounded corners. Expanded rows reveal a nested table with a muted background, indented from the parent row. Customer cells display circular avatars alongside names. Status values display as badges with icons. Each row has a three-dot menu for actions. Static layout with smooth expand/collapse transitions.

This is a data table designed for hierarchical parent-child data relationships. The nested sub-tables provide a complete view of order line items without separate navigation. The most distinctive feature is the embedded sub-table structure, making it ideal for e-commerce orders, invoices, or any dataset with one-to-many relationships.