Live document outline
Design and inspect a table of contents
The loaded document uses paragraph structure levels to generate a Word-compatible table of contents. Change its rules, update it, and inspect the resulting navigation model.
Generated document outline
Every entry is read from the selected table of contents.
HeadingsStructure levels
TOCGenerated entries
NavigationLinks and pages
Reading the table of contents...
Tables of contents in this text part
Select an entry to locate and inspect it.
Reading the collection...
Ready to tryUse the controls above to interact with this demo.
What this demonstrates
A table of contents is generated document structure
TX Text Control creates Microsoft Word-compatible tables of contents from paragraph structure levels. The generated entries can contain document links and page numbers while remaining available through a dedicated JavaScript object model.
TOC collection
TXTextControl.tablesOfContents
TOC insertion
TableOfContentsCollection.add
Generated content
TableOfContents.update / getText
Navigation
TableOfContents.scrollTo
How it works
Each document paragraph can carry a structure level. TableOfContentsCollection.add scans the requested range from minimumStructureLevel through maximumStructureLevel and creates an entry for every matching paragraph.
The hasLinks, hasPageNumbers, and hasRightAlignedPageNumbers options control whether the generated TOC behaves as interactive navigation and how page references are rendered.
After headings, pagination, or TOC settings change, TableOfContents.update regenerates the entries. The demo then calls getText to visualize the same content shown inside the document.
A document may contain more than one TOC. The collection navigator reads each object with elementAt, and scrollTo moves the input position to the selected TOC without searching document text.
TXTextControl.tablesOfContents.add({
title: "Table of Contents",
minimumStructureLevel: 1,
maximumStructureLevel: 3,
hasLinks: true,
hasPageNumbers: true,
hasRightAlignedPageNumbers: true
}, toc => toc.update(() => console.log("TOC generated")));
toc.setMaximumStructureLevel(3, () => {
toc.update(updated => {
if (updated) toc.getText(text => console.log(text));
});
});
