TableWithBadges() — ui Function Reference

Architecture documentation for the TableWithBadges() function in table-example.tsx from the ui codebase.

Function tsx ComponentRegistry ChartRegistry

Entity Profile

ComponentRegistry→ ChartRegistry→ TableWithBadges() — ui Function Reference

Dependency Diagram

graph TD
  38105c51_47a8_0463_f9d0_bff8fe634a4d["TableWithBadges()"]
  e1fb0b21_a5a7_9715_2fd0_46e69f3ec6d0["table-example.tsx"]
  38105c51_47a8_0463_f9d0_bff8fe634a4d -->|defined in| e1fb0b21_a5a7_9715_2fd0_46e69f3ec6d0
  style 38105c51_47a8_0463_f9d0_bff8fe634a4d fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/v4/registry/bases/radix/examples/table-example.tsx lines 192–247

function TableWithBadges() {
  return (
    <Example title="With Badges">
      <Table>
        <TableHeader>
          <TableRow>
            <TableHead>Task</TableHead>
            <TableHead>Status</TableHead>
            <TableHead className="text-right">Priority</TableHead>
          </TableRow>
        </TableHeader>
        <TableBody>
          <TableRow>
            <TableCell className="font-medium">Design homepage</TableCell>
            <TableCell>
              <span className="inline-flex items-center rounded-full bg-green-500/10 px-2 py-1 text-xs font-medium text-green-700 dark:text-green-400">
                Completed
              </span>
            </TableCell>
            <TableCell className="text-right">
              <span className="inline-flex items-center rounded-full bg-blue-500/10 px-2 py-1 text-xs font-medium text-blue-700 dark:text-blue-400">
                High
              </span>
            </TableCell>
          </TableRow>
          <TableRow>
            <TableCell className="font-medium">Implement API</TableCell>
            <TableCell>
              <span className="inline-flex items-center rounded-full bg-yellow-500/10 px-2 py-1 text-xs font-medium text-yellow-700 dark:text-yellow-400">
                In Progress
              </span>
            </TableCell>
            <TableCell className="text-right">
              <span className="inline-flex items-center rounded-full bg-gray-500/10 px-2 py-1 text-xs font-medium text-gray-700 dark:text-gray-400">
                Medium
              </span>
            </TableCell>
          </TableRow>
          <TableRow>
            <TableCell className="font-medium">Write tests</TableCell>
            <TableCell>
              <span className="inline-flex items-center rounded-full bg-gray-500/10 px-2 py-1 text-xs font-medium text-gray-700 dark:text-gray-400">
                Pending
              </span>
            </TableCell>
            <TableCell className="text-right">
              <span className="inline-flex items-center rounded-full bg-gray-500/10 px-2 py-1 text-xs font-medium text-gray-700 dark:text-gray-400">
                Low
              </span>
            </TableCell>
          </TableRow>
        </TableBody>
      </Table>
    </Example>
  )
}