Table
A responsive table component.
Name | Status | Type | Domain | Tags | Envs | Teams | Uptime | Last Modified |
---|---|---|---|---|---|---|---|---|
User Login | OK | Browser | www.notion.so/login | p0 | prod | Authentication | 100% | 3 Years Ago |
Sign-Up Flow | Paused | Browser | www.notion.so/signup | p1 | staging | Onboarding | 95% | 23 Months Ago |
User Data API | OK | API | api.notion.so/user | p0 | prod | Backend | 90.7% | 23 Months Ago |
Document Creation | OK | Browser | www.notion.so/create-document | p2 | prod staging | Editor | 100% | 20 Months Ago |
Mobile Login | OK | Mobile | m.notion.so/login | p0 | prod | Mobile | 99.9% | 21 Months Ago |
WebSocket Connection | Alert | WebSocket | ws.notion.so/connect | p1 | prod | Realtime | 97.3% | 2 Years Ago |
Payment Gateway | OK | API | api.notion.so/payment | p0 | prod | Payments | 100% | 20 Months Ago |
SSL Certificate Check | OK | SSL | www.notion.so | p0 | prod | Security | No uptime data | 23 Months Ago |
gRPC User Service | OK | gRPC | api.notion.so/user | p1 | prod | Backend | 99.2% | 22 Months Ago |
User Profile Load | OK | Browser | www.notion.so/profile | p2 | prod | Frontend | 99.8% | 20 Months Ago |
Installation
Copy and paste the following code into your project.
import { cn } from "~/utils/tailwind";
function Table({ className, ...props }: React.ComponentProps<"table">) {
return (
<div className="relative w-full overflow-auto">
<table
className={cn("w-full caption-bottom text-3.5", className)}
{...props}
/>
</div>
);
}
function TableHeader({ className, ...props }: React.ComponentProps<"thead">) {
return <thead className={cn("[&_tr]:border-b", className)} {...props} />;
}
function TableBody({ className, ...props }: React.ComponentProps<"tbody">) {
return (
<tbody className={cn("[&_tr:last-child]:border-0", className)} {...props} />
);
}
function TableFooter({ className, ...props }: React.ComponentProps<"tfoot">) {
return (
<tfoot
className={cn(
"border-t bg-accent/50 font-medium [&>tr]:last:border-b-0",
className,
)}
{...props}
/>
);
}
function TableRow({ className, ...props }: React.ComponentProps<"tr">) {
return (
<tr
className={cn(
"border-b transition-colors hover:bg-accent/50 data-[state=selected]:bg-accent/50",
className,
)}
{...props}
/>
);
}
function TableHead({ className, ...props }: React.ComponentProps<"th">) {
return (
<th
className={cn(
"h-9 pl-3 text-left align-middle font-medium text-muted-foreground",
"last:pr-3",
"[&:has([role=checkbox])]:pr-0",
className,
)}
{...props}
/>
);
}
function TableCell({ className, ...props }: React.ComponentProps<"td">) {
return (
<td
className={cn(
"h-11 pl-3 align-middle",
"last:pr-3",
"[&:has([role=checkbox])]:pr-0",
className,
)}
{...props}
/>
);
}
function TableCaption({
className,
...props
}: React.ComponentProps<"caption">) {
return (
<caption
className={cn("mt-3 text-muted-foreground", className)}
{...props}
/>
);
}
export {
Table,
TableHeader,
TableBody,
TableFooter,
TableHead,
TableRow,
TableCell,
TableCaption,
};
Update the import paths to match your project setup.
Usage
import {
Table,
TableBody,
TableCaption,
TableCell,
TableHead,
TableHeader,
TableRow,
} from "~/components/ui/Table";
<Table>
<TableCaption>A list of your recent invoices.</TableCaption>
<TableHeader>
<TableRow>
<TableHead className="w-[100px]">Invoice</TableHead>
<TableHead>Status</TableHead>
<TableHead>Method</TableHead>
<TableHead className="text-right">Amount</TableHead>
</TableRow>
</TableHeader>
<TableBody>
<TableRow>
<TableCell className="font-medium">INV001</TableCell>
<TableCell>Paid</TableCell>
<TableCell>Credit Card</TableCell>
<TableCell className="text-right">$250.00</TableCell>
</TableRow>
</TableBody>
</Table>