TableRowLinkActions() — supabase Function Reference

Architecture documentation for the TableRowLinkActions() function in table-row-link-actions.tsx from the supabase codebase.

Function tsx DesignSystem ComponentRegistry calls 1

Entity Profile

DesignSystem→ ComponentRegistry→ TableRowLinkActions() — supabase Function Reference

Dependency Diagram

graph TD
  20b04eb3_e3fb_0099_b299_977cfb21eacb["TableRowLinkActions()"]
  13254033_94eb_3354_dd46_b75225d801ad["handlePolicyNavigation()"]
  20b04eb3_e3fb_0099_b299_977cfb21eacb -->|calls| 13254033_94eb_3354_dd46_b75225d801ad
  style 20b04eb3_e3fb_0099_b299_977cfb21eacb fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/design-system/registry/default/example/table-row-link-actions.tsx lines 39–105

export default function TableRowLinkActions() {
  return (
    <Card className="w-full">
      <Table>
        <TableHeader>
          <TableRow>
            <TableHead className="w-1">
              <span className="sr-only">Icon</span>
            </TableHead>
            <TableHead>Name</TableHead>
            <TableHead>Command</TableHead>
            <TableHead>Applied to</TableHead>
            <TableHead className="w-1">
              <span className="sr-only">Actions</span>
            </TableHead>
          </TableRow>
        </TableHeader>
        <TableBody>
          {policies.map((policy) => (
            <TableRow
              key={policy.id}
              className="relative cursor-pointer inset-focus"
              onClick={(event) => {
                if (event.currentTarget !== event.target) return
                handlePolicyNavigation(policy.id, event)
              }}
              onKeyDown={(event) => {
                if (event.currentTarget !== event.target) return
                if (event.key === 'Enter' || event.key === ' ') {
                  event.preventDefault()
                  handlePolicyNavigation(policy.id, event)
                }
              }}
              tabIndex={0}
            >
              <TableCell className="w-1">
                <Shield aria-label="policy icon" size={16} className="text-foreground-muted" />
              </TableCell>
              <TableCell>{policy.name}</TableCell>
              <TableCell>
                <code className="text-foreground-muted text-code-inline uppercase">
                  {policy.command}
                </code>
              </TableCell>
              <TableCell className="text-foreground-lighter">{policy.appliedTo}</TableCell>
              <TableCell className="flex justify-end items-center h-full gap-3">
                <Button
                  icon={<EllipsisVertical />}
                  aria-label={`More actions`}
                  type="default"
                  size="tiny"
                  className="w-7"
                />
                <div>
                  <ChevronRight aria-hidden={true} size={14} className="text-foreground-muted/60" />
                </div>
                <button tabIndex={-1} className="sr-only">
                  Go to policy
                </button>
              </TableCell>
            </TableRow>
          ))}
        </TableBody>
      </Table>
    </Card>
  )
}