@quintype/components 3.5.1 → 3.5.2-csv-table.0

package/dist/cjs/index.js

@@ -3120,20 +3120,21 @@ function _isNativeReflectConstruct$8() { if (typeof Reflect === "undefined" || !
 
 function TableHeader(columns) {
   return /*#__PURE__*/React__default["default"].createElement("thead", null, /*#__PURE__*/React__default["default"].createElement("tr", null, columns.map(function (col) {
-    return /*#__PURE__*/React__default["default"].createElement("th", null, col.Header);
+    return /*#__PURE__*/React__default["default"].createElement("th", null, col);
   })));
 }
 
 function TableView(_ref) {
   var data = _ref.data,
-      columns = _ref.columns,
+      _ref$columns = _ref.columns,
+      columns = _ref$columns === void 0 ? [] : _ref$columns,
       className = _ref.className,
       hasHeader = _ref.hasHeader;
   return /*#__PURE__*/React__default["default"].createElement("table", {
     className: className
   }, hasHeader && TableHeader(columns), /*#__PURE__*/React__default["default"].createElement("tbody", null, data.map(function (row) {
-    return /*#__PURE__*/React__default["default"].createElement("tr", null, columns.map(function (col) {
-      return /*#__PURE__*/React__default["default"].createElement("td", null, row[col.Header]);
+    return /*#__PURE__*/React__default["default"].createElement("tr", null, row.map(function (item) {
+      return /*#__PURE__*/React__default["default"].createElement("td", null, item);
     }));
   })));
 }
@@ -3164,12 +3165,13 @@ var Table = /*#__PURE__*/function (_React$Component) {
       'papaparse')); }).then(function (_ref2) {
         var parse = _ref2.parse;
         parse(content, {
-          header: _this2.props.hasHeader,
+          header: false,
           complete: function complete(results) {
             return _this2._isMounted && _this2.setState({
               tableData: results.data
             });
-          }
+          } // with header true, the order of columns in table is not guaranteed by papaparse library, so we will parse including the header as table data and handle it after.
+
         });
       });
     }
@@ -3194,25 +3196,19 @@ var Table = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "render",
     value: function render() {
-      var _this3 = this;
-
       if (!this.state.tableData.length > 0) {
         return null;
       }
 
-      var columns = Object.keys(this.state.tableData[0]).map(function (header) {
-        return {
-          Header: header,
-          accessor: header,
-          headerStyle: !_this3.props.hasHeader ? {
-            display: "none"
-          } : {}
-        };
-      });
+      var _ref3 = this.props.hasHeader ? [this.state.tableData[0], this.state.tableData.slice(1)] : [[], this.state.tableData],
+          _ref4 = _slicedToArray__default["default"](_ref3, 2),
+          columns = _ref4[0],
+          tableData = _ref4[1];
+
       var className = "story-element-table-".concat(this.props.id);
       return /*#__PURE__*/React__default["default"].createElement(this.props.tableComponent || TableView, {
         hasHeader: this.props.hasHeader,
-        data: this.state.tableData,
+        data: tableData,
         columns: columns,
         showPageSizeOptions: false,
         showPageJump: false,

package/dist/es/components/story-elements/table.js

@@ -1,3 +1,4 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
 import _createClass from "@babel/runtime/helpers/createClass";
 import _inherits from "@babel/runtime/helpers/inherits";
@@ -12,20 +13,21 @@ import React from "react";
 
 function TableHeader(columns) {
   return /*#__PURE__*/React.createElement("thead", null, /*#__PURE__*/React.createElement("tr", null, columns.map(function (col) {
-    return /*#__PURE__*/React.createElement("th", null, col.Header);
+    return /*#__PURE__*/React.createElement("th", null, col);
   })));
 }
 
 export function TableView(_ref) {
   var data = _ref.data,
-      columns = _ref.columns,
+      _ref$columns = _ref.columns,
+      columns = _ref$columns === void 0 ? [] : _ref$columns,
       className = _ref.className,
       hasHeader = _ref.hasHeader;
   return /*#__PURE__*/React.createElement("table", {
     className: className
   }, hasHeader && TableHeader(columns), /*#__PURE__*/React.createElement("tbody", null, data.map(function (row) {
-    return /*#__PURE__*/React.createElement("tr", null, columns.map(function (col) {
-      return /*#__PURE__*/React.createElement("td", null, row[col.Header]);
+    return /*#__PURE__*/React.createElement("tr", null, row.map(function (item) {
+      return /*#__PURE__*/React.createElement("td", null, item);
     }));
   })));
 }
@@ -56,12 +58,13 @@ export var Table = /*#__PURE__*/function (_React$Component) {
       "papaparse").then(function (_ref2) {
         var parse = _ref2.parse;
         parse(content, {
-          header: _this2.props.hasHeader,
+          header: false,
           complete: function complete(results) {
             return _this2._isMounted && _this2.setState({
               tableData: results.data
             });
-          }
+          } // with header true, the order of columns in table is not guaranteed by papaparse library, so we will parse including the header as table data and handle it after.
+
         });
       });
     }
@@ -86,25 +89,19 @@ export var Table = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "render",
     value: function render() {
-      var _this3 = this;
-
       if (!this.state.tableData.length > 0) {
         return null;
       }
 
-      var columns = Object.keys(this.state.tableData[0]).map(function (header) {
-        return {
-          Header: header,
-          accessor: header,
-          headerStyle: !_this3.props.hasHeader ? {
-            display: "none"
-          } : {}
-        };
-      });
+      var _ref3 = this.props.hasHeader ? [this.state.tableData[0], this.state.tableData.slice(1)] : [[], this.state.tableData],
+          _ref4 = _slicedToArray(_ref3, 2),
+          columns = _ref4[0],
+          tableData = _ref4[1];
+
       var className = "story-element-table-".concat(this.props.id);
       return /*#__PURE__*/React.createElement(this.props.tableComponent || TableView, {
         hasHeader: this.props.hasHeader,
-        data: this.state.tableData,
+        data: tableData,
         columns: columns,
         showPageSizeOptions: false,
         showPageJump: false,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@quintype/components",
-  "version": "3.5.1",
+  "version": "3.5.2-csv-table.0",
   "description": "Components to help build Quintype Node.js apps",
   "main": "dist/cjs/index.js",
   "module": "dist/es/index.js",