Table

Usage

Compose Table, TableHeader, TableBody, TableRow, TableHead, TableCell, and TableCaption for fully semantic tables.

Recent meetings processed by Jamie.
Date	Meeting	Duration	Action Items
Feb 10	Q3 Earnings Review	45 min	8
Feb 11	Budget Planning Sync	30 min	5
Feb 12	Investor Call Prep	60 min	12
Feb 13	Revenue Forecast Review	25 min	3
Feb 14	Month-End Close Debrief	40 min	7

import {
  Table,
  TableBody,
  TableCaption,
  TableCell,
  TableHead,
  TableHeader,
  TableRow
} from '@jamie/ui/table'
 
const meetings = [
  { date: 'Feb 10', title: 'Q3 Earnings Review', duration: '45 min', actionItems: 8 },
  { date: 'Feb 11', title: 'Budget Planning Sync', duration: '30 min', actionItems: 5 },
  { date: 'Feb 12', title: 'Investor Call Prep', duration: '60 min', actionItems: 12 },
  { date: 'Feb 13', title: 'Revenue Forecast Review', duration: '25 min', actionItems: 3 },
  { date: 'Feb 14', title: 'Month-End Close Debrief', duration: '40 min', actionItems: 7 }
]
 
export function TableDemo() {
  return (
    <Table>
      <TableCaption>Recent meetings processed by Jamie.</TableCaption>
      <TableHeader>
        <TableRow>
          <TableHead>Date</TableHead>
          <TableHead>Meeting</TableHead>
          <TableHead>Duration</TableHead>
          <TableHead className="text-right">Action Items</TableHead>
        </TableRow>
      </TableHeader>
      <TableBody>
        {meetings.map((meeting) => (
          <TableRow key={meeting.date}>
            <TableCell className="text-muted-foreground">{meeting.date}</TableCell>
            <TableCell className="font-medium">{meeting.title}</TableCell>
            <TableCell>{meeting.duration}</TableCell>
            <TableCell className="text-right">{meeting.actionItems}</TableCell>
          </TableRow>
        ))}
      </TableBody>
    </Table>
  )
}