Fixed alternate state support

-Previously, the shown data always followed
 default state, and not the set state.
-Previously, the selections made in smart pivot
 sometimes used the previous alternate state.

Issue: QLIK-95802

README.md

@@ -1,52 +1,22 @@
 # P&L Smart Pivot, a Qlik Sense Extension for Financial reporting
-[![CircleCI](https://circleci.com/gh/qlik-oss/PLSmartPivot.svg?style=svg)](https://circleci.com/gh/qlik-oss/PLSmartPivot)
+This extension is part of the extension bundles for Qlik Sense. The repository is maintained and moderated by Qlik RD.
 
-This extension is useful to create reports where the look&feel is rellevantand and pivot a second dimension is needed. Based on P&L Smart.
-
-It's specifically focused on financial reports, trying to solve some common needs of this area:
-- smart export to excel
-- easy creation of reports
-- custom corporate reporting (bold, italic, background color, letter size, headers,...)
-- selections inside the reports
-- custom external templates
-- analytical reports
-
-
-# Manual
-You'll find a manual [Qlik Sense P&LSmart Pivot Extension Manual.pdf](resources/Qlik Sense P&LSmart Pivot Extension Manual.pdf) and one app example [P&LSmartPivot_demo.qvf](resources/P&LSmartPivot_demo.qvf).
-
-
-# Installation
-
-1. Download the extension zip, `qlik-smart-pivot_<version>.zip`, from the latest release(https://github.com/qlik-oss/PLSmartPivot/releases/latest)
-2. Install the extension:
-
-   a. **Qlik Sense Desktop**: unzip to a directory under [My Documents]/Qlik/Sense/Extensions.
-
-   b. **Qlik Sense Server**: import the zip file in the QMC.
+Feel free to fork and suggest pull requests for improvements and bug fixes. Changes will be moderated and reviewed before inclusion in future bundle versions. Please note that emphasis is on backward compatibility, i.e. breaking changes will most likely not be approved.
 
+Usage documentation for the extension is available at https://help.qlik.com.
 
 # Developing the extension
-
 If you want to do code changes to the extension follow these simple steps to get going.
 
 1. Get Qlik Sense Desktop
-1. Create a new app and add the extension to a sheet.
+1. Create a new app and add P&L pivot to a sheet.
 2. Clone the repository
 3. Run `npm install`
-4. Set the environment variable `BUILD_PATH` to your extensions directory. It will be something like `C:/Users/<user>/Documents/Qlik/Sense/Extensions/<extension_name>`.
-5. You now have two options. Either run the watch task or the build task. They are explained below. Both of them default to development mode but can be run in production by setting `NODE_ENV=production` before running the npm task.
-
-   a. **Watch**: `npm run watch`. This will start a watcher which will rebuild the extension and output all needed files to the `buildFolder` for each code change you make. See your changes directly in your Qlik Sense app.
-
-   b. **Build**: `npm run build`. If you want to build the extension package. The output zip-file can be found in the `buildFolder`.
-
+4. Run `npm run build` - to build a dev-version to the /dist folder.
+5. Move the content of the /dist folder to the extension directory. Usually in `C:/Users/<user>/Documents/Qlik/Sense/Extensions/qlik-smart-pivot`.
 
 # Original authors
-
 [github.com/iviasensio](https://github.com/iviasensio)
 
-
 # License
-
-Released under the [MIT License](LICENSE).
+Released under the [MIT License](LICENSE).

src/data-table/data-cell.jsx

@@ -1,3 +1,4 @@
+import qlik from 'qlik';
 import React from 'react';
 import PropTypes from 'prop-types';
 import Tooltip from '../tooltip/index.jsx';
@@ -9,22 +10,38 @@ class DataCell extends React.PureComponent {
   }
 
   handleSelect () {
-    const { data: { meta: { dimensionCount } }, general: { allowFilteringByClick }, measurement, qlik } = this.props;
+    const {
+      data: {
+        headers,
+        meta: {
+          dimensionCount,
+          altState
+        }
+      },
+      general: {
+        allowFilteringByClick
+      },
+      measurement,
+      component
+    } = this.props;
+
     const hasSecondDimension = dimensionCount > 1;
     if (!allowFilteringByClick) {
       return;
     }
 
-    qlik.backendApi.selectValues(0, [measurement.parents.dimension1.elementNumber], true);
+    const app = qlik.currApp(component);
+    app.field(headers.dimension1[0].name, altState)
+      .select([measurement.parents.dimension1.elementNumber], false, false);
 
     if (hasSecondDimension) {
-      qlik.backendApi.selectValues(1, [measurement.parents.dimension2.elementNumber], true);
+      app.field(headers.dimension2[0].name, altState)
+        .select([measurement.parents.dimension2.elementNumber], false, false);
     }
   }
 
   render () {
     const {
-      data,
       general,
       measurement,
       styleBuilder,
@@ -37,15 +54,18 @@ class DataCell extends React.PureComponent {
       fontFamily: styling.options.fontFamily,
       ...styleBuilder.getStyle(),
       paddingLeft: '5px',
-      textAlign: textAlignment
+      textAlign: textAlignment,
+      minWidth: general.cellWidth,
+      maxWidth: general.cellWidth
     };
 
     const isEmptyCell = measurement.displayValue === '';
-    const isColumnPercentageBased = (/%/).test(measurement.format);
     let formattedMeasurementValue;
-    if (isEmptyCell || styleBuilder.hasComments()) {
+    if (isEmptyCell) {
       formattedMeasurementValue = '';
       cellStyle.cursor = 'default';
+    } else if (styleBuilder.hasComments()) {
+      formattedMeasurementValue = '.';
     } else {
       formattedMeasurementValue = formatMeasurementValue(measurement, styling);
     }
@@ -66,16 +86,9 @@ class DataCell extends React.PureComponent {
       }
     }
 
-    let cellClass = 'grid-cells';
-    const hasTwoDimensions = data.headers.dimension2 && data.headers.dimension2.length > 0;
-    const shouldUseSmallCells = isColumnPercentageBased && data.headers.measurements.length > 1 && hasTwoDimensions;
-    if (shouldUseSmallCells) {
-      cellClass = 'grid-cells-small';
-    }
-
     return (
       <td
-        className={`${cellClass}${general.cellSuffix}`}
+        className="grid-cells"
         onClick={isEmptyCell ? null : this.handleSelect}
         style={cellStyle}
       >
@@ -93,27 +106,23 @@ class DataCell extends React.PureComponent {
 DataCell.propTypes = {
   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,
   general: PropTypes.shape({
-    cellSuffix: PropTypes.string.isRequired
+    cellWidth: PropTypes.string.isRequired
   }).isRequired,
   measurement: PropTypes.shape({
     format: PropTypes.string,
     name: PropTypes.string,
     value: PropTypes.any
   }).isRequired,
-  qlik: 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,
+  component: PropTypes.shape({}).isRequired,
   styleBuilder: PropTypes.shape({
     hasComments: PropTypes.func.isRequired
   }).isRequired,
@@ -127,9 +136,9 @@ export default DataCell;
 function formatMeasurementValue (measurement, styling) {
   if (isNaN(measurement.value)) {
     return styling.symbolForNulls;
-  } else {
-    return measurement.displayValue;
   }
+
+  return measurement.displayValue;
 }
 
 function getConditionalColor (measurement, conditionalColoring) {

src/data-table/index.jsx

@@ -5,7 +5,7 @@ import DataCell from './data-cell.jsx';
 import RowHeader from './row-header.jsx';
 import { injectSeparators } from '../utilities';
 
-const DataTable = ({ data, general, qlik, renderData, styling }) => {
+const DataTable = ({ data, general, component, renderData, styling }) => {
   const {
     headers: {
       dimension1,
@@ -42,8 +42,9 @@ const DataTable = ({ data, general, qlik, renderData, styling }) => {
               <tr key={dimensionEntry.displayValue}>
                 {!renderData ?
                   <RowHeader
+                    altState={data.meta.altState}
                     entry={dimensionEntry}
-                    qlik={qlik}
+                    component={component}
                     rowStyle={rowStyle}
                     styleBuilder={styleBuilder}
                     styling={styling}
@@ -80,7 +81,7 @@ const DataTable = ({ data, general, qlik, renderData, styling }) => {
                       general={general}
                       key={`${dimensionEntry.displayValue}-${id}`}
                       measurement={measurementData}
-                      qlik={qlik}
+                      component={component}
                       styleBuilder={styleBuilder}
                       styling={styling}
                     />
@@ -107,7 +108,7 @@ DataTable.propTypes = {
     matrix: PropTypes.arrayOf(PropTypes.array.isRequired).isRequired
   }).isRequired,
   general: PropTypes.shape({}).isRequired,
-  qlik: PropTypes.shape({}).isRequired,
+  component: PropTypes.shape({}).isRequired,
   renderData: PropTypes.bool,
   styling: PropTypes.shape({
     hasCustomFileStyle: PropTypes.bool.isRequired

src/data-table/row-header.jsx

@@ -1,3 +1,4 @@
+import qlik from 'qlik';
 import React from 'react';
 import PropTypes from 'prop-types';
 import HeaderPadding from './header-padding.jsx';
@@ -11,13 +12,14 @@ class RowHeader extends React.PureComponent {
   }
 
   handleSelect () {
-    const { entry, qlik } = this.props;
-    qlik.backendApi.selectValues(0, [entry.elementNumber], true);
+    const { entry, altState, component } = this.props;
+    const app = qlik.currApp(component);
+    app.field(entry.name, altState).select([entry.elementNumber], false, false);
   }
 
   render () {
-    const { entry, rowStyle, styleBuilder, styling, qlik } = this.props;
-    const inEditState = qlik.inEditState();
+    const { entry, rowStyle, styleBuilder, styling, component } = this.props;
+    const inEditState = component.inEditState();
 
     return (
       <td
@@ -43,18 +45,12 @@ class RowHeader extends React.PureComponent {
 
 RowHeader.propTypes = {
   entry: PropTypes.shape({
-    displayValue: PropTypes.string.isRequired
-  }).isRequired,
-  qlik: 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
+    displayValue: PropTypes.string.isRequired,
+    elementNumber: PropTypes.number.isRequired,
+    name: PropTypes.string.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

@@ -22,7 +22,9 @@ async function buildDataCube (originCubeDefinition, hasTwoDimensions, app) {
     cubeDefinition.qDimensions.push(originCubeDefinition.qDimensions[1]);
   }
   const cube = await createCube(cubeDefinition, app);
-  return cube.qHyperCube.qDataPages[0].qMatrix;
+  const cubeMatrix = cube.qHyperCube.qDataPages[0].qMatrix;
+  app.destroySessionObject(cube.qInfo.qId);
+  return cubeMatrix;
 }
 
 export async function initializeDataCube (component, layout) {
@@ -37,6 +39,7 @@ export async function initializeDataCube (component, layout) {
   const hyperCubeDef = properties.qExtendsId
     ? (await app.getObjectProperties(properties.qExtendsId)).properties.qHyperCubeDef
     : properties.qHyperCubeDef;
+  hyperCubeDef.qStateName = layout.qStateName || "";
 
   return buildDataCube(hyperCubeDef, layout.qHyperCube.qDimensionInfo.length === 2, app);
 }

src/definition/table-format.js

@@ -214,10 +214,10 @@ const tableFormat = {
       component: 'slider',
       label: 'Column width',
       ref: 'columnwidthslider',
-      min: 1,
-      max: 3,
-      step: 1,
-      defaultValue: 2
+      min: 20,
+      max: 250,
+      step: 10,
+      defaultValue: 50
     },
     SymbolForNulls: {
       ref: 'symbolfornulls',

src/headers-table/column-header.jsx

@@ -1,3 +1,4 @@
+import qlik from 'qlik';
 import React from 'react';
 import PropTypes from 'prop-types';
 import { HEADER_FONT_SIZE } from '../initialize-transformed';
@@ -10,25 +11,28 @@ class ColumnHeader extends React.PureComponent {
   }
 
   handleSelect () {
-    const { entry, qlik } = this.props;
-    qlik.backendApi.selectValues(1, [entry.elementNumber], true);
+    const { entry, altState, component } = this.props;
+    const app = qlik.currApp(component);
+    app.field(entry.name, altState).select([entry.elementNumber], false, false);
   }
 
   render () {
-    const { baseCSS, cellSuffix, colSpan, entry, styling, qlik } = this.props;
-    const inEditState = qlik.inEditState();
+    const { baseCSS, cellWidth, colSpan, entry, styling, component } = this.props;
+    const inEditState = component.inEditState();
     const isMediumFontSize = styling.headerOptions.fontSizeAdjustment === HEADER_FONT_SIZE.MEDIUM;
 
     const style = {
       ...baseCSS,
       fontSize: `${14 + styling.headerOptions.fontSizeAdjustment}px`,
       height: isMediumFontSize ? '43px' : '33px',
-      verticalAlign: 'middle'
+      verticalAlign: 'middle',
+      minWidth: cellWidth,
+      maxWidth: cellWidth
     };
 
     return (
       <th
-        className={`grid-cells2${cellSuffix}`}
+        className="grid-cells"
         colSpan={colSpan}
         onClick={this.handleSelect}
         style={style}
@@ -46,28 +50,20 @@ class ColumnHeader extends React.PureComponent {
 }
 
 ColumnHeader.defaultProps = {
-  cellSuffix: '',
   colSpan: 1
 };
 
 ColumnHeader.propTypes = {
   baseCSS: PropTypes.shape({}).isRequired,
-  cellSuffix: PropTypes.string,
+  cellWidth: PropTypes.string,
   colSpan: PropTypes.number,
   entry: PropTypes.shape({
+    displayValue: PropTypes.string.isRequired,
     elementNumber: PropTypes.number.isRequired,
     name: PropTypes.string.isRequired
   }).isRequired,
-  qlik: 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,
   styling: PropTypes.shape({
     headerOptions: PropTypes.shape({
       fontSizeAdjustment: PropTypes.number.isRequired

src/headers-table/index.jsx

@@ -5,7 +5,7 @@ import ColumnHeader from './column-header.jsx';
 import MeasurementColumnHeader from './measurement-column-header.jsx';
 import { injectSeparators } from '../utilities';
 
-const HeadersTable = ({ data, general, qlik, styling, isKpi }) => {
+const HeadersTable = ({ data, general, component, styling, isKpi }) => {
   const baseCSS = {
     backgroundColor: styling.headerOptions.colorSchema,
     color: styling.headerOptions.textColor,
@@ -28,7 +28,7 @@ const HeadersTable = ({ data, general, qlik, styling, isKpi }) => {
           <tr>
             {isKpi ?
               <ExportColumnHeader
-                id={qlik.options.id}
+                id={component.$scope.layout.qInfo.qId}
                 allowExcelExport={general.allowExcelExport}
                 baseCSS={baseCSS}
                 general={general}
@@ -67,12 +67,13 @@ const HeadersTable = ({ data, general, qlik, styling, isKpi }) => {
               }
               return (
                 <ColumnHeader
+                  altState={data.meta.altState}
                   baseCSS={baseCSS}
-                  cellSuffix={general.cellSuffix}
+                  cellWidth={general.cellWidth}
                   colSpan={measurements.length}
                   entry={entry}
                   key={entry.displayValue}
-                  qlik={qlik}
+                  component={component}
                   styling={styling}
                 />
               );
@@ -124,19 +125,13 @@ HeadersTable.propTypes = {
       dimension1: PropTypes.array,
       dimension2: PropTypes.array,
       measurements: PropTypes.array
+    }),
+    meta: PropTypes.shape({
+      altState: PropTypes.string.isRequired
     })
   }).isRequired,
   general: PropTypes.shape({}).isRequired,
-  qlik: 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,
+  component: PropTypes.shape({}).isRequired,
   styling: PropTypes.shape({
     headerOptions: PropTypes.shape({}),
     options: PropTypes.shape({})

src/headers-table/measurement-column-header.jsx

@@ -4,27 +4,27 @@ import { HEADER_FONT_SIZE } from '../initialize-transformed';
 import Tooltip from '../tooltip/index.jsx';
 
 const MeasurementColumnHeader = ({ baseCSS, general, hasSecondDimension, measurement, styling }) => {
-  const title = `${measurement.name} ${measurement.magnitudeLabelSuffix}`;
+  const title = `${measurement.name}`;
   const { fontSizeAdjustment } = styling.headerOptions;
   const isMediumFontSize = fontSizeAdjustment === HEADER_FONT_SIZE.MEDIUM;
 
   if (hasSecondDimension) {
     const isPercentageFormat = measurement.format.substring(measurement.format.length - 1) === '%';
     let baseFontSize = 14;
-    let cellClass = 'grid-cells2';
     if (isPercentageFormat) {
       baseFontSize = 13;
-      cellClass = 'grid-cells2-small';
     }
     const cellStyle = {
       ...baseCSS,
       fontSize: `${baseFontSize + fontSizeAdjustment}px`,
       height: isMediumFontSize ? '45px' : '35px',
-      verticalAlign: 'middle'
+      verticalAlign: 'middle',
+      minWidth: general.cellWidth,
+      maxWidth: general.cellWidth
     };
     return (
       <th
-        className={`${cellClass}${general.cellSuffix}`}
+        className="grid-cells"
         style={cellStyle}
       >
         <Tooltip
@@ -41,11 +41,13 @@ const MeasurementColumnHeader = ({ baseCSS, general, hasSecondDimension, measure
     ...baseCSS,
     fontSize: `${15 + fontSizeAdjustment}px`,
     height: isMediumFontSize ? '90px' : '70px',
-    verticalAlign: 'middle'
+    verticalAlign: 'middle',
+    minWidth: general.cellWidth,
+    maxWidth: general.cellWidth
   };
   return (
     <th
-      className={`grid-cells2${general.cellSuffix}`}
+      className="grid-cells"
       style={style}
     >
       <Tooltip
@@ -65,7 +67,7 @@ MeasurementColumnHeader.defaultProps = {
 MeasurementColumnHeader.propTypes = {
   baseCSS: PropTypes.shape({}).isRequired,
   general: PropTypes.shape({
-    cellSuffix: PropTypes.string.isRequired
+    cellWidth: PropTypes.string.isRequired
   }).isRequired,
   hasSecondDimension: PropTypes.bool,
   measurement: PropTypes.shape({

src/index.js

@@ -71,7 +71,7 @@ export default {
     const jsx = (
       <Root
         editmodeClass={editmodeClass}
-        qlik={this}
+        component={this}
         state={state}
       />
     );

src/initialize-transformed.js

@@ -24,40 +24,10 @@ function getFontSizeAdjustment (option) {
   return fontSizeAdjustmentOptions[option] || 0;
 }
 
-function getCellSuffix (option) {
-  const cellSuffixOptions = {
-    1: '-s',
-    3: '-l'
-  };
-
-  return cellSuffixOptions[option] || '';
-}
-
-function getMeasurementFormat (measurement) {
-  if (measurement.qNumFormat.qType === 'U' || measurement.qNumFormat.qFmt === '##############') {
-    return '#.##0';
-  } else if (measurement.qNumFormat.qType === 'R') {
-    return measurement.qNumFormat.qFmt.replace(/(|)/gi, '');
-  }
-  return measurement.qNumFormat.qFmt;
-}
-
-function getMagnitudeLabelSuffix (magnitudeOption) {
-  const magnitudeLabelSuffixOptions = {
-    'k': ' (k)',
-    'm': ' (m)'
-  };
-
-  return magnitudeLabelSuffixOptions[magnitudeOption] || '';
-}
-
 function generateMeasurements (information) {
   return information.map(measurement => {
-    const format = getMeasurementFormat(measurement);
-    const formatMagnitude = format.substr(format.length - 1).toLowerCase();
     const transformedMeasurement = {
-      format,
-      magnitudeLabelSuffix: getMagnitudeLabelSuffix(formatMagnitude),
+      format: measurement.qNumFormat.qFmt || '#.##0',
       name: measurement.qFallbackTitle
     };
 
@@ -78,11 +48,6 @@ function generateMatrixCell ({ cell, dimension1Information, dimension2Informatio
   const matrixCell = {
     displayValue: cell.qText,
     format: measurementInformation.format,
-    magnitude: measurementInformation.magnitudeLabelSuffix.substring(
-      measurementInformation.magnitudeLabelSuffix.length - 2,
-      measurementInformation.magnitudeLabelSuffix.length - 1
-    ),
-    magnitudeLabelSuffix: measurementInformation.magnitudeLabelSuffix,
     name: measurementInformation.name,
     parents: {
       dimension1: {
@@ -273,13 +238,15 @@ 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: {
       allowExcelExport: layout.allowexportxls,
       allowFilteringByClick: layout.filteroncellclick,
-      cellSuffix: getCellSuffix(layout.columnwidthslider), // TOOD: move to matrix cells or is it headers.measurements?
+      // If using the previous solution just set 60px
+      cellWidth: `${layout.columnwidthslider > 10 ? layout.columnwidthslider : 60}px`,
       errorMessage: layout.errormessage,
       footnote: layout.footnote,
       maxLoops,

src/main.less

@@ -12,9 +12,7 @@
     pointer-events: none;
   }
 
-  ._cell(@Width: 50px) {
-    min-width: @Width !important;
-    max-width: @Width !important;
+  .grid-cells {
     cursor: pointer;
     line-height: 1em !important;
   }
@@ -74,67 +72,6 @@
     text-align: right;
   }
 
-  // ***************** 
-  // Medium column size 
-  // ***************** 
-
-  .grid-cells {
-    position: relative;
-    ._cell(70px);
-  }
-
-  .grid-cells2 {
-    ._cell(70px);
-  }
-
-  .grid-cells-small {
-    ._cell(52px);
-  }
-
-  .grid-cells2-small {
-    ._cell(52px);
-  }
-
-  // ***************** 
-  // Small column size 
-  // ***************** 
-  .grid-cells-s {
-    ._cell(67px);
-  }
-
-  .grid-cells2-s {
-    ._cell(67px);
-  }
-
-  .grid-cells-small-s {
-    ._cell(52px);
-  }
-
-  .grid-cells2-small-s {
-    ._cell(52px);
-  }
-
-  // ***************** 
-  // Large column size 
-  // ***************** 
-  .grid-cells-l {
-    ._cell(82px);
-  }
-
-  .grid-cells2-l {
-    ._cell(82px);
-  }
-
-  .grid-cells-small-l {
-    ._cell(66px);
-  }
-
-  .grid-cells2-small-l {
-    ._cell(66px);
-  }
-
-  // END OF GRID CELLS
-
   // First Column 
   .fdim-cells {
     min-width: 230px !Important;
@@ -149,14 +86,6 @@
     color: #fff;
   }
 
-  .grid-cells-header {
-    padding: 0;
-  }
-
-  .grid-cells-title {
-    min-width: 522px;
-  }
-
   .grid {
     height: 50px;
     width: 350px;

src/root.jsx

@@ -4,7 +4,7 @@ import HeadersTable from './headers-table/index.jsx';
 import DataTable from './data-table/index.jsx';
 import { LinkedScrollWrapper, LinkedScrollSection } from './linked-scroll';
 
-const Root = ({ state, qlik, editmodeClass }) => (
+const Root = ({ state, component, editmodeClass }) => (
   <div className="root">
     <LinkedScrollWrapper>
       <div className={`kpi-table ${editmodeClass}`}>
@@ -12,14 +12,14 @@ const Root = ({ state, qlik, editmodeClass }) => (
           data={state.data}
           general={state.general}
           isKpi
-          qlik={qlik}
+          component={component}
           styling={state.styling}
         />
         <LinkedScrollSection linkVertical>
           <DataTable
             data={state.data}
             general={state.general}
-            qlik={qlik}
+            component={component}
             renderData={false}
             styling={state.styling}
           />
@@ -31,7 +31,7 @@ const Root = ({ state, qlik, editmodeClass }) => (
             data={state.data}
             general={state.general}
             isKpi={false}
-            qlik={qlik}
+            component={component}
             styling={state.styling}
           />
         </LinkedScrollSection>
@@ -42,7 +42,7 @@ const Root = ({ state, qlik, editmodeClass }) => (
           <DataTable
             data={state.data}
             general={state.general}
-            qlik={qlik}
+            component={component}
             styling={state.styling}
           />
         </LinkedScrollSection>
@@ -52,7 +52,7 @@ const Root = ({ state, qlik, editmodeClass }) => (
 );
 
 Root.propTypes = {
-  qlik: PropTypes.shape({}).isRequired,
+  component: PropTypes.shape({}).isRequired,
   state: PropTypes.shape({
     data: PropTypes.object.isRequired,
     general: PropTypes.object.isRequired,