Table

A simple table component for displaying tabular data.

A list of current projects.
Project	Status	Team	Budget
Website Redesign	Paid	Frontend Team	$12,500
Mobile App	Unpaid	Mobile Team	$8,750
API Integration	Pending	Backend Team	$5,200
Database Migration	Paid	DevOps Team	$3,800
User Dashboard	Paid	UX Team	$7,200
Security Audit	Failed	Security Team	$2,100
Total Budget			$39,550

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

export function TableDemo() {
  return (
    <Table>
      <TableCaption>A list of current projects.</TableCaption>
      <TableHeader>
        <TableRow>
          <TableHead>Project</TableHead>
          <TableHead>Status</TableHead>
          <TableHead>Team</TableHead>
          <TableHead className="text-right">Budget</TableHead>
        </TableRow>
      </TableHeader>
      <TableBody>
        <TableRow>
          <TableCell className="font-medium">Website Redesign</TableCell>
          <TableCell>
            <Badge variant="outline">
              <span
                className="size-1.5 rounded-full bg-emerald-500"
                aria-hidden="true"
              />
              Paid
            </Badge>
          </TableCell>
          <TableCell>Frontend Team</TableCell>
          <TableCell className="text-right">$12,500</TableCell>
        </TableRow>
        <TableRow>
          <TableCell className="font-medium">Mobile App</TableCell>
          <TableCell>
            <Badge variant="outline">
              <span
                className="size-1.5 rounded-full bg-muted-foreground/64"
                aria-hidden="true"
              />
              Unpaid
            </Badge>
          </TableCell>
          <TableCell>Mobile Team</TableCell>
          <TableCell className="text-right">$8,750</TableCell>
        </TableRow>
        <TableRow>
          <TableCell className="font-medium">API Integration</TableCell>
          <TableCell>
            <Badge variant="outline">
              <span
                className="size-1.5 rounded-full bg-amber-500"
                aria-hidden="true"
              />
              Pending
            </Badge>
          </TableCell>
          <TableCell>Backend Team</TableCell>
          <TableCell className="text-right">$5,200</TableCell>
        </TableRow>
        <TableRow>
          <TableCell className="font-medium">Database Migration</TableCell>
          <TableCell>
            <Badge variant="outline">
              <span
                className="size-1.5 rounded-full bg-emerald-500"
                aria-hidden="true"
              />
              Paid
            </Badge>
          </TableCell>
          <TableCell>DevOps Team</TableCell>
          <TableCell className="text-right">$3,800</TableCell>
        </TableRow>
        <TableRow>
          <TableCell className="font-medium">User Dashboard</TableCell>
          <TableCell>
            <Badge variant="outline">
              <span
                className="size-1.5 rounded-full bg-emerald-500"
                aria-hidden="true"
              />
              Paid
            </Badge>
          </TableCell>
          <TableCell>UX Team</TableCell>
          <TableCell className="text-right">$7,200</TableCell>
        </TableRow>
        <TableRow>
          <TableCell className="font-medium">Security Audit</TableCell>
          <TableCell>
            <Badge variant="outline">
              <span
                className="size-1.5 rounded-full bg-red-500"
                aria-hidden="true"
              />
              Failed
            </Badge>
          </TableCell>
          <TableCell>Security Team</TableCell>
          <TableCell className="text-right">$2,100</TableCell>
        </TableRow>
      </TableBody>
      <TableFooter>
        <TableRow>
          <TableCell colSpan={3}>Total Budget</TableCell>
          <TableCell className="text-right font-medium">$39,550</TableCell>
        </TableRow>
      </TableFooter>
    </Table>
  )
}

Installation


pnpm dlx shadcn@latest add https://coss.com/ui/r/table.json

Usage

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

<Table>
  <TableCaption>Caption</TableCaption>
  <TableHeader>
    <TableRow>
      <TableHead>Header</TableHead>
      <TableHead>Header</TableHead>
    </TableRow>
  </TableHeader>
  <TableBody>
    <TableRow>
      <TableCell>Cell</TableCell>
      <TableCell>Cell</TableCell>
    </TableRow>
  </TableBody>
