Results() — supabase Function Reference

Architecture documentation for the Results() function in Results.tsx from the supabase codebase.

Function tsx ContentManagement MediaManagement calls 1

Entity Profile

ContentManagement→ MediaManagement→ Results() — supabase Function Reference

Dependency Diagram

graph TD
  1df75248_3020_91d0_7ae2_177e7255a128["Results()"]
  518dde51_bf3a_6a3f_f14b_d4f14682625d["formatClipboardValue()"]
  1df75248_3020_91d0_7ae2_177e7255a128 -->|calls| 518dde51_bf3a_6a3f_f14b_d4f14682625d
  style 1df75248_3020_91d0_7ae2_177e7255a128 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/studio/components/interfaces/SQLEditor/UtilityPanel/Results.tsx lines 24–137

const Results = ({ rows }: { rows: readonly any[] }) => {
  const [expandCell, setExpandCell] = useState(false)
  const [cellPosition, setCellPosition] = useState<{ column: any; row: any; rowIdx: number }>()

  const formatter = (column: any, row: any) => {
    const cellValue = row[column]

    return (
      <ContextMenu_Shadcn_ modal={false}>
        <ContextMenuTrigger_Shadcn_ asChild>
          <div
            className={cn(
              'flex items-center h-full font-mono text-xs w-full whitespace-pre',
              cellValue === null && 'text-foreground-lighter'
            )}
          >
            {cellValue === null
              ? 'NULL'
              : typeof cellValue === 'string'
                ? cellValue
                : JSON.stringify(cellValue)}
          </div>
        </ContextMenuTrigger_Shadcn_>
        <ContextMenuContent_Shadcn_ onCloseAutoFocus={(e) => e.stopPropagation()}>
          <ContextMenuItem_Shadcn_
            className="gap-x-2"
            onSelect={() => {
              const value = formatClipboardValue(cellValue ?? '')
              copyToClipboard(value)
            }}
            onFocusCapture={(e) => e.stopPropagation()}
          >
            <Copy size={12} />
            Copy cell content
          </ContextMenuItem_Shadcn_>
          <ContextMenuItem_Shadcn_
            className="gap-x-2"
            onSelect={() => setExpandCell(true)}
            onFocusCapture={(e) => e.stopPropagation()}
          >
            <Expand size={12} />
            View cell content
          </ContextMenuItem_Shadcn_>
        </ContextMenuContent_Shadcn_>
      </ContextMenu_Shadcn_>
    )
  }

  const columnRender = (name: string) => {
    return <div className="flex h-full items-center justify-center font-mono text-xs">{name}</div>
  }

  const EST_CHAR_WIDTH = 8.25
  const MIN_COLUMN_WIDTH = 100
  const MAX_COLUMN_WIDTH = 500

  const columns: CalculatedColumn<any>[] = Object.keys(rows?.[0] ?? []).map((key, idx) => {
    const maxColumnValueLength = rows
      .map((row) => String(row[key]).length)
      .reduce((a, b) => Math.max(a, b), 0)

    const columnWidth = Math.max(
      Math.min(maxColumnValueLength * EST_CHAR_WIDTH, MAX_COLUMN_WIDTH),
      MIN_COLUMN_WIDTH
    )

    return {
      idx,
      key,
      name: key,
      resizable: true,
      parent: undefined,
      level: 0,
      width: columnWidth,
      minWidth: MIN_COLUMN_WIDTH,
      maxWidth: undefined,
      draggable: false,
      frozen: false,
      sortable: false,
      isLastFrozenColumn: false,
      renderCell: ({ row }) => formatter(key, row),
      renderHeaderCell: () => columnRender(key),
    }
  })

  return (
    <>
      {rows.length === 0 ? (
        <div className="bg-table-header-light [[data-theme*=dark]_&]:bg-table-header-dark">
          <p className="m-0 border-0 px-4 py-3 font-mono text-sm text-foreground-light">
            Success. No rows returned
          </p>
        </div>
      ) : (
        <>
          <DataGrid
            columns={columns}
            rows={rows}
            className="h-full flex-grow border-t-0"
            rowClass={() => '[&>.rdg-cell]:items-center'}
            onSelectedCellChange={setCellPosition}
            onCellKeyDown={handleCopyCell}
          />
          <CellDetailPanel
            column={cellPosition?.column.name ?? ''}
            value={cellPosition?.row?.[cellPosition.column.name]}
            visible={expandCell}
            onClose={() => setExpandCell(false)}
          />
        </>
      )}
    </>
  )
}