Table

A component that displays data in a tabular format

A list of users in your workspace.
Name	Email	Role	Status
Alice Johnson	alice.johnson@example.com	Admin	Active
Bruno Silva	bruno.silva@example.com	Editor	Invited
Clara Mendes	clara.mendes@example.com	Viewer	Inactive
David Park	david.park@example.com	Editor	Active

Installation


pnpm dlx shadcn@latest add @shark-ui/table

Usage


import { 
  Table, 
  TableBody, 
  TableCaption, 
  TableCell, 
  TableHead, 
  TableHeader, 
  TableRow,
  TableFooter,
} from "@/components/ui/table";


<Table>
  <TableCaption>A list of users in your workspace.</TableCaption>
  <TableHeader>
    <TableRow>
      <TableHead>Name</TableHead>
      <TableHead>Email</TableHead>
      <TableHead>Role</TableHead>
      <TableHead>Status</TableHead>
    </TableRow>
  </TableHeader>
  <TableBody>
    <TableRow>
      <TableCell>Vinicius</TableCell>
      <TableCell>vinicius@example.com</TableCell>
      <TableCell>Developer</TableCell>
      <TableCell>Active</TableCell>
    </TableRow>
  </TableBody>
</Table>

Examples

Default

A list of users in your workspace.
Name	Email	Role	Status
Alice Johnson	alice.johnson@example.com	Admin	Active
Bruno Silva	bruno.silva@example.com	Editor	Invited
Clara Mendes	clara.mendes@example.com	Viewer	Inactive
David Park	david.park@example.com	Editor	Active

On This Page

Installation Usage Examples Default