@stokr/components-library 2.1.5 → 2.1.6

package/dist/components/AdminDashboard/Table/ReactTable.js

@@ -1,5 +1,6 @@
 "use strict";
 
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -15,6 +16,11 @@ var _Card = require("../../Card/Card.styles");
 var _InputWithButton = _interopRequireDefault(require("../../Input/InputWithButton"));
 var _Button = _interopRequireDefault(require("../../Button/Button.styles"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 //This components is used only to memoize the values before we sent them to the react-table
 var ReactTableWrapper = function ReactTableWrapper(props) {
@@ -76,6 +82,7 @@ function ReactTable(props) {
     noPagination = props.noPagination,
     withSubTable = props.withSubTable,
     isSubTable = props.isSubTable,
+    customTdStyles = props.customTdStyles,
     calculateSubData = props.calculateSubData;
 
   // Use the state and functions returned from useTable to build UI
@@ -109,8 +116,10 @@ function ReactTable(props) {
   })), /*#__PURE__*/_react.default.createElement("tbody", getTableBodyProps(), page.map(function (row, i) {
     prepareRow(row);
     return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Table.StyledReactTable.Tr, row.getRowProps(), row.cells.map(function (cell) {
+      var cellStyles = customTdStyles ? customTdStyles(i, row.original) : {};
       return /*#__PURE__*/_react.default.createElement(_Table.StyledReactTable.Td, _extends({}, cell.row.getToggleRowExpandedProps(), cell.getCellProps({
-        className: cell.column.collapse ? 'collapse' : ''
+        className: cell.column.collapse ? 'collapse' : '',
+        style: _objectSpread({}, cellStyles)
       }), {
         blue: blue
       }), cell.render('Cell'));

package/dist/components/AdminDashboard/Table/ReactTable.stories.js

@@ -0,0 +1,74 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.WithCustomStyling = exports.Default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _ReactTable = require("./ReactTable");
+var _global = _interopRequireDefault(require("../../../styles/global"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var _default = {
+  title: 'Components Library/React table',
+  component: _ReactTable.ReactTable
+}; // Sample columns and data for demonstration
+exports.default = _default;
+var columns = [{
+  Header: 'ID',
+  accessor: 'id' // accessor is the "key" in the data
+}, {
+  Header: 'Name',
+  accessor: 'name'
+}, {
+  Header: 'Status',
+  accessor: 'status'
+}];
+var data = [{
+  id: 1,
+  name: 'Alice',
+  status: 'Active'
+}, {
+  id: 2,
+  name: 'Bob',
+  status: 'Inactive'
+}, {
+  id: 3,
+  name: 'Carol',
+  status: 'Active'
+}];
+
+// Custom styling function
+var customTdStyles = function customTdStyles(index, row) {
+  if (index === 0) {
+    return {
+      backgroundColor: 'lightblue',
+      fontWeight: 'bold',
+      paddingBottom: 0
+    };
+  }
+  if (row.status === 'Inactive') {
+    return {
+      backgroundColor: 'lightgray'
+    };
+  }
+  return {}; // default style
+};
+
+var Template = function Template(args) {
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_global.default, null), /*#__PURE__*/_react.default.createElement(_ReactTable.ReactTable, args));
+};
+var Default = function Default() {
+  return /*#__PURE__*/_react.default.createElement(Template, {
+    columns: columns,
+    data: data
+  });
+};
+exports.Default = Default;
+var WithCustomStyling = function WithCustomStyling() {
+  return /*#__PURE__*/_react.default.createElement(Template, {
+    columns: columns,
+    data: data,
+    customTdStyles: customTdStyles
+  });
+};
+exports.WithCustomStyling = WithCustomStyling;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stokr/components-library",
-  "version": "2.1.5",
+  "version": "2.1.6",
   "description": "STOKR - Components Library",
   "main": "dist/index.js",
   "module": "dist/index.js",