SelectCellFormatter() — supabase Function Reference

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

Function tsx ContentManagement MediaManagement calls 1

Entity Profile

ContentManagement→ MediaManagement→ SelectCellFormatter() — supabase Function Reference

Dependency Diagram

graph TD
  384c5975_122e_a71c_e434_cab80a47c953["SelectCellFormatter()"]
  8ee86098_3124_8b07_a2b4_f3e191f489ef["stopPropagation()"]
  384c5975_122e_a71c_e434_cab80a47c953 -->|calls| 8ee86098_3124_8b07_a2b4_f3e191f489ef
  style 384c5975_122e_a71c_e434_cab80a47c953 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/studio/components/grid/components/grid/SelectColumn.tsx lines 104–157

function SelectCellFormatter({
  row,
  value,
  tabIndex,
  disabled,
  onClick,
  onChange,
  'aria-label': ariaLabel,
  'aria-labelledby': ariaLabelledBy,
}: SelectCellFormatterProps) {
  const snap = useTableEditorStateSnapshot()

  function handleChange(e: ChangeEvent<HTMLInputElement>) {
    onChange(e.target.checked, (e.nativeEvent as MouseEvent).shiftKey)
  }

  function onEditClick(e: any) {
    e.stopPropagation()
    if (row) {
      snap.onEditRow(row)
    }
  }

  return (
    <div className="sb-grid-select-cell__formatter">
      <input
        aria-label={ariaLabel}
        aria-labelledby={ariaLabelledBy}
        tabIndex={tabIndex}
        type="checkbox"
        className="rdg-row__select-column__select-action"
        disabled={disabled}
        checked={value}
        onChange={handleChange}
        onClick={onClick}
      />
      {row && (
        <ButtonTooltip
          type="text"
          size="tiny"
          className="px-1 rdg-row__select-column__edit-action"
          icon={<Maximize2 />}
          onClick={onEditClick}
          tooltip={{
            content: {
              side: 'bottom',
              text: 'Expand row',
            },
          }}
        />
      )}
    </div>
  )
}