Frozen Headers

A table and a tablix data regions have the Frozen Rows and Frozen Columns numeric properties that are used to freeze the header rows and columns. You can see the effect of freezing the header rows in this demo by scrolling down the tablix. This feature only works in the Galley Mode of the report viewer component.


<!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', 'ContosoSales14.rdlx-json', 'Frozen Headers', function (viewer) {viewer.renderMode='Galley';})"
  >
    <div id="root">
      <div id="viewer-host"></div>
      <div id="designer-host"></div>
    </div>
  </body>
</html>

Feedback

Submit and view feedback for

This Product This Page

<!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', 'ContosoSales14.rdlx-json', 'Frozen Headers', function (viewer) {viewer.renderMode='Galley';})"
>
<div id="root">
<div id="viewer-host"></div>
<div id="designer-host"></div>
</div>
</body>
</html>