Data Table

Installation#

1. Install the dependencies

   npm install cn

2. Copy the source into your project

   components/ui/table.tsx

   "use client"import * as React from "react"import { cn } from "cn"function Table({ className, ...props }: React.ComponentProps<"table">) {  return (    <div      data-slot="table-container"      className="relative w-full overflow-x-auto"    >      <table        data-slot="table"        className={cn("w-full caption-bottom text-sm", className)}        {...props}      />    </div>  )}function TableHeader({ className, ...props }: React.ComponentProps<"thead">) {  return (    <thead      data-slot="table-header"      className={cn("[&_tr]:border-b", className)}      {...props}    />  )}function TableBody({ className, ...props }: React.ComponentProps<"tbody">) {  return (    <tbody      data-slot="table-body"      className={cn("[&_tr:last-child]:border-0", className)}      {...props}    />  )}function TableFooter({ className, ...props }: React.ComponentProps<"tfoot">) {  return (    <tfoot      data-slot="table-footer"      className={cn(        "border-t bg-muted/50 font-medium [&>tr]:last:border-b-0",        className      )}      {...props}    />  )}function TableRow({ className, ...props }: React.ComponentProps<"tr">) {  return (    <tr      data-slot="table-row"      className={cn(        "border-b transition-colors hover:bg-muted/50 has-aria-expanded:bg-muted/50 data-[state=selected]:bg-muted",        className      )}      {...props}    />  )}function TableHead({ className, ...props }: React.ComponentProps<"th">) {  return (    <th      data-slot="table-head"      className={cn(        "h-10 px-2 text-left align-middle font-medium whitespace-nowrap text-foreground [&:has([role=checkbox])]:pr-0",        className      )}      {...props}    />  )}function TableCell({ className, ...props }: React.ComponentProps<"td">) {  return (    <td      data-slot="table-cell"      className={cn(        "p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0",        className      )}      {...props}    />  )}function TableCaption({  className,  ...props}: React.ComponentProps<"caption">) {  return (    <caption      data-slot="table-caption"      className={cn("mt-4 text-sm text-muted-foreground", className)}      {...props}    />  )}export {  Table,  TableHeader,  TableBody,  TableFooter,  TableHead,  TableRow,  TableCell,  TableCaption,}

3. Make sure the foundation is in place

   Components read their colors, radius and surfaces from the tokens in app/globals.css. See Theming.

Usage#

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