Demos
Features
Interactive Reports
Table of Contents

Table Of Contents

Display an organized hierarchy of report heading levels and labels, along with their page numbers, in the body of your report. This demo displays the Table Of Contents of the product catalog on the first page.

The demo is being dynamically compiled to support real-time code editing... For quicker access to features, switch to the "JavaScript" tab for a smoother experience! :)
index.html
Copy to CodeMine
loading...
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>ActiveReportsJS sample</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <link
      rel="stylesheet"
      href="https://cdn.materialdesignicons.com/5.4.55/css/materialdesignicons.min.css"
    />
    <link
      rel="stylesheet"
      type="text/css"
      href="https://cdn.mescius.com/activereportsjs/5.latest/styles/ar-js-ui.css"
    />
    <link
      rel="stylesheet"
      type="text/css"
      href="https://cdn.mescius.com/activereportsjs/5.latest/styles/ar-js-viewer.css"
    />
    <link
      rel="stylesheet"
      type="text/css"
      href="https://cdn.mescius.com/activereportsjs/5.latest/styles/ar-js-designer.css"
    />
    <link
      rel="stylesheet"
      type="text/css"
      href="/activereportsjs/demos/resource/common/report-sample-style.css"
    />
    <script src="/activereportsjs/demos/resource/common/init-report-sample.js"></script>

    <script src="https://cdn.mescius.com/activereportsjs/5.latest/dist/ar-js-core.js"></script>
    <script src="https://cdn.mescius.com/activereportsjs/5.latest/dist/ar-js-viewer.js"></script>
    <script src="https://cdn.mescius.com/activereportsjs/5.latest/dist/ar-js-designer.js"></script>

    <script src="https://cdn.mescius.com/activereportsjs/5.latest/dist/ar-js-pdf.js"></script>
    <script src="https://cdn.mescius.com/activereportsjs/5.latest/dist/ar-js-html.js"></script>
    <script src="https://cdn.mescius.com/activereportsjs/5.latest/dist/ar-js-tabular-data.js"></script>
    <script src="$DEMOROOT$/lib/purejs/license.js"></script>
  </head>
  <body
    onload="initReportSample('viewer-host', 'designer-host', 'ProductCatalog2.rdlx-json', 'Table of Contents')"
  >
    <div id="root">
      <div id="viewer-host"></div>
      <div id="designer-host"></div>
    </div>
  </body>
</html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <title>ActiveReportsJS sample</title> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" href="https://cdn.materialdesignicons.com/5.4.55/css/materialdesignicons.min.css" /> <link rel="stylesheet" type="text/css" href="https://cdn.mescius.com/activereportsjs/5.latest/styles/ar-js-ui.css" /> <link rel="stylesheet" type="text/css" href="https://cdn.mescius.com/activereportsjs/5.latest/styles/ar-js-viewer.css" /> <link rel="stylesheet" type="text/css" href="https://cdn.mescius.com/activereportsjs/5.latest/styles/ar-js-designer.css" /> <link rel="stylesheet" type="text/css" href="/activereportsjs/demos/resource/common/report-sample-style.css" /> <script src="/activereportsjs/demos/resource/common/init-report-sample.js"></script> <script src="https://cdn.mescius.com/activereportsjs/5.latest/dist/ar-js-core.js"></script> <script src="https://cdn.mescius.com/activereportsjs/5.latest/dist/ar-js-viewer.js"></script> <script src="https://cdn.mescius.com/activereportsjs/5.latest/dist/ar-js-designer.js"></script> <script src="https://cdn.mescius.com/activereportsjs/5.latest/dist/ar-js-pdf.js"></script> <script src="https://cdn.mescius.com/activereportsjs/5.latest/dist/ar-js-html.js"></script> <script src="https://cdn.mescius.com/activereportsjs/5.latest/dist/ar-js-tabular-data.js"></script> <script src="$DEMOROOT$/lib/purejs/license.js"></script> </head> <body onload="initReportSample('viewer-host', 'designer-host', 'ProductCatalog2.rdlx-json', 'Table of Contents')" > <div id="root"> <div id="viewer-host"></div> <div id="designer-host"></div> </div> </body> </html>