Table

Source: packages/shared/components/ui/table.tsx

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

---

Preview

Job Title	Department	Status
Software Engineer	Engineering	Published
Product Designer	Design	Draft
Marketing Manager	Marketing	Closed

Sub-components

Component	Element	Description
Table	<table>	Root — wrapped in a scrollable container
TableHeader	<thead>	Header group — thin bottom border (border-secondary), header rows do not hover
TableBody	<tbody>	Body group — last row has no border
TableFooter	<tfoot>	Footer group — muted background
TableRow	<tr>	Row — blue hover (primary-50), no bottom border
TableHead	<th>	Header cell — foreground-secondary text, normal weight, py-4, letter-spacing
TableCell	<td>	Data cell — muted-foreground text, px-2 py-4, aligned middle
TableCaption	<caption>	Table caption — muted, small text

---

Default Styling

• Full width with overflow-x-auto container for horizontal scrolling
• Row hover: hover:bg-primary-50 (subtle blue tint)
• Header rows do not hover
• Selected rows: data-[state=selected]:bg-muted
• Header text: text-foreground-secondary font-normal tracking-[0.6px]
• Cell text: text-muted-foreground
• Header border: border-b-[0.67px] border-border-secondary

---

Usage in the Codebase

Admin — CandidatesTable

<Table>
  <TableHeader>
    <TableRow>
      <TableHead className="w-[140px]">Name</TableHead>
      <TableHead className="w-[120px]">Date Applied</TableHead>
      <TableHead>Summary</TableHead>
      <TableHead className="w-[72px]" />
    </TableRow>
  </TableHeader>
  <TableBody>
    {applicants.map((applicant) => (
      <TableRow
        key={applicant.id}
        className="cursor-pointer"
        onClick={() => onCandidateClick?.(applicant)}
      >
        <TableCell>{applicant.name}</TableCell>
        <TableCell>{applicant.appliedAt.toLocaleDateString()}</TableCell>
        <TableCell>
          <span className="block truncate">{applicant.resumeSummary}</span>
        </TableCell>
        <TableCell>
          {/* action icons */}
        </TableCell>
      </TableRow>
    ))}
  </TableBody>
</Table>