# Table of contents

> Een markering voor een inhoudsopgave, vooruitlopend op de renderers die er een bouwen.

Source: https://docxcelerate.com/nl/docs/nodes/table-of-contents/

The kind is part of the document schema and both renderers accept it. What is missing is downstream rather than in the authoring: the element places the marker and carries its title, and building the entries from the surrounding section titles is a renderer's job.

> **Wat de renderers vandaag doen:** Both shipped renderers print the title and nothing else. Building the entries from the surrounding section titles is the intent, not yet implemented.

- **Helpers:** `TableOfContents`
- **Nodesoort:** `tableOfContents`
- **Categorie:** Structuur
- **Wordt opgelost:** By the renderer
- **Children:** None. The entries would come from the sections beside it.

| Optie | Type | Wat het doet |
| --- | --- | --- |
| `id` | `string` | Stable address for the node. Engines target it and build artifacts diff on it, so treat a rename as a breaking change. Optional: a node without one takes an id from where it sits, which is what keeps branches and loops from forcing you to invent names. Two nodes claiming one id is an error rather than a race. |
| `title` | `string` | Heading for the list. Renderers fall back to their own wording. |
| `derivers` | `DeriverInvocation[]` | Values the engine computes before the node resolves, written to `derived.*` and readable from a template token. Built with `derive()`. These survive publishing and run per document — use them for anything computed from request data. `useDeriver` runs one during the build instead. |

## Er een schrijven

```tsx
import { TableOfContents } from "docxcelerate/template";

export const Contents: TableOfContents = () => (
  <TableOfContents id="contents" title="What is in this document" />
);
```

Hij composeert als elke andere node, en lost in previewbuilds, enginebuilds en
tests op dezelfde manier op. Rechtstreeks in een template geplaatst heeft hij
geen eigen component nodig — `<TableOfContents id="contents" title="…" />` is
het hele ding.

## Wat ontbreekt zit verderop

Het element plaatst de markering en draagt zijn titel. De ingangen bouwen uit de
omringende sectietitels is werk van een renderer, en noch de browserpreview noch
de DOCX-packer doet dat al — beide drukken de titel af en stoppen.

## Waarom je er nu al een plaatst

Het kost één regel, en hij begint regels te printen op de dag dat de renderers
ze bouwen. Het alternatief — een met de hand bijgehouden lijst met sectietitels
in een alinea — is binnen twee releases onjuist.

Als je liever geen node uitlevert die alleen een kop print, laat hem dan weg. Hem
later toevoegen is even goedkoop.

## Varianten

### A titled marker

The element, and the title it carries into the document.

Source: `src/nodes/table-of-contents/basic.node.tsx`

```tsx
import { TableOfContents } from "docxcelerate/template";

/**
 * A heading standing in for the contents of the document around it.
 *
 * The shipped renderers print the title and stop — the entries themselves are
 * a renderer's job, and neither the browser preview nor the DOCX packer builds
 * them yet.
 */
export const Contents: TableOfContents = () => (
  <TableOfContents id="contents" title="What is in this letter" />
);
```

**Waartoe het wordt opgelost**

```json
{
  "id": "contents",
  "kind": "tableOfContents",
  "title": "What is in this letter"
}
```

## Aantekeningen

- `title` is optioneel; renderers vallen terug op hun eigen bewoording.
- De node bevat geen kinderen en leest tijdens de build niets.