TableWithSelect() — ui Function Reference

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

Function tsx ComponentRegistry UIPrimitives

Entity Profile

ComponentRegistry→ UIPrimitives→ TableWithSelect() — ui Function Reference

Dependency Diagram

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

Relationship Graph

Source Code

apps/v4/registry/bases/base/examples/table-example.tsx lines 384–430

function TableWithSelect() {
  return (
    <Example title="With Select">
      <Table>
        <TableHeader>
          <TableRow>
            <TableHead>Task</TableHead>
            <TableHead>Assignee</TableHead>
            <TableHead>Status</TableHead>
          </TableRow>
        </TableHeader>
        <TableBody>
          {tasks.map((item) => (
            <TableRow key={item.task}>
              <TableCell className="font-medium">{item.task}</TableCell>
              <TableCell>
                <Select
                  items={people}
                  defaultValue={people.find(
                    (person) => person.value === item.assignee
                  )}
                  itemToStringValue={(item) => {
                    return item.value
                  }}
                >
                  <SelectTrigger className="w-40" size="sm">
                    <SelectValue />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectGroup>
                      {people.map((person) => (
                        <SelectItem key={person.value} value={person}>
                          {person.label}
                        </SelectItem>
                      ))}
                    </SelectGroup>
                  </SelectContent>
                </Select>
              </TableCell>
              <TableCell>{item.status}</TableCell>
            </TableRow>
          ))}
        </TableBody>
      </Table>
    </Example>
  )
}