Table

A styled, accessible HTML table compound component with scrollable container, header, body, footer, rows, cells, and caption parts.

Default
A list of recent invoices.
InvoiceCustomerStatusAmount
INV-001Acme CorpPaid$250.00
INV-002Globex IncPending$125.00
INV-003InitechOverdue$400.00
INV-004Umbrella LtdPaid$310.00
INV-005HooliPending$90.00
Total$1,175.00
Empty State
IDTitleAssigneePriorityDue
T-101Fix login redirectAlex R.HighJun 3
T-102Update onboarding flowMorgan C.MediumJun 7
T-103Audit accessibilityJordan P.LowJun 14
Loading Skeleton

Loading products…

IDProductCategoryStockPrice
Selectable Rows
NameTypeSizeModified
quarterly-report.pdfPDF2.4 MBToday, 9:41 AM
design-assets.zipArchive18.3 MBYesterday
budget-2026.xlsxSpreadsheet540 KBMay 29
presentation.pptxPresentation7.1 MBMay 28
meeting-notes.docxDocument124 KBMay 27
Sortable Columns
NameDepartmentRoleStart DateSalary
Alex RiveraEngineeringSenior Engineer2021-03-15$130,000
Morgan ChenDesignLead Designer2020-07-01$115,000
Jordan ParkEngineeringStaff Engineer2019-01-20$155,000
Casey LiuProductProduct Manager2022-05-10$120,000
Taylor KimDesignUX Researcher2023-02-28$95,000
Sam PatelEngineeringEngineer II2022-09-01$105,000
With Actions
Team members — click the menu to take action.
NameEmailRoleJoined
Alex Riveraalex@example.comAdminJan 2024
Morgan Chenmorgan@example.comEditorFeb 2024
Jordan Parkjordan@example.comEditorMar 2024
Casey Liucasey@example.comViewerApr 2024
Taylor Kimtaylor@example.comViewerMay 2024
With Status Badges
Order IDProductQtyDateStatus
ORD-8821Mechanical Keyboard2May 28Shipped
ORD-8820USB-C Hub1May 27Processing
ORD-8819Monitor Stand1May 26Delivered
ORD-8818Webcam HD3May 25Cancelled
ORD-8817Desk Lamp1May 24Delivered
ORD-8816Cable Management Kit4May 23Processing

Installation

npx shadcn@latest add @byronwade/table

Props

PropTypeDefaultDescription
classNamestring—Additional CSS classes merged onto the root table element.
childrenReact.ReactNode—Table content — typically TableHeader, TableBody, and TableFooter compound parts.