Table
A responsive table component.
import {
Table,
TableBody,
TableCell,
TableHead,
TableHeader,
TableRow,
} from "@/components/ui/table";
export default function Basic() {
return (
<div className="mx-auto w-full max-w-6xl overflow-x-auto">
<Table>
<TableHeader>
<TableRow>
<TableHead>Subscription ID</TableHead>
<TableHead>User ID</TableHead>
<TableHead>Plan Name</TableHead>
<TableHead>Start Date</TableHead>
<TableHead>End Date</TableHead>
<TableHead>Status</TableHead>
<TableHead>Payment Method</TableHead>
</TableRow>
</TableHeader>
<TableBody>
<TableRow>
<TableCell>SUB001</TableCell>
<TableCell>USER001</TableCell>
<TableCell>Pro Plan</TableCell>
<TableCell>2023-04-01</TableCell>
<TableCell>2024-03-31</TableCell>
<TableCell>Active</TableCell>
<TableCell>Credit Card</TableCell>
</TableRow>
<TableRow>
<TableCell>SUB002</TableCell>
<TableCell>USER002</TableCell>
<TableCell>Basic Plan</TableCell>
<TableCell>2023-01-15</TableCell>
<TableCell>2024-01-14</TableCell>
<TableCell>Active</TableCell>
<TableCell>PayPal</TableCell>
</TableRow>
<TableRow>
<TableCell>SUB003</TableCell>
<TableCell>USER003</TableCell>
<TableCell>Enterprise Plan</TableCell>
<TableCell>2022-11-01</TableCell>
<TableCell>2023-10-31</TableCell>
<TableCell>Expired</TableCell>
<TableCell>Bank Transfer</TableCell>
</TableRow>
<TableRow>
<TableCell>SUB004</TableCell>
<TableCell>USER004</TableCell>
<TableCell>Pro Plan</TableCell>
<TableCell>2023-06-01</TableCell>
<TableCell>2024-05-31</TableCell>
<TableCell>Active</TableCell>
<TableCell>Credit Card</TableCell>
</TableRow>
<TableRow>
<TableCell>SUB005</TableCell>
<TableCell>USER005</TableCell>
<TableCell>Basic Plan</TableCell>
<TableCell>2023-03-01</TableCell>
<TableCell>2024-02-28</TableCell>
<TableCell>Active</TableCell>
<TableCell>PayPal</TableCell>
</TableRow>
</TableBody>
</Table>
</div>
);
}
import { Button } from "@/components/ui/button";
import {
Table,
TableBody,
TableCell,
TableHead,
TableHeader,
TableRow,
} from "@/components/ui/table";
export default function WithActions() {
return (
<div className="mx-auto w-full max-w-6xl overflow-x-auto">
<Table>
<TableHeader>
<TableRow>
<TableHead>Folder Name</TableHead>
<TableHead>Description</TableHead>
<TableHead>Bookmarks</TableHead>
<TableHead className="text-right">Actions</TableHead>
</TableRow>
</TableHeader>
<TableBody>
<TableRow>
<TableCell className="font-medium">Work Bookmarks</TableCell>
<TableCell>Bookmarks related to my work projects</TableCell>
<TableCell>25</TableCell>
<TableCell className="text-right">
<div className="flex items-center justify-end gap-2">
<Button variant="outline" size="sm">
Edit
</Button>
<Button variant="outline" size="sm">
Manage
</Button>
<Button variant="outline" size="sm">
Delete
</Button>
</div>
</TableCell>
</TableRow>
<TableRow>
<TableCell className="font-medium">Personal Bookmarks</TableCell>
<TableCell>
Bookmarks for my personal interests and hobbies
</TableCell>
<TableCell>42</TableCell>
<TableCell className="text-right">
<div className="flex items-center justify-end gap-2">
<Button variant="outline" size="sm">
Edit
</Button>
<Button variant="outline" size="sm">
Manage
</Button>
<Button variant="outline" size="sm">
Delete
</Button>
</div>
</TableCell>
</TableRow>
<TableRow>
<TableCell className="font-medium">Travel Bookmarks</TableCell>
<TableCell>Bookmarks for my upcoming travel plans</TableCell>
<TableCell>18</TableCell>
<TableCell className="text-right">
<div className="flex items-center justify-end gap-2">
<Button variant="outline" size="sm">
Edit
</Button>
<Button variant="outline" size="sm">
Manage
</Button>
<Button variant="outline" size="sm">
Delete
</Button>
</div>
</TableCell>
</TableRow>
<TableRow>
<TableCell className="font-medium">Shopping Bookmarks</TableCell>
<TableCell>
Bookmarks for online shopping and product research
</TableCell>
<TableCell>14</TableCell>
<TableCell className="text-right">
<div className="flex items-center justify-end gap-2">
<Button variant="outline" size="sm">
Edit
</Button>
<Button variant="outline" size="sm">
Manage
</Button>
<Button variant="outline" size="sm">
Delete
</Button>
</div>
</TableCell>
</TableRow>
</TableBody>
</Table>
</div>
);
}
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import {
Table,
TableBody,
TableCell,
TableHead,
TableHeader,
TableRow,
} from "@/components/ui/table";
import {
Check,
CheckCircle,
Eye,
InfoCircle,
InfoTriangle,
Trash,
X,
} from "@mynaui/icons-react";
export default function WithIcons() {
return (
<div className="mx-auto w-full max-w-6xl overflow-x-auto">
<Table>
<TableHeader>
<TableRow>
<TableHead className="w-32">Type</TableHead>
<TableHead>Message</TableHead>
<TableHead className="w-32">Status</TableHead>
<TableHead className="w-32">Date</TableHead>
<TableHead className="w-32">Actions</TableHead>
</TableRow>
</TableHeader>
<TableBody>
<TableRow>
<TableCell>
<div className="flex items-center gap-2">
<CheckCircle className="size-5 text-green-500" />
Success
</div>
</TableCell>
<TableCell>Your order has been shipped!</TableCell>
<TableCell>
<Badge variant="outline">Unread</Badge>
</TableCell>
<TableCell>2023-06-01</TableCell>
<TableCell>
<div className="flex items-center gap-2">
<Button variant="ghost" size="icon">
<Check className="size-5" />
<span className="sr-only">Mark as read</span>
</Button>
<Button variant="ghost" size="icon">
<Trash className="size-5" />
<span className="sr-only">Delete</span>
</Button>
<Button variant="ghost" size="icon">
<Eye className="size-5" />
<span className="sr-only">View details</span>
</Button>
</div>
</TableCell>
</TableRow>
<TableRow>
<TableCell>
<div className="flex items-center gap-2">
<InfoTriangle className="size-5 text-yellow-500" />
Warning
</div>
</TableCell>
<TableCell>Your subscription is about to expire.</TableCell>
<TableCell>
<Badge variant="outline">Unread</Badge>
</TableCell>
<TableCell>2023-05-28</TableCell>
<TableCell>
<div className="flex items-center gap-2">
<Button variant="ghost" size="icon">
<Check className="size-5" />
<span className="sr-only">Mark as read</span>
</Button>
<Button variant="ghost" size="icon">
<Trash className="size-5" />
<span className="sr-only">Delete</span>
</Button>
<Button variant="ghost" size="icon">
<Eye className="size-5" />
<span className="sr-only">View details</span>
</Button>
</div>
</TableCell>
</TableRow>
<TableRow>
<TableCell>
<div className="flex items-center gap-2">
<X className="size-5 text-red-500" />
Error
</div>
</TableCell>
<TableCell>There was an error processing your payment.</TableCell>
<TableCell>
<Badge variant="outline">Read</Badge>
</TableCell>
<TableCell>2023-05-15</TableCell>
<TableCell>
<div className="flex items-center gap-2">
<Button variant="ghost" size="icon">
<Check className="size-5" />
<span className="sr-only">Mark as read</span>
</Button>
<Button variant="ghost" size="icon">
<Trash className="size-5" />
<span className="sr-only">Delete</span>
</Button>
<Button variant="ghost" size="icon">
<Eye className="size-5" />
<span className="sr-only">View details</span>
</Button>
</div>
</TableCell>
</TableRow>
<TableRow>
<TableCell>
<div className="flex items-center gap-2">
<InfoCircle className="size-5 text-blue-500" />
Info
</div>
</TableCell>
<TableCell>Your account has been updated.</TableCell>
<TableCell>
<Badge variant="outline">Read</Badge>
</TableCell>
<TableCell>2023-04-30</TableCell>
<TableCell>
<div className="flex items-center gap-2">
<Button variant="ghost" size="icon">
<Check className="size-5" />
<span className="sr-only">Mark as read</span>
</Button>
<Button variant="ghost" size="icon">
<Trash className="size-5" />
<span className="sr-only">Delete</span>
</Button>
<Button variant="ghost" size="icon">
<Eye className="size-5" />
<span className="sr-only">View details</span>
</Button>
</div>
</TableCell>
</TableRow>
</TableBody>
</Table>
</div>
);
}
import {
Card,
CardContent,
CardDescription,
CardHeader,
CardTitle,
} from "@/components/ui/card";
import {
Table,
TableBody,
TableCell,
TableHead,
TableHeader,
TableRow,
} from "@/components/ui/table";
export default function WithCard() {
return (
<Card className="mx-auto my-6 w-full max-w-6xl">
<CardHeader>
<CardTitle>Activity Log</CardTitle>
<CardDescription>
Track user activity, including actions, timestamps, IP addresses, and
details.
</CardDescription>
</CardHeader>
<CardContent>
<Table>
<TableHeader>
<TableRow>
<TableHead>Activity</TableHead>
<TableHead>Timestamp</TableHead>
<TableHead>IP Address</TableHead>
<TableHead>Details</TableHead>
</TableRow>
</TableHeader>
<TableBody>
<TableRow>
<TableCell>Logged in</TableCell>
<TableCell>2023-06-04 10:15 AM</TableCell>
<TableCell>192.168.1.100</TableCell>
<TableCell>Successful login from home network</TableCell>
</TableRow>
<TableRow>
<TableCell>Viewed dashboard</TableCell>
<TableCell>2023-06-04 10:16 AM</TableCell>
<TableCell>192.168.1.100</TableCell>
<TableCell>Accessed the main dashboard</TableCell>
</TableRow>
<TableRow>
<TableCell>Created new project</TableCell>
<TableCell>2023-06-04 11:23 AM</TableCell>
<TableCell>192.168.1.100</TableCell>
<TableCell>
Created a new project with the title Marketing Campaign
</TableCell>
</TableRow>
<TableRow>
<TableCell>Uploaded file</TableCell>
<TableCell>2023-06-04 2:45 PM</TableCell>
<TableCell>192.168.1.101</TableCell>
<TableCell>Uploaded a new design file for the website</TableCell>
</TableRow>
<TableRow>
<TableCell>Edited profile</TableCell>
<TableCell>2023-06-04 4:30 PM</TableCell>
<TableCell>192.168.1.101</TableCell>
<TableCell>
Updated profile picture and contact information
</TableCell>
</TableRow>
</TableBody>
</Table>
</CardContent>
</Card>
);
}
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import {
Table,
TableBody,
TableCell,
TableHead,
TableHeader,
TableRow,
} from "@/components/ui/table";
import { Dots } from "@mynaui/icons-react";
export default function Dense() {
return (
<div className="mx-auto w-full max-w-7xl overflow-x-auto">
<Table>
<TableHeader>
<TableRow>
<TableHead>Title</TableHead>
<TableHead>Shared By</TableHead>
<TableHead>URL</TableHead>
<TableHead>Description</TableHead>
<TableHead>Category</TableHead>
<TableHead>Tags</TableHead>
<TableHead>Date Shared</TableHead>
<TableHead>Permissions</TableHead>
<TableHead>Actions</TableHead>
</TableRow>
</TableHeader>
<TableBody>
<TableRow>
<TableCell>
<div className="font-medium">Tailwind CSS Documentation</div>
</TableCell>
<TableCell>Praveen Juge</TableCell>
<TableCell>
<a href="#" className="text-primary underline">
tailwindcss.com
</a>
</TableCell>
<TableCell>
A utility-first CSS framework for rapidly building custom designs.
</TableCell>
<TableCell>Development</TableCell>
<TableCell>
<div className="flex flex-wrap gap-1">
<Badge>CSS</Badge>
<Badge>Utility</Badge>
<Badge>Framework</Badge>
</div>
</TableCell>
<TableCell>2023-04-15</TableCell>
<TableCell>View</TableCell>
<TableCell>
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button variant="outline" size="icon">
<Dots className="size-6" />
<span className="sr-only">Actions</span>
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent align="end">
<DropdownMenuItem>Edit</DropdownMenuItem>
<DropdownMenuItem>Delete</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
</TableCell>
</TableRow>
<TableRow>
<TableCell>
<div className="font-medium">React Documentation</div>
</TableCell>
<TableCell>Jane Smith</TableCell>
<TableCell>
<a href="#" className="text-primary underline">
reactjs.org
</a>
</TableCell>
<TableCell>
A JavaScript library for building user interfaces.
</TableCell>
<TableCell>Development</TableCell>
<TableCell>
<div className="flex flex-wrap gap-1">
<Badge>JavaScript</Badge>
<Badge>Library</Badge>
<Badge>UI</Badge>
</div>
</TableCell>
<TableCell>2023-03-20</TableCell>
<TableCell>Edit, View</TableCell>
<TableCell>
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button variant="outline" size="icon">
<Dots className="size-6" />
<span className="sr-only">Actions</span>
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent align="end">
<DropdownMenuItem>Edit</DropdownMenuItem>
<DropdownMenuItem>Delete</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
</TableCell>
</TableRow>
<TableRow>
<TableCell>
<div className="font-medium">Figma Design Handbook</div>
</TableCell>
<TableCell>Michael Johnson</TableCell>
<TableCell>
<a href="#" className="text-primary underline">
figma.com/design-handbook
</a>
</TableCell>
<TableCell>
A comprehensive guide to using Figma for design.
</TableCell>
<TableCell>Design</TableCell>
<TableCell>
<div className="flex flex-wrap gap-1">
<Badge>Design</Badge>
<Badge>Figma</Badge>
<Badge>Guide</Badge>
</div>
</TableCell>
<TableCell>2023-02-10</TableCell>
<TableCell>View</TableCell>
<TableCell>
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button variant="outline" size="icon">
<Dots className="size-6" />
<span className="sr-only">Actions</span>
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent align="end">
<DropdownMenuItem>Edit</DropdownMenuItem>
<DropdownMenuItem>Delete</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
</TableCell>
</TableRow>
<TableRow>
<TableCell>
<div className="font-medium">Vercel Deployment Guide</div>
</TableCell>
<TableCell>Sarah Lee</TableCell>
<TableCell>
<a href="#" className="text-primary underline">
vercel.com/docs/deployment
</a>
</TableCell>
<TableCell>
A step-by-step guide to deploying your app with Vercel.
</TableCell>
<TableCell>Development</TableCell>
<TableCell>
<div className="flex flex-wrap gap-1">
<Badge>Deployment</Badge>
<Badge>Vercel</Badge>
<Badge>Guide</Badge>
</div>
</TableCell>
<TableCell>2023-01-25</TableCell>
<TableCell>Edit, View</TableCell>
<TableCell>
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button variant="outline" size="icon">
<Dots className="size-6" />
<span className="sr-only">Actions</span>
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent align="end">
<DropdownMenuItem>Edit</DropdownMenuItem>
<DropdownMenuItem>Delete</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
</TableCell>
</TableRow>
</TableBody>
</Table>
</div>
);
}