Displays data in a tabular format with rows and columns.
1import {2 Table,3 TableBody,4 TableCaption,Installation
pnpm dlx sprawlify@latest add tablenpx sprawlify@latest add tableyarn sprawlify@latest add tablebunx --bun sprawlify@latest add table
Install the following dependencies:
pnpm add @sprawlify/primitives @sprawlify/reactnpm install @sprawlify/primitives @sprawlify/reactyarn add @sprawlify/primitives @sprawlify/reactbun add @sprawlify/primitives @sprawlify/react
Add the following files to your project:
1"use client";23import * as React from "react";4import { cn } from "@/lib/utils";5import { sprawlify } from "@sprawlify/react";67function Table({ className, ...props }: React.ComponentProps<typeof sprawlify.table>) {8 return (9 <div data-slot="table-container" className="relative w-full overflow-x-auto">10 <sprawlify.table11 data-slot="table"12 className={cn("w-full caption-bottom text-sm", className)}13 {...props}14 />15 </div>16 );17}1819function TableHeader({ className, ...props }: React.ComponentProps<typeof sprawlify.thead>) {20 return (21 <sprawlify.thead22 data-slot="table-header"23 className={cn("[&_tr]:border-b", className)}24 {...props}25 />26 );27}2829function TableBody({ className, ...props }: React.ComponentProps<typeof sprawlify.tbody>) {30 return (31 <sprawlify.tbody32 data-slot="table-body"33 className={cn("[&_tr:last-child]:border-0", className)}34 {...props}35 />36 );37}3839function TableFooter({ className, ...props }: React.ComponentProps<typeof sprawlify.tfoot>) {40 return (41 <sprawlify.tfoot42 data-slot="table-footer"43 className={cn("border-t bg-muted/50 font-medium [&>tr]:last:border-b-0", className)}44 {...props}45 />46 );47}4849function TableRow({ className, ...props }: React.ComponentProps<typeof sprawlify.tr>) {50 return (51 <sprawlify.tr52 data-slot="table-row"53 className={cn(54 "border-b transition-colors hover:bg-muted/50 has-aria-expanded:bg-muted/50 data-[state=selected]:bg-muted",55 className,56 )}57 {...props}58 />59 );60}6162function TableHead({ className, ...props }: React.ComponentProps<typeof sprawlify.th>) {63 return (64 <sprawlify.th65 data-slot="table-head"66 className={cn(67 "h-10 px-2 text-left align-middle font-medium whitespace-nowrap text-foreground [&:has([role=checkbox])]:pr-0",68 className,69 )}70 {...props}71 />72 );73}7475function TableCell({ className, ...props }: React.ComponentProps<typeof sprawlify.td>) {76 return (77 <sprawlify.td78 data-slot="table-cell"79 className={cn("p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0", className)}80 {...props}81 />82 );83}8485function TableCaption({ className, ...props }: React.ComponentProps<typeof sprawlify.caption>) {86 return (87 <sprawlify.caption88 data-slot="table-caption"89 className={cn("mt-4 text-sm text-muted-foreground", className)}90 {...props}91 />92 );93}9495export { Table, TableHeader, TableBody, TableFooter, TableHead, TableRow, TableCell, TableCaption };96Update the import paths to match your project setup.
Usage
1import {
2 Table,
3 TableBody,
4 TableCaption,
5 TableCell,
6 TableHead,
7 TableHeader,
8 TableRow,
9} from "@/components/ui/table"1<Table>
2 <TableCaption>A list of your recent invoices.</TableCaption>
3 <TableHeader>
4 <TableRow>
5 <TableHead className="w-[100px]">Invoice</TableHead>
6 <TableHead>Status</TableHead>
7 <TableHead>Method</TableHead>
8 <TableHead className="text-right">Amount</TableHead>
9 </TableRow>
10 </TableHeader>
11 <TableBody>
12 <TableRow>
13 <TableCell className="font-medium">INV001</TableCell>
14 <TableCell>Paid</TableCell>
15 <TableCell>Credit Card</TableCell>
16 <TableCell className="text-right">$250.00</TableCell>
17 </TableRow>
18 </TableBody>
19</Table>Examples
Actions
A table showing actions for each row using a <DropdownMenu /> component.
1import { Button } from "@/components/ui/button";2import {3 DropdownMenu,4 DropdownMenuContent,Footer
Use the <TableFooter /> component to add a footer to the table.
1import {2 Table,3 TableBody,4 TableCaption,Get PRO
Need premium blocks and templates? Upgrade to PRO and get access.