TableWithSelect() — ui Function Reference

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

Function tsx ComponentRegistry ChartRegistry

Entity Profile

ComponentRegistry→ ChartRegistry→ TableWithSelect() — ui Function Reference

Dependency Diagram

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

Relationship Graph

Source Code

apps/v4/registry/bases/radix/examples/table-example.tsx lines 351–424

function TableWithSelect() {
  return (
    <Example title="With Select">
      <Table>
        <TableHeader>
          <TableRow>
            <TableHead>Task</TableHead>
            <TableHead>Assignee</TableHead>
            <TableHead>Status</TableHead>
          </TableRow>
        </TableHeader>
        <TableBody>
          <TableRow>
            <TableCell className="font-medium">Design homepage</TableCell>
            <TableCell>
              <Select defaultValue="sarah">
                <SelectTrigger className="w-40" size="sm">
                  <SelectValue />
                </SelectTrigger>
                <SelectContent>
                  <SelectGroup>
                    <SelectItem value="sarah">Sarah Chen</SelectItem>
                    <SelectItem value="marcus">Marc Rodriguez</SelectItem>
                    <SelectItem value="emily">Emily Watson</SelectItem>
                    <SelectItem value="david">David Kim</SelectItem>
                  </SelectGroup>
                </SelectContent>
              </Select>
            </TableCell>
            <TableCell>In Progress</TableCell>
          </TableRow>
          <TableRow>
            <TableCell className="font-medium">Implement API</TableCell>
            <TableCell>
              <Select defaultValue="marcus">
                <SelectTrigger className="w-40" size="sm">
                  <SelectValue />
                </SelectTrigger>
                <SelectContent>
                  <SelectGroup>
                    <SelectItem value="sarah">Sarah Chen</SelectItem>
                    <SelectItem value="marcus">Marc Rodriguez</SelectItem>
                    <SelectItem value="emily">Emily Watson</SelectItem>
                    <SelectItem value="david">David Kim</SelectItem>
                  </SelectGroup>
                </SelectContent>
              </Select>
            </TableCell>
            <TableCell>Pending</TableCell>
          </TableRow>
          <TableRow>
            <TableCell className="font-medium">Write tests</TableCell>
            <TableCell>
              <Select defaultValue="emily">
                <SelectTrigger className="w-40" size="sm">
                  <SelectValue />
                </SelectTrigger>
                <SelectContent>
                  <SelectGroup>
                    <SelectItem value="sarah">Sarah Chen</SelectItem>
                    <SelectItem value="marcus">Marc Rodriguez</SelectItem>
                    <SelectItem value="emily">Emily Watson</SelectItem>
                    <SelectItem value="david">David Kim</SelectItem>
                  </SelectGroup>
                </SelectContent>
              </Select>
            </TableCell>
            <TableCell>Not Started</TableCell>
          </TableRow>
        </TableBody>
      </Table>
    </Example>
  )
}