diff --git a/src/data-table/index.jsx b/src/data-table/index.jsx
index c3bef4f..5da451c 100644
--- a/src/data-table/index.jsx
+++ b/src/data-table/index.jsx
@@ -6,95 +6,92 @@ import HeaderPadding from './header-padding.jsx';
 import RowHeader from './row-header.jsx';
 import { injectSeparators } from '../utilities';
 
-class DataTable extends React.PureComponent {
-  render () {
-    const { data, general, qlik, renderData, styling } = this.props;
-    const {
-      headers: {
-        dimension1,
-        measurements
-      },
-      matrix
-    } = data;
+const DataTable = ({ data, general, qlik, renderData, styling }) => {
+  const {
+    headers: {
+      dimension1,
+      measurements
+    },
+    matrix
+  } = data;
 
-    return (
-      <div className="row-wrapper">
-        <table>
-          <tbody>
-            {dimension1.map((dimensionEntry, dimensionIndex) => {
-              const rowHeaderText = dimensionEntry.displayValue || '';
-              if (rowHeaderText === '-') {
-                return null;
-              }
-              const styleBuilder = new StyleBuilder(styling);
-              if (styling.hasCustomFileStyle) {
-                styleBuilder.parseCustomFileStyle(rowHeaderText);
-              } else {
-                styleBuilder.applyStandardAttributes(dimensionIndex);
-                styleBuilder.applyCustomStyle({
-                  fontSize: `${14 + styling.options.fontSizeAdjustment}px`
-                });
-              }
-              const rowStyle = {
-                fontFamily: styling.options.fontFamily,
-                width: '230px',
-                ...styleBuilder.getStyle()
-              };
+  return (
+    <div className="row-wrapper">
+      <table>
+        <tbody>
+          {dimension1.map((dimensionEntry, dimensionIndex) => {
+            const rowHeaderText = dimensionEntry.displayValue || '';
+            if (rowHeaderText === '-') {
+              return null;
+            }
+            const styleBuilder = new StyleBuilder(styling);
+            if (styling.hasCustomFileStyle) {
+              styleBuilder.parseCustomFileStyle(rowHeaderText);
+            } else {
+              styleBuilder.applyStandardAttributes(dimensionIndex);
+              styleBuilder.applyCustomStyle({
+                fontSize: `${14 + styling.options.fontSizeAdjustment}px`
+              });
+            }
+            const rowStyle = {
+              fontFamily: styling.options.fontFamily,
+              width: '230px',
+              ...styleBuilder.getStyle()
+            };
 
-              return (
-                <tr key={dimensionEntry.displayValue}>
-                  <RowHeader
-                    entry={dimensionEntry}
-                    qlik={qlik}
-                    rowStyle={rowStyle}
-                    styleBuilder={styleBuilder}
-                    styling={styling}
-                  />
-                  {renderData && injectSeparators(
-                    matrix[dimensionIndex],
-                    styling.useSeparatorColumns,
-                    { atEvery: measurements.length }
-                  ).map((measurementData, index) => {
-                    if (measurementData.isSeparator) {
-                      const separatorStyle = {
-                        color: 'white',
-                        fontFamily: styling.options.fontFamily,
-                        fontSize: `${12 + styling.options.fontSizeAdjustment}px`
-                      };
+            return (
+              <tr key={dimensionEntry.displayValue}>
+                <RowHeader
+                  entry={dimensionEntry}
+                  qlik={qlik}
+                  rowStyle={rowStyle}
+                  styleBuilder={styleBuilder}
+                  styling={styling}
+                />
+                {renderData && injectSeparators(
+                  matrix[dimensionIndex],
+                  styling.useSeparatorColumns,
+                  { atEvery: measurements.length }
+                ).map((measurementData, index) => {
+                  if (measurementData.isSeparator) {
+                    const separatorStyle = {
+                      color: 'white',
+                      fontFamily: styling.options.fontFamily,
+                      fontSize: `${12 + styling.options.fontSizeAdjustment}px`
+                    };
 
-                      return (
-                        <td
-                          className="empty"
-                          key={`${dimensionEntry.displayValue}-${index}-separator`}
-                          style={separatorStyle}
-                        >
-                          *
-                        </td>
-                      );
-                    }
-                    const { dimension1: dimension1Info, dimension2, measurement } = measurementData.parents;
-                    const id = `${dimension1Info.elementNumber}-${dimension2 && dimension2.elementNumber}-${measurement.header}`;
                     return (
-                      <DataCell
-                        data={data}
-                        general={general}
-                        key={`${dimensionEntry.displayValue}-${id}`}
-                        measurement={measurementData}
-                        qlik={qlik}
-                        styleBuilder={styleBuilder}
-                        styling={styling}
-                      />
+                      <td
+                        className="empty"
+                        key={`${dimensionEntry.displayValue}-${index}-separator`}
+                        style={separatorStyle}
+                      >
+                        *
+                      </td>
                     );
-                  })}
-                </tr>
-              );
-            })}
-          </tbody>
-        </table>
-      </div>
-    );
-  }
-}
+                  }
+                  const { dimension1: dimension1Info, dimension2, measurement } = measurementData.parents;
+                  const id = `${dimension1Info.elementNumber}-${dimension2 && dimension2.elementNumber}-${measurement.header}`;
+                  return (
+                    <DataCell
+                      data={data}
+                      general={general}
+                      key={`${dimensionEntry.displayValue}-${id}`}
+                      measurement={measurementData}
+                      qlik={qlik}
+                      styleBuilder={styleBuilder}
+                      styling={styling}
+                    />
+                  );
+                })}
+              </tr>
+            );
+          })}
+        </tbody>
+      </table>
+    </div>
+  );
+};
 
 DataTable.defaultProps = {
   renderData: true
diff --git a/src/headers-table/index.jsx b/src/headers-table/index.jsx
index 3ed75bb..8ca4bb4 100644
--- a/src/headers-table/index.jsx
+++ b/src/headers-table/index.jsx
@@ -5,52 +5,84 @@ import ColumnHeader from './column-header.jsx';
 import MeasurementColumnHeader from './measurement-column-header.jsx';
 import { injectSeparators } from '../utilities';
 
-class HeadersTable extends React.Component {
-  render () {
-    const { data, general, qlik, styling } = this.props;
-    const baseCSS = {
-      backgroundColor: styling.headerOptions.colorSchema,
-      color: styling.headerOptions.textColor,
-      fontFamily: styling.options.fontFamily,
-      textAlign: styling.headerOptions.alignment
-    };
+const HeadersTable = ({ data, general, qlik, styling }) => {
+  const baseCSS = {
+    backgroundColor: styling.headerOptions.colorSchema,
+    color: styling.headerOptions.textColor,
+    fontFamily: styling.options.fontFamily,
+    textAlign: styling.headerOptions.alignment
+  };
 
-    const {
-      dimension1,
-      dimension2,
-      measurements
-    } = data.headers;
+  const {
+    dimension1,
+    dimension2,
+    measurements
+  } = data.headers;
 
-    const hasSecondDimension = dimension2.length > 0;
+  const hasSecondDimension = dimension2.length > 0;
 
-    return (
-      <div className="header-wrapper">
-        <table className="header">
-          <tbody>
-            <tr>
-              <ExportColumnHeader
-                allowExcelExport={general.allowExcelExport}
+  return (
+    <div className="header-wrapper">
+      <table className="header">
+        <tbody>
+          <tr>
+            <ExportColumnHeader
+              allowExcelExport={general.allowExcelExport}
+              baseCSS={baseCSS}
+              general={general}
+              hasSecondDimension={hasSecondDimension}
+              styling={styling}
+              title={dimension1[0].name}
+            />
+            {!hasSecondDimension && measurements.map(measurementEntry => (
+              <MeasurementColumnHeader
                 baseCSS={baseCSS}
+                general={general}
                 hasSecondDimension={hasSecondDimension}
+                key={`${measurementEntry.displayValue}-${measurementEntry.name}`}
+                measurement={measurementEntry}
                 styling={styling}
-                title={dimension1[0].name}
               />
-              {!hasSecondDimension && measurements.map(measurementEntry => (
-                <MeasurementColumnHeader
+            ))}
+            {hasSecondDimension && injectSeparators(dimension2, styling.useSeparatorColumns).map((entry, index) => {
+              if (entry.isSeparator) {
+                const separatorStyle = {
+                  color: 'white',
+                  fontFamily: styling.options.fontFamily,
+                  fontSize: `${13 + styling.headerOptions.fontSizeAdjustment}px`
+                };
+
+                return (
+                  <th
+                    className="empty"
+                    key={index}
+                    style={separatorStyle}
+                  >
+                    *
+                  </th>
+                );
+              }
+              return (
+                <ColumnHeader
                   baseCSS={baseCSS}
-                  general={general}
-                  hasSecondDimension={hasSecondDimension}
-                  key={`${measurementEntry.displayValue}-${measurementEntry.name}`}
-                  measurement={measurementEntry}
+                  cellSuffix={general.cellSuffix}
+                  colSpan={measurements.length}
+                  entry={entry}
+                  key={entry.displayValue}
+                  qlik={qlik}
                   styling={styling}
                 />
-              ))}
-              {hasSecondDimension && injectSeparators(dimension2, styling.useSeparatorColumns).map((entry, index) => {
-                if (entry.isSeparator) {
+              );
+            })}
+          </tr>
+          {hasSecondDimension && (
+            <tr>
+              {injectSeparators(dimension2, styling.useSeparatorColumns).map((dimensionEntry, index) => {
+                if (dimensionEntry.isSeparator) {
                   const separatorStyle = {
                     color: 'white',
                     fontFamily: styling.options.fontFamily,
-                    fontSize: `${13 + styling.headerOptions.fontSizeAdjustment}px`
+                    fontSize: `${12 + styling.headerOptions.fontSizeAdjustment}px`
                   };
 
                   return (
@@ -63,62 +95,25 @@ class HeadersTable extends React.Component {
                     </th>
                   );
                 }
-                return (
-                  <ColumnHeader
+                return measurements.map(measurementEntry => (
+                  <MeasurementColumnHeader
                     baseCSS={baseCSS}
-                    cellSuffix={general.cellSuffix}
-                    colSpan={measurements.length}
-                    entry={entry}
-                    key={entry.displayValue}
-                    qlik={qlik}
+                    dimensionEntry={dimensionEntry}
+                    general={general}
+                    hasSecondDimension={hasSecondDimension}
+                    key={`${measurementEntry.displayValue}-${measurementEntry.name}-${dimensionEntry.name}`}
+                    measurement={measurementEntry}
                     styling={styling}
                   />
-                );
+                ));
               })}
             </tr>
-            {hasSecondDimension && (
-              <tr>
-                {injectSeparators(dimension2, styling.useSeparatorColumns).map((dimensionEntry, index) => {
-                  if (dimensionEntry.isSeparator) {
-                    const separatorStyle = {
-                      color: 'white',
-                      fontFamily: styling.options.fontFamily,
-                      fontSize: `${12 + styling.headerOptions.fontSizeAdjustment}px`
-                    };
-
-                    return (
-                      <th
-                        className="empty"
-                        key={index}
-                        style={separatorStyle}
-                      >
-                        *
-                      </th>
-                    );
-                  }
-                  return measurements.map(measurementEntry => (
-                    <MeasurementColumnHeader
-                      baseCSS={baseCSS}
-                      dimensionEntry={dimensionEntry}
-                      general={general}
-                      hasSecondDimension={hasSecondDimension}
-                      key={`${measurementEntry.displayValue}-${measurementEntry.name}-${dimensionEntry.name}`}
-                      measurement={measurementEntry}
-                      styling={styling}
-                    />
-                  ));
-                })}
-              </tr>
-            )}
-          </tbody>
-        </table>
-      </div>
-    );
-  }
-}
-
-// const HeadersTable = ({ data, general, qlik, styling }) => {
-// };
+          )}
+        </tbody>
+      </table>
+    </div>
+  );
+};
 
 HeadersTable.propTypes = {
   data: PropTypes.shape({