Demos
Features
Controls
Table
Table With Nested Controls

Table With Image

The Table data region is a versatile and flexible control. Grouping, headers and footers, aggregates, sorting, and user interactivity are built in. Individual cells can host other controls such as Image, Sparkline, other data regions, and more. This report displays a narrow table in a 2-column layout with an Image control in one cell.

index.html
Copy to CodeMine
<!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', 'Top10MoviesTable.rdlx-json', 'Table With Nested Controls')"
  >
    <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', 'Top10MoviesTable.rdlx-json', 'Table With Nested Controls')" > <div id="root"> <div id="viewer-host"></div> <div id="designer-host"></div> </div> </body> </html>