# Table Of Contents

Learn about the Table of Contents control in ActiveReportsJS. Visit the topic to learn how you can set its background, border, layout, and text properties.

## Content

A `Table of Contents` acts as an interactive map for the report output, presenting the locations of various report items or data groupings. Each entry in the Table of Contents is composed of:

* The `Label` of the referenced item
* A fill character, typically a `.`, displayed between the label and the page number
* The `Page Number` \- the specific page where the referenced report item or group is situated

![image](https://cdn.mescius.io/document-site-files/images/2c0943df-d937-4f5c-966c-3390ae8bbb34/image.51b2fb.png)
To be included in the Table of Contents, a report item or group requires a `Label` that is not blank. Furthermore, TextBox report items feature a `Heading Level` property that determines their position in the hierarchy within the Table of Contents. If such a TextBox is integrated into the Table of Contents, its `Value` is shown instead of its `Label` if the Label is empty.
The arrangement of group instances and report items form a multi-level document map. You can customize the appearance of each level, as detailed in the `Levels` section below.
The `Source` property, found within the `Document Map` section of the report properties, specifies the items to be included in the Table of Contents. Here are the available choices:

* `Labels` \- Incorporates report items with a `Label` that is not blank
* `Headings` \- Includes TextBoxes that have a `Heading Level`
* `All` \- Combines both `Labels` and `Headings`
* `None` \- Leaves the Table of Contents empty

### Adding a Table of Contents

To include a `Table of Contents` in your report, you can either double-click the corresponding item within the [toolbox](/activereportsjs/docs/v6.1/ReportAuthorGuide/Report-Designer-Interface#toolbox) or use the drag-and-drop method to place it into a report page area, such as a [Banded List Section](/activereportsjs/docs/v6.1/ReportAuthorGuide/Report-Items/Data-Regions/BandedList).

### General configuration of Table of Contents

The general configuration includes [Base Report Item properties](/activereportsjs/docs/v6.1/ReportAuthorGuide/Report-Items/Common-Properties#base-properties), [Common Style Properties](/activereportsjs/docs/v6.1/ReportAuthorGuide/Report-Items/Common-Properties#style-properties), and [Visibility](/activereportsjs/docs/v6.1/ReportAuthorGuide/Report-Items/Common-Properties#visibility).

### Levels

The design interface for the Table of Contents provides a way to set up the `Levels` collection:
![image](https://cdn.mescius.io/document-site-files/images/2c0943df-d937-4f5c-966c-3390ae8bbb34/image.aec432.png)
You can add a new level using the `Add Item` button, remove a level with the `Delete` button located on the right, and select a level to view and modify its properties in the Property inspector. For each level, you're able to modify the appearance of the text in the `Text` section, choose the `Fill Character`, and control the visibility of the Fill Character and the Page Number in the Table of Contents' items.

### Miscellaneous

* The `Page Break` property of the Table of Contents specifies where the page break should occur:
    * `None` \- No page break is created
    * `Start` \- A page break is created before the Table of Contents
    * `End` \- A page break is created after the Table of Contents
    * `StartAndEnd` \- Page breaks are created both before and after the Table of Contents
* The `Max Level` property denotes the highest number of levels that can be displayed in the Table of Contents.