React rendering Errors for few apps.

Pivot Pagination Fix.

.circleci/config.yml

@@ -20,7 +20,7 @@ jobs:
           command: npm install
       - run:
           name: BlackDuck scan
-          command: curl -s https://blackducksoftware.github.io/hub-detect/hub-detect.sh | bash -s -- \
+          command: curl -s https://detect.synopsys.com/detect.sh | bash -s -- \
             --blackduck.url="https://qliktech.blackducksoftware.com" \
             --blackduck.trust.cert=true \
             --blackduck.username="svc-blackduck" \

src/data-table/data-cell.jsx

@@ -1,4 +1,3 @@
-import qlik from 'qlik';
 import React from 'react';
 import PropTypes from 'prop-types';
 import Tooltip from '../tooltip/index.jsx';
@@ -12,10 +11,8 @@ class DataCell extends React.PureComponent {
   handleSelect () {
     const {
       data: {
-        headers,
         meta: {
-          dimensionCount,
+          dimensionCount
-          altState
         }
       },
       general: {
@@ -30,13 +27,9 @@ class DataCell extends React.PureComponent {
       return;
     }
 
-    const app = qlik.currApp(component);
+    component.backendApi.selectValues(0, [measurement.parents.dimension1.elementNumber], false);
-    app.field(headers.dimension1[0].name, altState)
-      .select([measurement.parents.dimension1.elementNumber], false, false);
-
     if (hasSecondDimension) {
-      app.field(headers.dimension2[0].name, altState)
+      component.backendApi.selectValues(1, [measurement.parents.dimension2.elementNumber], false);
-        .select([measurement.parents.dimension2.elementNumber], false, false);
     }
   }
 
@@ -105,11 +98,9 @@ DataCell.propTypes = {
   cellWidth: PropTypes.string.isRequired,
   data: PropTypes.shape({
     headers: PropTypes.shape({
-      dimension1: PropTypes.array.isRequired,
       measurements: PropTypes.array.isRequired
     }).isRequired,
     meta: PropTypes.shape({
-      altState: PropTypes.string.isRequired,
       dimensionCount: PropTypes.number.isRequired
     }).isRequired
   }).isRequired,
@@ -119,7 +110,16 @@ DataCell.propTypes = {
     name: PropTypes.string,
     value: PropTypes.any
   }).isRequired,
-  component: PropTypes.shape({}).isRequired,
+  component: PropTypes.shape({
+    backendApi: PropTypes.shape({
+      selectValues: function (props, propName) {
+        if (props.isSnapshot || typeof props[propName] === 'function') {
+          return null;
+        }
+        return new Error('Missing implementation of qlik.backendApi.selectValues.');
+      }
+    }).isRequired
+  }).isRequired,
   styleBuilder: PropTypes.shape({
     hasComments: PropTypes.func.isRequired
   }).isRequired,

src/data-table/index.jsx

@@ -5,6 +5,7 @@ import DataCell from './data-cell.jsx';
 import RowHeader from './row-header.jsx';
 import { injectSeparators } from '../utilities';
 
+// eslint-disable-next-line react/prefer-stateless-function
 class DataTable extends React.PureComponent {
   render () {
     const {
@@ -20,6 +21,7 @@ class DataTable extends React.PureComponent {
     const {
       headers: {
         dimension1,
+        dimension2,
         measurements
       },
       matrix
@@ -30,6 +32,36 @@ class DataTable extends React.PureComponent {
       maxWidth: columnSeparatorWidth
     };
 
+    const renderMeasurementData = (dimIndex, atEvery) => {
+      const injectSeparatorsArray = injectSeparators(
+        matrix[dimIndex],
+        columnSeparatorWidth,
+        atEvery
+      );
+
+      if (dimension2.length <= 0) {
+        return injectSeparatorsArray;
+      }
+
+      let measurementDataRow = [],
+        index = 0;
+      dimension2.forEach((dim2) => {
+        measurements.forEach((measure) => {
+          for (index = 0; index < injectSeparatorsArray.length; index++) {
+            if (injectSeparatorsArray[index].parents && dimension1[dimIndex].displayValue === injectSeparatorsArray[index].parents.dimension1.header) {
+              if (dim2.displayValue === injectSeparatorsArray[index].parents.dimension2.header) {
+                if (measure.name === injectSeparatorsArray[index].parents.measurement.header) {
+                  measurementDataRow.push(injectSeparatorsArray[index]);
+                  break;
+                }
+              }
+            }
+          }
+        });
+      });
+      return measurementDataRow;
+    };
+
     return (
       <div className="row-wrapper">
         <table>
@@ -58,7 +90,6 @@ class DataTable extends React.PureComponent {
                 <tr key={dimensionEntry.displayValue}>
                   {!renderData ?
                     <RowHeader
-                      altState={data.meta.altState}
                       component={component}
                       entry={dimensionEntry}
                       rowStyle={rowStyle}
@@ -66,11 +97,7 @@ class DataTable extends React.PureComponent {
                       styling={styling}
                     /> : null
                   }
-                  {renderData && injectSeparators(
+                  {renderData && renderMeasurementData(dimensionIndex, { atEvery: measurements.length }).map((measurementData, index) => {
-                    matrix[dimensionIndex],
-                    columnSeparatorWidth,
-                    { atEvery: measurements.length }
-                  ).map((measurementData, index) => {
                     if (measurementData.isSeparator) {
                       return (
                         <td
@@ -81,6 +108,7 @@ class DataTable extends React.PureComponent {
                       );
                     }
 
+                    // eslint-disable-next-line no-shadow
                     const { dimension1: dimension1Info, dimension2, measurement } = measurementData.parents;
                     const id = `${dimension1Info.elementNumber}-${dimension2 && dimension2.elementNumber}-${measurement.header}-${measurement.index}`;
                     return (
@@ -113,6 +141,7 @@ DataTable.defaultProps = {
 DataTable.propTypes = {
   cellWidth: PropTypes.string.isRequired,
   columnSeparatorWidth: PropTypes.string.isRequired,
+  component: PropTypes.shape({}).isRequired,
   data: PropTypes.shape({
     headers: PropTypes.shape({
       dimension1: PropTypes.array.isRequired
@@ -120,7 +149,6 @@ DataTable.propTypes = {
     matrix: PropTypes.arrayOf(PropTypes.array.isRequired).isRequired
   }).isRequired,
   general: PropTypes.shape({}).isRequired,
-  component: PropTypes.shape({}).isRequired,
   renderData: PropTypes.bool,
   styling: PropTypes.shape({
     hasCustomFileStyle: PropTypes.bool.isRequired

src/data-table/row-header.jsx

@@ -1,4 +1,3 @@
-import qlik from 'qlik';
 import React from 'react';
 import PropTypes from 'prop-types';
 import HeaderPadding from './header-padding.jsx';
@@ -12,9 +11,8 @@ class RowHeader extends React.PureComponent {
   }
 
   handleSelect () {
-    const { entry, altState, component } = this.props;
+    const { component, entry } = this.props;
-    const app = qlik.currApp(component);
+    component.backendApi.selectValues(0, [entry.elementNumber], false);
-    app.field(entry.name, altState).select([entry.elementNumber], false, false);
   }
 
   render () {
@@ -46,11 +44,18 @@ class RowHeader extends React.PureComponent {
 RowHeader.propTypes = {
   entry: PropTypes.shape({
     displayValue: PropTypes.string.isRequired,
-    elementNumber: PropTypes.number.isRequired,
+    elementNumber: PropTypes.number.isRequired
-    name: PropTypes.string.isRequired
+  }).isRequired,
+  component: PropTypes.shape({
+    backendApi: PropTypes.shape({
+      selectValues: function (props, propName) {
+        if (props.isSnapshot || typeof props[propName] === 'function') {
+          return null;
+        }
+        return new Error('Missing implementation of qlik.backendApi.selectValues.');
+      }
+    }).isRequired
   }).isRequired,
-  altState: PropTypes.string.isRequired,
-  component: PropTypes.shape({}).isRequired,
   rowStyle: PropTypes.shape({}).isRequired,
   styleBuilder: PropTypes.shape({}).isRequired,
   styling: PropTypes.shape({}).isRequired

src/dataset.js

@@ -6,19 +6,22 @@ function createCube (definition, app) {
   });
 }
 
-async function buildDataCube (originCubeDefinition, hasTwoDimensions, app) {
+async function buildDataCube (originCubeDefinition, originCube, app, requestPage) {
   const cubeDefinition = {
     ...originCubeDefinition,
     qInitialDataFetch: [
       {
+        // eslint-disable-next-line no-undefined
+        qTop: requestPage === undefined ? 0 : requestPage[0].qTop,
+        qLeft: 0,
         qHeight: 1000,
-        qWidth: 10
+        qWidth: originCube.qSize.qcx
       }
     ],
     qDimensions: [originCubeDefinition.qDimensions[0]],
     qMeasures: originCubeDefinition.qMeasures
   };
-  if (hasTwoDimensions) {
+  if (originCube.qDimensionInfo.length === 2) {
     cubeDefinition.qDimensions.push(originCubeDefinition.qDimensions[1]);
   }
   const cube = await createCube(cubeDefinition, app);
@@ -28,20 +31,41 @@ async function buildDataCube (originCubeDefinition, hasTwoDimensions, app) {
 }
 
 export async function initializeDataCube (component, layout) {
+
   if (component.backendApi.isSnapshot) {
     return layout.snapshotData.dataCube;
   }
-
   const app = qlik.currApp(component);
   const properties = (await component.backendApi.getProperties());
+  const rowCount = component.backendApi.getRowCount();
+  const cellCount = rowCount * layout.qHyperCube.qSize.qcx;
+  const maxLoops = layout.maxloops;
 
   // If this is a master object, fetch the hyperCubeDef of the original object
-  const hyperCubeDef = properties.qExtendsId
+  let hyperCubeDef = properties.qExtendsId
     ? (await app.getObjectProperties(properties.qExtendsId)).properties.qHyperCubeDef
     : properties.qHyperCubeDef;
-  hyperCubeDef.qStateName = layout.qStateName || "";
+  hyperCubeDef = JSON.parse(JSON.stringify(hyperCubeDef));
-
+  hyperCubeDef.qStateName = layout.qStateName;
-  return buildDataCube(hyperCubeDef, layout.qHyperCube.qDimensionInfo.length === 2, app);
+  const pagedCube = {};
+  let lastRow = 0;
+  if (cellCount < (maxLoops * 10000)) {
+    for (let index = 0; cellCount > lastRow; index += 1) {
+      const requestPage = [
+        {
+          qHeight: 1000,
+          qLeft: 0,
+          qTop: lastRow,
+          qWidth: 10 // should be # of columns
+        }
+      ];
+      // eslint-disable-next-line no-await-in-loop
+      pagedCube[index] = await buildDataCube(hyperCubeDef, layout.qHyperCube, app, requestPage);
+      lastRow = lastRow + 1000;
+    }
+    return pagedCube;
+  }
+  return null;
 }
 
 export function initializeDesignList (component, layout) {

src/definition/index.js

@@ -39,7 +39,7 @@ const definition = {
           component: 'text'
         },
         paragraph1: {
-          label: `P&L pivot is a Qlik Sense extension which allows you to display Profit & Loss
+          label: `P&L pivot is a Qlik Sense chart which allows you to display Profit & Loss
             reporting with color and font customizations.`,
           component: 'text'
         },

src/definition/pagination.js

@@ -23,30 +23,6 @@ const pagination = {
         {
           value: 4,
           label: '40k cells'
-        },
-        {
-          value: 5,
-          label: '50k cells'
-        },
-        {
-          value: 6,
-          label: '60k cells'
-        },
-        {
-          value: 7,
-          label: '70k cells'
-        },
-        {
-          value: 8,
-          label: '80k cells'
-        },
-        {
-          value: 9,
-          label: '90k cells'
-        },
-        {
-          value: 10,
-          label: '100k cells'
         }
       ],
       defaultValue: 2
@@ -55,7 +31,8 @@ const pagination = {
       ref: 'errormessage',
       label: 'Default error message',
       type: 'string',
-      defaultValue: 'Unable to display all the data. Apply more filters to limit the amount of displayed data.'
+      defaultValue: `Unable to display all the data. 
+      Change the pagination size supported or apply more filters to limit the amount of displayed data.`
     }
   }
 };

src/export-button.jsx

@@ -1,42 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { exportXLS } from './excel-export';
-
-class ExportButton extends React.PureComponent {
-  constructor (props) {
-    super(props);
-    this.handleExport = this.handleExport.bind(this);
-  }
-
-  handleExport () {
-    const { component, excelExport, general } = this.props;
-    const { title, subtitle, footnote } = general;
-    if (excelExport) {
-      exportXLS(component.$element, title, subtitle, footnote);
-    }
-  }
-
-  render () {
-    const { excelExport } = this.props;
-    return excelExport === true && (
-      <input
-        className="icon-xls"
-        onClick={this.handleExport}
-        src="/Extensions/qlik-smart-pivot/Excel.png"
-        type="image"
-      />
-    );
-  }
-}
-
-ExportButton.defaultProps = {
-  excelExport: false
-};
-
-ExportButton.propTypes = {
-  component: PropTypes.shape({}).isRequired,
-  excelExport: PropTypes.bool,
-  general: PropTypes.shape({}).isRequired
-};
-
-export default ExportButton;

src/headers-table/column-header.jsx

@@ -1,4 +1,3 @@
-import qlik from 'qlik';
 import React from 'react';
 import PropTypes from 'prop-types';
 import { HEADER_FONT_SIZE } from '../initialize-transformed';
@@ -11,9 +10,8 @@ class ColumnHeader extends React.PureComponent {
   }
 
   handleSelect () {
-    const { entry, altState, component } = this.props;
+    const { component, entry } = this.props;
-    const app = qlik.currApp(component);
+    component.backendApi.selectValues(1, [entry.elementNumber], false);
-    app.field(entry.name, altState).select([entry.elementNumber], false, false);
   }
 
   render () {
@@ -57,13 +55,20 @@ ColumnHeader.propTypes = {
   baseCSS: PropTypes.shape({}).isRequired,
   cellWidth: PropTypes.string.isRequired,
   colSpan: PropTypes.number,
+  component: PropTypes.shape({
+    backendApi: PropTypes.shape({
+      selectValues: function (props, propName) {
+        if (props.isSnapshot || typeof props[propName] === 'function') {
+          return null;
+        }
+        return new Error('Missing implementation of qlik.backendApi.selectValues.');
+      }
+    }).isRequired
+  }).isRequired,
   entry: PropTypes.shape({
     displayValue: PropTypes.string.isRequired,
-    elementNumber: PropTypes.number.isRequired,
+    elementNumber: PropTypes.number.isRequired
-    name: PropTypes.string.isRequired
   }).isRequired,
-  altState: PropTypes.string.isRequired,
-  component: PropTypes.shape({}).isRequired,
   styling: PropTypes.shape({
     headerOptions: PropTypes.shape({
       fontSizeAdjustment: PropTypes.number.isRequired

src/headers-table/dim1-header.jsx

@@ -1,9 +1,10 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import ExportButton from '../export-button.jsx';
 import { HEADER_FONT_SIZE } from '../initialize-transformed';
+import Tooltip from '../tooltip/index.jsx';
 
-const ExportColumnHeader = ({ component, baseCSS, general, title, allowExcelExport, hasSecondDimension, styling }) => {
+const Dim1Header = ({ component, baseCSS, title, hasSecondDimension, styling }) => {
+  const inEditState = component.inEditState();
   const rowSpan = hasSecondDimension ? 2 : 1;
   const isMediumFontSize = styling.headerOptions.fontSizeAdjustment === HEADER_FONT_SIZE.MEDIUM;
   const style = {
@@ -21,21 +22,20 @@ const ExportColumnHeader = ({ component, baseCSS, general, title, allowExcelExpo
       rowSpan={rowSpan}
       style={style}
     >
-      <ExportButton
+      <Tooltip
-        component={component}
+        isTooltipActive={!inEditState}
-        excelExport={allowExcelExport}
+        styling={styling}
-        general={general}
+        tooltipText={title}
-      />
+      >
-      {title}
+        {title}
+      </Tooltip>
     </th>
   );
 };
 
-ExportColumnHeader.propTypes = {
+Dim1Header.propTypes = {
-  component: PropTypes.shape({}).isRequired,
-  allowExcelExport: PropTypes.bool.isRequired,
   baseCSS: PropTypes.shape({}).isRequired,
-  general: PropTypes.shape({}).isRequired,
+  component: PropTypes.shape({}).isRequired,
   hasSecondDimension: PropTypes.bool.isRequired,
   styling: PropTypes.shape({
     headerOptions: PropTypes.shape({
@@ -45,4 +45,4 @@ ExportColumnHeader.propTypes = {
   title: PropTypes.string.isRequired
 };
 
-export default ExportColumnHeader;
+export default Dim1Header;

src/headers-table/index.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import ExportColumnHeader from './export-column-header.jsx';
+import Dim1Header from './dim1-header.jsx';
 import ColumnHeader from './column-header.jsx';
 import MeasurementColumnHeader from './measurement-column-header.jsx';
 import { injectSeparators } from '../utilities';
@@ -12,7 +12,6 @@ class HeadersTable extends React.PureComponent {
       columnSeparatorWidth,
       component,
       data,
-      general,
       isKpi,
       styling
     } = this.props;
@@ -43,11 +42,9 @@ class HeadersTable extends React.PureComponent {
           <tbody>
             <tr>
               {isKpi ?
-                <ExportColumnHeader
+                <Dim1Header
-                  allowExcelExport={general.allowExcelExport}
                   baseCSS={baseCSS}
                   component={component}
-                  general={general}
                   hasSecondDimension={hasSecondDimension}
                   styling={styling}
                   title={dimension1[0].name}
@@ -75,7 +72,6 @@ class HeadersTable extends React.PureComponent {
                 }
                 return (
                   <ColumnHeader
-                    altState={data.meta.altState}
                     baseCSS={baseCSS}
                     cellWidth={cellWidth}
                     colSpan={measurements.length}
@@ -128,12 +124,8 @@ HeadersTable.propTypes = {
       dimension1: PropTypes.array,
       dimension2: PropTypes.array,
       measurements: PropTypes.array
-    }),
-    meta: PropTypes.shape({
-      altState: PropTypes.string.isRequired
     })
   }).isRequired,
-  general: PropTypes.shape({}).isRequired,
   component: PropTypes.shape({}).isRequired,
   styling: PropTypes.shape({
     headerOptions: PropTypes.shape({}),

src/index.js

@@ -1,21 +1,19 @@
-import definition from './definition';
+import definition from "./definition";
-import { initializeDataCube, initializeDesignList } from './dataset';
+import { exportXLS } from "./excel-export";
-import initializeStore from './store';
+import { initializeDataCube, initializeDesignList } from "./dataset";
-import React from 'react';
+import initializeStore from "./store";
-import ReactDOM from 'react-dom';
+import qlik from "qlik";
-import Root from './root.jsx';
+import React from "react";
-import './main.less';
+import ReactDOM from "react-dom";
+import Root from "./root.jsx";
+import "./main.less";
 
-if (!window._babelPolyfill) { // eslint-disable-line no-underscore-dangle
+if (!window._babelPolyfill) {
-  require('@babel/polyfill'); // eslint-disable-line global-require
+  // eslint-disable-line no-underscore-dangle
+  require("@babel/polyfill"); // eslint-disable-line global-require
 }
 
 export default {
-  controller: [
-    '$scope',
-    '$timeout',
-    function controller () {}
-  ],
   design: {
     dimensions: {
       max: 1,
@@ -24,20 +22,23 @@ export default {
   },
   data: {
     dimensions: {
-      max: function (nMeasures) {
+      max (nMeasures) {
         return nMeasures < 9 ? 2 : 1;
       },
       min: 1,
       uses: 'dimensions'
     },
     measures: {
-      max: function (nDims) {
+      max (nDims) {
         return nDims < 2 ? 9 : 8;
       },
       min: 1,
       uses: 'measures'
     }
   },
+  // Prevent conversion from and to this object
+  exportProperties: null,
+  importProperties: null,
   definition,
   initialProperties: {
     version: 1.0,
@@ -45,11 +46,14 @@ export default {
       qDimensions: [],
       qInitialDataFetch: [
         {
-          qHeight: 1,
+          qTop: 0,
-          qWidth: 10
+          qLeft: 0,
+          qWidth: 50,
+          qHeight: 50
         }
       ],
-      qMeasures: []
+      qMeasures: [],
+      qSuppressZero: false
     }
   },
   support: {
@@ -57,23 +61,32 @@ export default {
     exportData: true,
     snapshot: true
   },
-  paint: async function ($element, layout) {
+  async paint ($element, layout, requestPage) {
-    const dataCube = await initializeDataCube(this, layout);
+    const dataCube = await initializeDataCube(this, layout, requestPage);
-    const designList = await initializeDesignList(this, layout);
-    const state = await initializeStore({
-      $element,
-      component: this,
-      dataCube,
-      designList,
-      layout
-    });
     const editmodeClass = this.inAnalysisState() ? '' : 'edit-mode';
+    let state, designList;
+    if (dataCube === null) {
+      state = {
+        $element,
+        component: this,
+        dataCube,
+        designList,
+        layout,
+        error: true
+      };
+    } else {
+      designList = await initializeDesignList(this, layout);
+      state = await initializeStore({
+        $element,
+        component: this,
+        dataCube,
+        designList,
+        layout,
+        error: false
+      });
+    }
     const jsx = (
-      <Root
+      <Root editmodeClass={editmodeClass} component={this} state={state} />
-        editmodeClass={editmodeClass}
-        component={this}
-        state={state}
-      />
     );
 
     ReactDOM.render(jsx, $element[0]);
@@ -81,10 +94,41 @@ export default {
   snapshot: {
     canTakeSnapshot: true
   },
-  setSnapshotData: async function (snapshotLayout) {
+  async setSnapshotData (snapshotLayout) {
-    snapshotLayout.snapshotData.dataCube = await initializeDataCube(this, snapshotLayout);
+    snapshotLayout.snapshotData.dataCube = await initializeDataCube(
-    snapshotLayout.snapshotData.designList = await initializeDesignList(this, snapshotLayout);
+      this,
+      snapshotLayout
+    );
+    snapshotLayout.snapshotData.designList = await initializeDesignList(
+      this,
+      snapshotLayout
+    );
     return snapshotLayout;
   },
+  async getContextMenu (obj, menu) {
+    const app = qlik.currApp(this);
+    const isPersonalResult = await app.global.isPersonalMode();
+    if (
+      !this.$scope.layout.allowexportxls ||
+      (isPersonalResult && isPersonalResult.qReturn)
+    ) {
+      return menu;
+    }
+
+    menu.addItem({
+      translation: 'Export as XLS',
+      tid: 'export-excel',
+      icon: 'export',
+      select: () => {
+        exportXLS(
+          this.$element,
+          this.$scope.layout.title,
+          this.$scope.layout.subtitle,
+          this.$scope.layout.footnote
+        );
+      }
+    });
+    return menu;
+  },
   version: 1.0
 };

src/initialize-transformed.js

@@ -64,63 +64,64 @@ function generateMatrixCell ({ cell, dimension1Information, dimension2Informatio
 
   if (dimension2Information) {
     matrixCell.parents.dimension2 = {
-      elementNumber: dimension2Information.qElemNumber
+      elementNumber: dimension2Information.qElemNumber,
+      header: dimension2Information.qText
     };
   }
 
   return matrixCell;
 }
 
-let lastRow = 0;
-function generateDataSet (
-  component, dimensionsInformation, measurementsInformation, dataCube) {
 
+function generateDataSet (component, dimensionsInformation, measurementsInformation, dataCube) {
   const measurements = generateMeasurements(measurementsInformation);
   let dimension1 = [];
   let dimension2 = [];
   let matrix = [];
 
   const hasSecondDimension = dimensionsInformation.length > 1;
-  dataCube.forEach(row => {
+  // eslint-disable-next-line no-undefined
-    lastRow += 1;
+  for (let index = 0; dataCube[index] !== undefined; index++) {
-    const dimension1Entry = generateDimensionEntry(dimensionsInformation[0], row[0]);
+    // eslint-disable-next-line no-loop-func
-    dimension1.push(dimension1Entry);
+    dataCube[index].forEach(row => {
-    let dimension2Entry;
+      const dimension1Entry = generateDimensionEntry(dimensionsInformation[0], row[0]);
-    let firstDataCell = 1;
+      dimension1.push(dimension1Entry);
-    if (hasSecondDimension) {
+      let dimension2Entry;
-      dimension2Entry = generateDimensionEntry(dimensionsInformation[1], row[1]);
+      let firstDataCell = 1;
-      dimension2.push(dimension2Entry);
+      if (hasSecondDimension) {
-      firstDataCell = 2;
+        dimension2Entry = generateDimensionEntry(dimensionsInformation[1], row[1]);
-    }
+        dimension2.push(dimension2Entry);
-    let matrixRow = row
+        firstDataCell = 2;
-      .slice(firstDataCell, row.length)
+      }
-      .map((cell, cellIndex) => {
+      let matrixRow = row
-        const measurementInformation = measurements[cellIndex];
+        .slice(firstDataCell, row.length)
-        measurementInformation.index = cellIndex;
+        .map((cell, cellIndex) => {
-        const dimension1Information = row[0]; // eslint-disable-line prefer-destructuring
+          const measurementInformation = measurements[cellIndex];
-        const dimension2Information = hasSecondDimension ? row[1] : null;
+          measurementInformation.index = cellIndex;
-        const generatedCell = generateMatrixCell({
+          const dimension1Information = row[0]; // eslint-disable-line prefer-destructuring
-          cell,
+          const dimension2Information = hasSecondDimension ? row[1] : null;
-          dimension1Information,
+          const generatedCell = generateMatrixCell({
-          dimension2Information,
+            cell,
-          measurementInformation
+            dimension1Information,
+            dimension2Information,
+            measurementInformation
+          });
+          return generatedCell;
         });
 
-        return generatedCell;
+      let appendToRowIndex = matrix.length;
-      });
+      if (hasSecondDimension) {
-
-    let appendToRowIndex = matrix.length;
-    if (hasSecondDimension) {
       // See if there already is a row for the current dim1
-      for (let i = 0; i < matrix.length; i++) {
+        for (let i = 0; i < matrix.length; i++) {
-        if (matrix[i][0].parents.dimension1.header === matrixRow[0].parents.dimension1.header) {
+          if (matrix[i][0].parents.dimension1.header === matrixRow[0].parents.dimension1.header) {
-          appendToRowIndex = i;
+            appendToRowIndex = i;
-          matrixRow = matrix[i].concat(matrixRow);
+            matrixRow = matrix[i].concat(matrixRow);
+          }
         }
       }
-    }
+      matrix[appendToRowIndex] = matrixRow;
-    matrix[appendToRowIndex] = matrixRow;
+    });
-  });
+  }
 
   // filter header dimensions to only have distinct values
   dimension1 = distinctArray(dimension1);
@@ -141,7 +142,7 @@ function generateDataSet (
       let rowDataIndex = 0;
       dimension2.forEach(dim => {
         rowDataIndex = appendMissingCells(
-          row, newRow, rowDataIndex, measurements, rowIndex, dim.elementNumber);
+          row, newRow, rowDataIndex, measurements, rowIndex, dim, dimension1);
       });
     } else {
       appendMissingCells(row, newRow, 0, measurements, rowIndex);
@@ -165,14 +166,11 @@ function generateDataSet (
  * index of the dimension2 value being processed.
  */
 function appendMissingCells (
-  sourceRow, destRow, sourceIndex, measurements, dim1ElementNumber, dim2ElementNumber = -1) {
+  sourceRow, destRow, sourceIndex, measurements, matrixIndex, dim2, dim1) {
 
   let index = sourceIndex;
   measurements.forEach((measurement, measureIndex) => {
-    if (index < sourceRow.length
+    if (index < sourceRow.length) {
-      && (dim2ElementNumber === -1
-        || sourceRow[index].parents.dimension2.elementNumber === dim2ElementNumber)
-      && sourceRow[index].parents.measurement.header === measurement.name) {
       // Source contains the expected cell
       destRow.push(sourceRow[index]);
       index++;
@@ -181,8 +179,14 @@ function appendMissingCells (
       destRow.push({
         displayValue: '',
         parents: {
-          dimension1: { elementNumber: dim1ElementNumber },
+          dimension1: {
-          dimension2: { elementNumber: dim2ElementNumber },
+            elementNumber: dim1[matrixIndex].elementNumber,
+            header: dim1[matrixIndex].displayValue
+          },
+          dimension2: {
+            elementNumber: dim2.elementNumber,
+            header: dim2.displayValue
+          },
           measurement: {
             header: measurement.name,
             index: measureIndex
@@ -194,12 +198,10 @@ function appendMissingCells (
   return index;
 }
 
-function initializeTransformed ({ $element, component, dataCube, designList, layout }) {
+function initializeTransformed ({ component, dataCube, designList, layout }) {
   const dimensionsInformation = component.backendApi.getDimensionInfos();
   const measurementsInformation = component.backendApi.getMeasureInfos();
   const dimensionCount = layout.qHyperCube.qDimensionInfo.length;
-  const rowCount = component.backendApi.getRowCount();
-  const maxLoops = layout.maxloops;
   const {
     dimension1,
     dimension2,
@@ -250,8 +252,7 @@ function initializeTransformed ({ $element, component, dataCube, designList, lay
       },
       matrix, // 2d array of all rows/cells to render in body of datatable
       meta: {
-        dimensionCount: dimensionsInformation.length,
+        dimensionCount: dimensionsInformation.length
-        altState: layout.qStateName || ""
       }
     },
     general: {
@@ -260,7 +261,6 @@ function initializeTransformed ({ $element, component, dataCube, designList, lay
       cellWidth: cellWidth,
       errorMessage: layout.errormessage,
       footnote: layout.footnote,
-      maxLoops,
       subtitle: layout.subtitle,
       title: layout.title,
       useColumnSeparator: layout.separatorcols && dimensionCount > 1
@@ -321,20 +321,6 @@ function initializeTransformed ({ $element, component, dataCube, designList, lay
     }
   };
 
-  if (rowCount > lastRow && rowCount <= (maxLoops * 1000)) {
-    const requestPage = [
-      {
-        qHeight: Math.min(1000, rowCount - lastRow),
-        qLeft: 0,
-        qTop: matrix.length,
-        qWidth: 10 // should be # of columns
-      }
-    ];
-    component.backendApi.getData(requestPage).then(() => {
-      component.paint($element, layout);
-    });
-  }
-
   return transformedProperties;
 }
 

src/linked-scroll/linked-scroll-wrapper.jsx

@@ -33,7 +33,7 @@ class LinkedScrollWrapper extends React.PureComponent {
   unlinkComponent (component) {
     const componentIndex = this.scrollElements.map(element => element.component).indexOf(component);
     if (componentIndex !== -1) {
-      this.scrollElements.removeAt(componentIndex);
+      this.scrollElements.splice(componentIndex, 1);
       // eslint-disable-next-line react/no-find-dom-node
       const node = ReactDOM.findDOMNode(component);
       node.onscroll = null;

src/main.less

@@ -105,6 +105,20 @@
     width: 100%;
   }
 
+  .error {
+    position: absolute; /*Define position */
+    width: 100%; /* Full width (cover the whole page) */
+    height: 100%; /* Full height (cover the whole page) */
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 1000; /* Specify a stack order in case you're using a different order for other elements */
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
   .kpi-table .fdim-cells,
   .data-table td {
     line-height: 1em !important;

src/root.jsx

@@ -1,8 +1,8 @@
-import React from 'react';
+import React from "react";
-import PropTypes from 'prop-types';
+import PropTypes from "prop-types";
-import HeadersTable from './headers-table/index.jsx';
+import HeadersTable from "./headers-table/index.jsx";
-import DataTable from './data-table/index.jsx';
+import DataTable from "./data-table/index.jsx";
-import { LinkedScrollWrapper, LinkedScrollSection } from './linked-scroll';
+import { LinkedScrollWrapper, LinkedScrollSection } from "./linked-scroll";
 
 class Root extends React.PureComponent {
   constructor (props) {
@@ -12,9 +12,12 @@ class Root extends React.PureComponent {
   }
 
   componentDidUpdate () {
-    const tableWidth = this.dataTableRef.getBoundingClientRect().width;
+    let tableWidth;
-    if (this.renderedTableWidth !== tableWidth) {
+    if (this.dataTableRef) {
-      this.forceUpdate();
+      tableWidth = this.dataTableRef.getBoundingClientRect().width;
+      if (this.renderedTableWidth !== tableWidth) {
+        this.forceUpdate();
+      }
     }
   }
 
@@ -25,7 +28,7 @@ class Root extends React.PureComponent {
 
   render () {
     const { editmodeClass, component, state } = this.props;
-    const { data, general, styling } = state;
+    const { data, general, styling, error } = state;
 
     // Determine cell- and column separator width
     let cellWidth = '0px';
@@ -48,72 +51,80 @@ class Root extends React.PureComponent {
         let separatorWidth = 0;
         if (general.useColumnSeparator) {
           separatorCount = data.headers.dimension2.length - 1;
-          separatorWidth = Math.min(Math.floor(tableWidth * 0.2 / separatorCount), 8);
+          separatorWidth = Math.min(
+            Math.floor((tableWidth * 0.2) / separatorCount),
+            8
+          );
           columnSeparatorWidth = `${separatorWidth}px`;
         }
 
-        const separatorWidthSum = (separatorWidth + borderWidth) * separatorCount;
+        const separatorWidthSum =
-        cellWidth = `${Math.floor((tableWidth - separatorWidthSum - headerMarginRight - borderWidth)
+          (separatorWidth + borderWidth) * separatorCount;
-          / rowCellCount) - borderWidth}px`;
+        cellWidth = `${Math.floor(
+          (tableWidth - separatorWidthSum - headerMarginRight - borderWidth) /
+            rowCellCount) - borderWidth}px`;
       }
     }
 
     return (
       <div className="root">
-        <LinkedScrollWrapper>
+        {error ? (
-          <div className={`kpi-table ${editmodeClass}`}>
+          <div className={`error ${editmodeClass}`}>
-            <HeadersTable
+            {state.layout.errormessage}
-              cellWidth={cellWidth}
-              columnSeparatorWidth={columnSeparatorWidth}
-              component={component}
-              data={data}
-              general={general}
-              isKpi
-              styling={styling}
-            />
-            <LinkedScrollSection linkVertical>
-              <DataTable
-                cellWidth={cellWidth}
-                columnSeparatorWidth={columnSeparatorWidth}
-                component={component}
-                data={data}
-                general={general}
-                renderData={false}
-                styling={styling}
-              />
-            </LinkedScrollSection>
           </div>
-          <div
+        ) : (
-            className={`data-table ${editmodeClass}`}
+          <LinkedScrollWrapper>
-            style={{ width: general.cellWidth ? 'auto' : '100%' }}
+            <div className={`kpi-table ${editmodeClass}`}>
-            ref={this.onDataTableRefSet}
-          >
-            <LinkedScrollSection linkHorizontal>
               <HeadersTable
                 cellWidth={cellWidth}
                 columnSeparatorWidth={columnSeparatorWidth}
                 component={component}
                 data={data}
                 general={general}
-                isKpi={false}
+                isKpi
                 styling={styling}
               />
-            </LinkedScrollSection>
+              <LinkedScrollSection linkVertical>
-            <LinkedScrollSection
+                <DataTable
-              linkHorizontal
+                  cellWidth={cellWidth}
-              linkVertical
+                  columnSeparatorWidth={columnSeparatorWidth}
+                  component={component}
+                  data={data}
+                  general={general}
+                  renderData={false}
+                  styling={styling}
+                />
+              </LinkedScrollSection>
+            </div>
+            <div
+              className={`data-table ${editmodeClass}`}
+              style={{ width: general.cellWidth ? 'auto' : '100%' }}
+              ref={this.onDataTableRefSet}
             >
-              <DataTable
+              <LinkedScrollSection linkHorizontal>
-                cellWidth={cellWidth}
+                <HeadersTable
-                columnSeparatorWidth={columnSeparatorWidth}
+                  cellWidth={cellWidth}
-                component={component}
+                  columnSeparatorWidth={columnSeparatorWidth}
-                data={data}
+                  component={component}
-                general={general}
+                  data={data}
-                styling={styling}
+                  general={general}
-              />
+                  isKpi={false}
-            </LinkedScrollSection>
+                  styling={styling}
-          </div>
+                />
-        </LinkedScrollWrapper>
+              </LinkedScrollSection>
+              <LinkedScrollSection linkHorizontal linkVertical>
+                <DataTable
+                  cellWidth={cellWidth}
+                  columnSeparatorWidth={columnSeparatorWidth}
+                  component={component}
+                  data={data}
+                  general={general}
+                  styling={styling}
+                />
+              </LinkedScrollSection>
+            </div>
+          </LinkedScrollWrapper>
+        )}
       </div>
     );
   }
@@ -123,9 +134,9 @@ Root.propTypes = {
   component: PropTypes.shape({}).isRequired,
   editmodeClass: PropTypes.string.isRequired,
   state: PropTypes.shape({
-    data: PropTypes.object.isRequired,
+    data: PropTypes.object,
-    general: PropTypes.object.isRequired,
+    general: PropTypes.object,
-    styling: PropTypes.object.isRequired
+    styling: PropTypes.object
   }).isRequired
 };