</Table>

Examples

Framed Table

Project	Status	Team	Budget
Website Redesign	Paid	Frontend Team	$12,500
Mobile App	Unpaid	Mobile Team	$8,750
API Integration	Pending	Backend Team	$5,200
Database Migration	Paid	DevOps Team	$3,800
User Dashboard	Paid	UX Team	$7,200
Security Audit	Failed	Security Team	$2,100
Total Budget			$39,550

import { Badge } from "@/components/ui/badge"
import { Frame, FramePanel } from "@/components/ui/frame"
import {
  Table,
  TableBody,
  TableCell,
  TableFooter,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table"

export function TableFramed() {
  return (
    <Frame className="w-full">
      <FramePanel>
        <Table>
          <TableHeader>
            <TableRow>
              <TableHead>Project</TableHead>
              <TableHead>Status</TableHead>
              <TableHead>Team</TableHead>
              <TableHead className="text-right">Budget</TableHead>
            </TableRow>
          </TableHeader>
          <TableBody>
            <TableRow>
              <TableCell className="font-medium">Website Redesign</TableCell>
              <TableCell>
                <Badge variant="outline">
                  <span
                    className="size-1.5 rounded-full bg-emerald-500"
                    aria-hidden="true"
                  />
                  Paid
                </Badge>
              </TableCell>
              <TableCell>Frontend Team</TableCell>
              <TableCell className="text-right">$12,500</TableCell>
            </TableRow>
            <TableRow>
              <TableCell className="font-medium">Mobile App</TableCell>
              <TableCell>
                <Badge variant="outline">
                  <span
                    className="size-1.5 rounded-full bg-muted-foreground/64"
                    aria-hidden="true"
                  />
                  Unpaid
                </Badge>
              </TableCell>
              <TableCell>Mobile Team</TableCell>
              <TableCell className="text-right">$8,750</TableCell>
            </TableRow>
            <TableRow>
              <TableCell className="font-medium">API Integration</TableCell>
              <TableCell>
                <Badge variant="outline">
                  <span
                    className="size-1.5 rounded-full bg-amber-500"
                    aria-hidden="true"
                  />
                  Pending
                </Badge>
              </TableCell>
              <TableCell>Backend Team</TableCell>
              <TableCell className="text-right">$5,200</TableCell>
            </TableRow>
            <TableRow>
              <TableCell className="font-medium">Database Migration</TableCell>
              <TableCell>
                <Badge variant="outline">
                  <span
                    className="size-1.5 rounded-full bg-emerald-500"
                    aria-hidden="true"
                  />
                  Paid
                </Badge>
              </TableCell>
              <TableCell>DevOps Team</TableCell>
              <TableCell className="text-right">$3,800</TableCell>
            </TableRow>
            <TableRow>
              <TableCell className="font-medium">User Dashboard</TableCell>
              <TableCell>
                <Badge variant="outline">
                  <span
                    className="size-1.5 rounded-full bg-emerald-500"
                    aria-hidden="true"
                  />
                  Paid
                </Badge>
              </TableCell>
              <TableCell>UX Team</TableCell>
              <TableCell className="text-right">$7,200</TableCell>
            </TableRow>
            <TableRow>
              <TableCell className="font-medium">Security Audit</TableCell>
              <TableCell>
                <Badge variant="outline">
                  <span
                    className="size-1.5 rounded-full bg-red-500"
                    aria-hidden="true"
                  />
                  Failed
                </Badge>
              </TableCell>
              <TableCell>Security Team</TableCell>
              <TableCell className="text-right">$2,100</TableCell>
            </TableRow>
          </TableBody>
          <TableFooter>
            <TableRow>
              <TableCell colSpan={3}>Total Budget</TableCell>
              <TableCell className="text-right font-medium">$39,550</TableCell>
            </TableRow>
          </TableFooter>
        </Table>
      </FramePanel>
    </Frame>
  )
}

Switch Tabs

On This Page

Installation Usage Examples Framed Table