Home / Function/ DashboardTableOfContents() — supabase Function Reference

DashboardTableOfContents() — supabase Function Reference

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

Entity Profile

Dependency Diagram

graph TD
  d800ca79_7603_ed26_58f3_72050ffcd1f7["DashboardTableOfContents()"]
  53855881_fed4_0d46_800f_c31662340efb["useActiveItem()"]
  d800ca79_7603_ed26_58f3_72050ffcd1f7 -->|calls| 53855881_fed4_0d46_800f_c31662340efb
  23bdb86f_949c_70f6_1971_00049af0c787["useMounted()"]
  d800ca79_7603_ed26_58f3_72050ffcd1f7 -->|calls| 23bdb86f_949c_70f6_1971_00049af0c787
  style d800ca79_7603_ed26_58f3_72050ffcd1f7 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/learn/components/toc.tsx lines 14–39

export function DashboardTableOfContents({ toc }: TocProps) {
  const itemIds = React.useMemo(
    () =>
      toc.items
        ? toc.items
            .flatMap((item) => [item.url, item?.items?.map((item) => item.url)])
            .flat()
            .filter(Boolean)
            .map((id) => id?.split('#')[1])
        : [],
    [toc]
  )
  const activeHeading = useActiveItem(itemIds)
  const mounted = useMounted()

  if (!toc?.items || !mounted) {
    return null
  }

  return (
    <div className="space-y-2">
      <p className="font-medium text-foreground-light">On This Page</p>
      <Tree tree={toc} activeItem={activeHeading} />
    </div>
  )
}

Subdomains

Frequently Asked Questions

What does DashboardTableOfContents() do?
DashboardTableOfContents() is a function in the supabase codebase.
What does DashboardTableOfContents() call?
DashboardTableOfContents() calls 2 function(s): useActiveItem, useMounted.

Analyze Your Own Codebase

Get architecture documentation, dependency graphs, and domain analysis for your codebase in minutes.

Try Supermodel Free