Table
shadcn/uiPowerful table and datagrid built on top of the native table element.
Table
| Name | Status | Role |
|---|---|---|
| John Doe | Active | Admin |
| Jane Smith | Active | User |
| Bob Johnson | Inactive | User |
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/optics/table";<Table className="w-full"> <TableHeader> <TableRow> <TableHead> Name </TableHead> <TableHead> Status </TableHead> <TableHead> Role </TableHead> </TableRow> </TableHeader> <TableBody> <TableRow> <TableCell className="font-medium"> John Doe </TableCell> <TableCell> Active </TableCell> <TableCell> Admin </TableCell> </TableRow> <TableRow> <TableCell className="font-medium"> Jane Smith </TableCell> <TableCell> Active </TableCell> <TableCell> User </TableCell> </TableRow> <TableRow> <TableCell className="font-medium"> Bob Johnson </TableCell> <TableCell> Inactive </TableCell> <TableCell> User </TableCell> </TableRow> </TableBody></Table>import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/optics/table";<Table className="w-full"> <TableHeader> <TableRow> <TableHead> Name </TableHead> <TableHead> Status </TableHead> <TableHead> Role </TableHead> </TableRow> </TableHeader> <TableBody> <TableRow> <TableCell className="font-medium"> John Doe </TableCell> <TableCell> Active </TableCell> <TableCell> Admin </TableCell> </TableRow> <TableRow> <TableCell className="font-medium"> Jane Smith </TableCell> <TableCell> Active </TableCell> <TableCell> User </TableCell> </TableRow> <TableRow> <TableCell className="font-medium"> Bob Johnson </TableCell> <TableCell> Inactive </TableCell> <TableCell> User </TableCell> </TableRow> </TableBody></Table>Installation
pnpm dlx shadcn@latest add @optics/table