Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
React Basic Table
Basic table component with shadcn/ui Table primitives showing user data in rows with headers and bordered container styling
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
Tables—the most universal way to show structured data. This React table uses shadcn/ui Table components with TableHeader, TableBody, TableRow, and TableCell for semantic HTML table structure. Built with proper semantic markup and accessible table elements, basic tables display tabular data in clean rows and columns—perfect for user lists, transaction history, product catalogs, admin dashboards, or any interface where structured data needs clear presentation without fancy features like sorting or filtering—just pure, readable data display.
| Name | Location | Status | Balance | |
|---|---|---|---|---|
| John Doe | [email protected] | New York | Active | $1,234.56 |
| Jane Smith | [email protected] | London | Active | $2,345.67 |
| Bob Johnson | [email protected] | Tokyo | Inactive | $567.89 |
| Alice Williams | [email protected] | Paris | Active | $3,456.78 |
Pattern created by @haydenbleasel
Installation
Related patterns you will also like
Table with Avatar
User table with avatar images
Table Without Dividers
Borderless row styling
Striped Table
Alternating row background colors
Data Table
Advanced table with sorting and filtering
Card
Alternative data display container
Badge
Status indicators for table cells
Questions you might have
React Compatibility Table
A React table showing browser compatibility with CheckIcon and XIcon indicating supported and unsupported features using centered icons
React Table with Avatar
Table component combining shadcn/ui Avatar with user images and fallback initials in first column for rich visual user identification