> ## Documentation Index
> Fetch the complete documentation index at: https://react-docx.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Table of Contents

Auto-generated table of contents from document headings.

```tsx theme={"dark"}
<TableOfContents />
```

***

## Props

| Prop              | Type      | Default               | Description                |
| ----------------- | --------- | --------------------- | -------------------------- |
| `title`           | `string`  | `"Table of Contents"` | TOC heading                |
| `levels`          | `number`  | `3`                   | Max heading level (1-6)    |
| `showPageNumbers` | `boolean` | `true`                | Display page numbers       |
| `hyperlinks`      | `boolean` | `true`                | Make entries clickable     |
| `className`       | `string`  | —                     | Tailwind classes for title |

***

## Basic usage

```tsx theme={"dark"}
<Document>
  <Section>
    <TableOfContents />
  </Section>

  <Section>
    <H1>Introduction</H1>
    <Paragraph>...</Paragraph>

    <H2>Background</H2>
    <Paragraph>...</Paragraph>

    <H1>Methods</H1>
    <Paragraph>...</Paragraph>
  </Section>
</Document>
```

Generates:

```
Table of Contents

Introduction .................. 1
  Background .................. 1
Methods ....................... 2
```

***

## Custom title

```tsx theme={"dark"}
<TableOfContents title="Contents" />
<TableOfContents title="In This Document" />
```

No title:

```tsx theme={"dark"}
<TableOfContents title="" />
```

***

## Heading levels

Control how deep the TOC goes:

```tsx theme={"dark"}
// Only H1
<TableOfContents levels={1} />

// H1 and H2
<TableOfContents levels={2} />

// H1, H2, and H3 (default)
<TableOfContents levels={3} />

// All levels
<TableOfContents levels={6} />
```

***

## Page numbers

```tsx theme={"dark"}
// With page numbers (default)
<TableOfContents showPageNumbers={true} />

// Without page numbers
<TableOfContents showPageNumbers={false} />
```

***

## Hyperlinks

```tsx theme={"dark"}
// Clickable entries (default)
<TableOfContents hyperlinks={true} />

// Plain text entries
<TableOfContents hyperlinks={false} />
```

***

## Styling

Style the title:

```tsx theme={"dark"}
<TableOfContents
  title="Contents"
  className="text-2xl font-bold text-blue-700"
/>
```

***

## Full example

```tsx theme={"dark"}
<Document>
  {/* TOC on its own page */}
  <Section>
    <TableOfContents
      title="Contents"
      levels={3}
      showPageNumbers={true}
      hyperlinks={true}
      className="text-xl font-bold"
    />
  </Section>

  {/* Document content */}
  <Section>
    <H1>Executive Summary</H1>
    <Paragraph>...</Paragraph>

    <H1>Introduction</H1>
    <H2>Purpose</H2>
    <Paragraph>...</Paragraph>
    <H2>Scope</H2>
    <Paragraph>...</Paragraph>

    <H1>Analysis</H1>
    <H2>Data Collection</H2>
    <H3>Survey Results</H3>
    <Paragraph>...</Paragraph>
    <H3>Interview Findings</H3>
    <Paragraph>...</Paragraph>

    <H1>Conclusion</H1>
    <Paragraph>...</Paragraph>
  </Section>
</Document>
```

***

## How it works

1. Scans document for H1-H6 headings
2. Filters by `levels` prop
3. Generates entries with indentation based on heading level
4. Adds page numbers via Word's PAGEREF field
5. Creates hyperlinks to heading bookmarks

Headings automatically get bookmark IDs. No manual `id` props needed for TOC.

***

## Updating the TOC

The TOC uses Word's native field. To update page numbers after editing:

* In Word: Right-click TOC → "Update Field"
* Or: Ctrl+A, then F9