SupabaseGrid() — supabase Function Reference

Source Code

apps/studio/components/grid/SupabaseGrid.tsx lines 34–170

export const SupabaseGrid = ({
  customHeader,
  gridProps,
  children,
}: PropsWithChildren<
  Pick<HeaderProps, 'customHeader'> & {
    gridProps?: GridProps
  }
>) => {
  const { id: _id } = useParams()
  const tableId = _id ? Number(_id) : undefined

  const isQueueOperationsEnabled = useIsQueueOperationsEnabled()

  const queryClient = useQueryClient()
  const { data: project } = useSelectedProjectQuery()
  const tableEditorSnap = useTableEditorStateSnapshot()
  const snap = useTableEditorTableStateSnapshot()

  const gridRef = useRef<DataGridHandle>(null)
  const [mounted, setMounted] = useState(false)

  const newFilterBarEnabled = useIsTableFilterBarEnabled()

  const { filters } = useTableFilter()
  const { sorts, onApplySorts } = useTableSort()

  const roleImpersonationState = useRoleImpersonationStateSnapshot()

  const msSqlWarning = isMsSqlForeignTable(snap.originalTable)
    ? validateMsSqlSorting({ filters, sorts, table: snap.originalTable })
    : { warning: null }
  const tableQueriesEnabled = msSqlWarning.warning === null

  const {
    data,
    error,
    isSuccess,
    isError,
    isPending: isLoading,
    isRefetching,
    dataUpdatedAt,
  } = useTableRowsQuery(
    {
      projectRef: project?.ref,
      connectionString: project?.connectionString,
      tableId,
      sorts,
      filters,
      page: snap.page,
      limit: tableEditorSnap.rowsPerPage,
      roleImpersonationState: roleImpersonationState as RoleImpersonationState,
    },
    {
      placeholderData: keepPreviousData,
      enabled: tableQueriesEnabled,
      retry: (_, error: any) => {
        const doesNotExistError = error && error.message?.includes('does not exist')
        if (doesNotExistError) onApplySorts([])
        return false
      },
    }
  )

  useEffect(() => {
    if (!mounted) setMounted(true)
  }, [])

  // Re-apply optimistic updates when table data is loaded/refetched
  // This ensures pending changes remain visible when switching tabs or after data refresh
  // Skip re-applying during save to avoid race condition where refetch completes before queue clears
  const isSaving = tableEditorSnap.operationQueue.status === 'saving'
  useEffect(() => {
    if (
      isSuccess &&
      project?.ref &&
      tableId &&
      isQueueOperationsEnabled &&
      tableEditorSnap.hasPendingOperations &&
      !isSaving
    ) {
      reapplyOptimisticUpdates({
        queryClient,
        projectRef: project.ref,
        tableId,
        operations: tableEditorSnap.operationQueue.operations as readonly QueuedOperation[],
      })
    }
  }, [
    isSuccess,
    dataUpdatedAt,
    project?.ref,
    tableId,
    isQueueOperationsEnabled,
    tableEditorSnap.hasPendingOperations,
    tableEditorSnap.operationQueue.operations,
    queryClient,
    isSaving,
  ])

  const rows = data?.rows ?? EMPTY_ARR

  const HeaderComponent = newFilterBarEnabled ? HeaderNew : Header

  return (
    <DndProvider backend={HTML5Backend} context={window}>
      <div className="sb-grid h-full flex flex-col">
        <HeaderComponent
          customHeader={customHeader}
          isRefetching={isRefetching}
          tableQueriesEnabled={tableQueriesEnabled}
        />

        {msSqlWarning.warning !== null && <msSqlWarning.Component />}

        {children || (
          <>
            <Grid
              ref={gridRef}
              {...gridProps}
              rows={rows}
              error={error}
              isDisabled={!tableQueriesEnabled}
              isLoading={isLoading}
              isSuccess={isSuccess}
              isError={isError}
            />
            <Footer enableForeignRowsQuery={tableQueriesEnabled} />
            <Shortcuts gridRef={gridRef} rows={rows} />
          </>
        )}

        {mounted && createPortal(<RowContextMenu rows={rows} />, document.body)}
      </div>
    </DndProvider>
  )
}