TableRowLink() — supabase Function Reference

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

Function tsx DesignSystem ComponentRegistry calls 1

Entity Profile

DesignSystem→ ComponentRegistry→ TableRowLink() — supabase Function Reference

Dependency Diagram

graph TD
  b838e803_57c6_352c_fa09_e2c6a9b112d5["TableRowLink()"]
  f2754282_ec2a_cc79_deb1_aee2ff31a29e["handleBucketNavigation()"]
  b838e803_57c6_352c_fa09_e2c6a9b112d5 -->|calls| f2754282_ec2a_cc79_deb1_aee2ff31a29e
  style b838e803_57c6_352c_fa09_e2c6a9b112d5 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/design-system/registry/default/example/table-row-link.tsx lines 37–94

export default function TableRowLink() {
  return (
    <Card className="w-full">
      <Table>
        <TableHeader>
          <TableRow>
            <TableHead className="w-1">
              <span className="sr-only">Icon</span>
            </TableHead>
            <TableHead>Name</TableHead>
            <TableHead>Updated</TableHead>
            <TableHead className="w-1">
              <span className="sr-only">Actions</span>
            </TableHead>
          </TableRow>
        </TableHeader>
        <TableBody>
          {buckets.map((bucket) => (
            <TableRow
              key={bucket.id}
              className="relative cursor-pointer inset-focus"
              onClick={(event) => {
                if (event.currentTarget !== event.target) return
                handleBucketNavigation(bucket.id, event)
              }}
              onKeyDown={(event) => {
                if (event.currentTarget !== event.target) return
                if (event.key === 'Enter' || event.key === ' ') {
                  event.preventDefault()
                  handleBucketNavigation(bucket.id, event)
                }
              }}
              tabIndex={0}
            >
              <TableCell className="w-1">
                <FilesBucketIcon
                  aria-label="bucket icon"
                  size={16}
                  className="text-foreground-muted"
                />
              </TableCell>
              <TableCell>{bucket.name}</TableCell>
              <TableCell className="text-foreground-muted">{bucket.updated}</TableCell>
              <TableCell>
                <div className="flex justify-end items-center h-full">
                  <ChevronRight aria-hidden={true} size={14} className="text-foreground-muted/60" />
                </div>
                <button tabIndex={-1} className="sr-only">
                  Go to bucket
                </button>
              </TableCell>
            </TableRow>
          ))}
        </TableBody>
      </Table>
    </Card>
  )
}