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 — rows get bottom border
`TableBody`	`<tbody>`	Body group — last row has no border
`TableFooter`	`<tfoot>`	Footer group — muted background
`TableRow`	`<tr>`	Row — hover effect, bottom border
`TableHead`	`<th>`	Header cell — muted text, medium font, `h-10`
`TableCell`	`<td>`	Data cell — `p-2`, 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-muted/50
Selected rows: data-[state=selected]:bg-muted
Header text: text-muted-foreground font-medium

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 hover:bg-[#edf5ff]"
        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>

Notes

Heavy overrides in Admin CandidatesTable: Nearly every sub-component receives className overrides:
- TableHeader: custom border width border-b-[0.67px] and hardcoded color border-[#cfd5dd].
- TableRow: hover:bg-transparent removes the default hover effect; rows add cursor-pointer hover:bg-[#edf5ff] with a hardcoded blue tint.
- TableHead: hardcoded text-[#3c4047] color and text-[14px] font size instead of semantic tokens.
- TableCell: hardcoded text-[#4e535a] color and text-[14px] font size.
Consider migrating the hardcoded hex colors (#cfd5dd, #3c4047, #4e535a, #edf5ff) to semantic tokens for theme consistency.