Table

Display your data in a structured tabular format.

InvoiceCustomerStatusMethodAmount
INV001John DoePaidCredit Card$250.00
INV002Jane DoePendingPayPal$150.00
INV003Mark DoeUnpaidBank Transfer$350.00
INV004Robert DoePaidCredit Card$450.00
INV005Isabella DoePaidPayPal$550.00
INV006Mrs. DoePendingBank Transfer$200.00
INV007Mr. DoeUnpaidCredit Card$300.00
Total$2,500.00


pnpm dlx shadcn@latest add 'https://retroui.dev/r/table.json'


Examples

Default

InvoiceCustomerStatusMethodAmount
INV001John DoePaidCredit Card$250.00
INV002Jane DoePendingPayPal$150.00
INV003Mark DoeUnpaidBank Transfer$350.00
INV004Robert DoePaidCredit Card$450.00
INV005Isabella DoePaidPayPal$550.00
INV006Mrs. DoePendingBank Transfer$200.00
INV007Mr. DoeUnpaidCredit Card$300.00
Total$2,500.00


With Checkbox Selection

NameRoleDepartmentStatusSalary
Alice JohnsonSoftware EngineerEngineeringActive$ 85,000
Bob SmithProduct ManagerProductActive$ 95,000
Carol WilliamsDesignerDesignOn Leave$ 70,000
David BrownDevOps EngineerEngineeringActive$ 90,000
Eve DavisQA EngineerEngineeringActive$ 75,000
Frank WilsonMarketing ManagerMarketingInactive$ 80,000
Selected: 0 / 6$ 495000


With Sticky Header

IDDateDescriptionCategoryAmount
TXN0012024-01-15Payment from Customer ARevenue$1,250.00
TXN0022024-01-15Office Supplies PurchaseExpense-$85.50
TXN0032024-01-16Software License RenewalExpense-$299.99
TXN0042024-01-16Payment from Customer BRevenue$750.00
TXN0052024-01-17Marketing CampaignExpense-$500.00
TXN0062024-01-17Freelancer PaymentExpense-$400.00
TXN0072024-01-18Payment from Customer CRevenue$2,100.00
TXN0082024-01-18Equipment PurchaseExpense-$1,200.00
TXN0092024-01-19Subscription FeeExpense-$49.99
TXN0102024-01-19Payment from Customer DRevenue$890.00
TXN0112024-01-20Travel ExpensesExpense-$350.00
TXN0122024-01-20Payment from Customer ERevenue$1,500.00


API Reference

The Table component is composed of several sub-components:


  • Table - The main table wrapper
  • Table.Header - Table header section (<thead>)
  • Table.Body - Table body section (<tbody>)
  • Table.Footer - Table footer section (<tfoot>)
  • Table.Row - Table row (<tr>)
  • Table.Head - Table header cell (<th>)
  • Table.Cell - Table data cell (<td>)

Last Updated: 08 Jul, 2025