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% | 2 Years Ago |
Sign-Up Flow | Paused | Browser | www.notion.so/signup | p1 | staging | Onboarding | 95% | 17 Months Ago |
User Data API | OK | API | api.notion.so/user | p0 | prod | Backend | 90.7% | 18 Months Ago |
Document Creation | OK | Browser | www.notion.so/create-document | p2 | prod staging | Editor | 100% | 15 Months Ago |
Mobile Login | OK | Mobile | m.notion.so/login | p0 | prod | Mobile | 99.9% | 16 Months Ago |
WebSocket Connection | Alert | WebSocket | ws.notion.so/connect | p1 | prod | Realtime | 97.3% | 19 Months Ago |
Payment Gateway | OK | API | api.notion.so/payment | p0 | prod | Payments | 100% | 14 Months Ago |
SSL Certificate Check | OK | SSL | www.notion.so | p0 | prod | Security | No uptime data | 17 Months Ago |
gRPC User Service | OK | gRPC | api.notion.so/user | p1 | prod | Backend | 99.2% | 17 Months Ago |
User Profile Load | OK | Browser | www.notion.so/profile | p2 | prod | Frontend | 99.8% | 14 Months Ago |
Installation
Copy and paste the following code into your project.
import * as React from "react";
import { cn } from "~/utils/tailwind";
const Table = React.forwardRef<
HTMLTableElement,
React.HTMLAttributes<HTMLTableElement>
>(({ className, ...props }, ref) => (
<div className="relative w-full overflow-auto">
<table
ref={ref}
className={cn("w-full caption-bottom text-3.5", className)}
{...props}
/>
</div>
));
Table.displayName = "Table";
const TableHeader = React.forwardRef<
HTMLTableSectionElement,
React.HTMLAttributes<HTMLTableSectionElement>
>(({ className, ...props }, ref) => (
<thead ref={ref} className={cn("[&_tr]:border-b", className)} {...props} />
));
TableHeader.displayName = "TableHeader";
const TableBody = React.forwardRef<
HTMLTableSectionElement,
React.HTMLAttributes<HTMLTableSectionElement>
>(({ className, ...props }, ref) => (
<tbody
ref={ref}
className={cn("[&_tr:last-child]:border-0", className)}
{...props}
/>
));
TableBody.displayName = "TableBody";
const TableFooter = React.forwardRef<
HTMLTableSectionElement,
React.HTMLAttributes<HTMLTableSectionElement>
>(({ className, ...props }, ref) => (
<tfoot
ref={ref}
className={cn(
"border-t bg-accent/50 font-medium [&>tr]:last:border-b-0",
className,
)}
{...props}
/>
));
TableFooter.displayName = "TableFooter";
const TableRow = React.forwardRef<
HTMLTableRowElement,
React.HTMLAttributes<HTMLTableRowElement>
>(({ className, ...props }, ref) => (
<tr
ref={ref}
className={cn(
"border-b transition-colors hover:bg-accent/50 data-[state=selected]:bg-accent/50",
className,
)}
{...props}
/>
));
TableRow.displayName = "TableRow";
const TableHead = React.forwardRef<
HTMLTableCellElement,
React.ThHTMLAttributes<HTMLTableCellElement>
>(({ className, ...props }, ref) => (
<th
ref={ref}
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}
/>
));
TableHead.displayName = "TableHead";
const TableCell = React.forwardRef<
HTMLTableCellElement,
React.TdHTMLAttributes<HTMLTableCellElement>
>(({ className, ...props }, ref) => (
<td
ref={ref}
className={cn(
"h-11 pl-3 align-middle last:pr-3 [&:has([role=checkbox])]:pr-0",
className,
)}
{...props}
/>
));
TableCell.displayName = "TableCell";
const TableCaption = React.forwardRef<
HTMLTableCaptionElement,
React.HTMLAttributes<HTMLTableCaptionElement>
>(({ className, ...props }, ref) => (
<caption
ref={ref}
className={cn("mt-3 text-muted-foreground", className)}
{...props}
/>
));
TableCaption.displayName = "TableCaption";
export {
Table,
TableHeader,
TableBody,
TableFooter,
TableRow,
TableHead,
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>