shadcn.io is not affiliated with official shadcn/ui
Tabs examples · Content
Tabs with Tables for React
All Users, Active and Inactive tabs, each showing a scrollable table of the matching users.
Filtering one table by status reads clearer as tabs than as a dropdown. Each tab shows a Table of users from one array, filtered by status, inside a fixed-height scroll area. Use it for users by status, orders by state or any list split into a few groups.
Preview
Installation
FAQ
How does each tab choose its rows?
A views array holds each tab's rows. All Users shows all eight people, Active keeps the four with Active status and Inactive the other four.
Why is the table in a ScrollArea?
ScrollArea with h-[400px] keeps every panel the same height, and the table scrolls inside it when there are more rows.
How does the status badge pick a variant?
Active rows get the default Badge and Inactive rows the secondary one.
Which table parts does it use?
Table, TableHeader, TableHead, TableBody, TableRow and TableCell. The columns are Name, Email, Role and Status, and the table sits in a bordered bg-card block.
Where do the users come from?
A typed users array of eight people with a name, email, role (Admin, Editor or Viewer) and status. Replace it with your own data.
Do the triggers show a count?
No. The labels are All Users, Active and Inactive, and All Users is the default. Add a Badge inside a trigger for a count.
Related
- Basic TabsFour horizontal tabs that switch between
- Basic TableA bordered table of users with their
- Tabs with FormsLogin and Register tabs that each hold a
- Basic ScrollArea Scroll AreaA basic vertical scroll area for long
- Tabs with CardsFeatured, Popular and Recent tabs, each
- Controlled TabsThree step tabs held in state, with