@stokr/components-library 2.3.58-beta.6 → 2.3.58-beta.8

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

@@ -1,6 +1,5 @@
 "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
 });
@@ -11,108 +10,103 @@ var _reactTable = require("react-table");
 var _Table = require("./Table.styles");
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _PaginationControls = _interopRequireDefault(require("../../Pagination/PaginationControls"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-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); }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 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 _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
-function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
-function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
-function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
-function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
-function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 function ReactTable(props) {
-  var columns = props.columns,
-    data = props.data,
-    subColumns = props.subColumns,
-    blue = props.blue,
-    noPagination = props.noPagination,
-    withSubTable = props.withSubTable,
-    isSubTable = props.isSubTable,
-    customTdStyles = props.customTdStyles,
-    customThStyles = props.customThStyles,
-    customRowHoverStyles = props.customRowHoverStyles,
-    customRowHoverContent = props.customRowHoverContent,
-    calculateSubData = props.calculateSubData;
+  const {
+    columns,
+    data,
+    subColumns,
+    blue,
+    noPagination,
+    withSubTable,
+    isSubTable,
+    customTdStyles,
+    customThStyles,
+    customRowHoverStyles,
+    customRowHoverContent,
+    customRowStyles,
+    customTableStyles,
+    //instead of passing the subData, we pass a function that will calculate the subData
+    //subData must be part of the data array (an array or whatever)
+    //calculateSubData is a function that receives the row and returns the subData
+    //it is used only when the row is expanded
+    calculateSubData
+  } = props;
 
   // State to track which row is being hovered
-  var _useState = (0, _react.useState)(null),
-    _useState2 = _slicedToArray(_useState, 2),
-    hoveredRowIndex = _useState2[0],
-    setHoveredRowIndex = _useState2[1];
+  const [hoveredRowIndex, setHoveredRowIndex] = (0, _react.useState)(null);
 
   // Use the state and functions returned from useTable to build UI
-  var _useTable = (0, _reactTable.useTable)({
-      columns: columns,
-      data: data,
-      initialState: {
-        pageIndex: 0,
-        pageSize: isSubTable ? 10000 : 10
-      }
-    }, _reactTable.useExpanded, _reactTable.usePagination),
-    getTableProps = _useTable.getTableProps,
-    getTableBodyProps = _useTable.getTableBodyProps,
-    headerGroups = _useTable.headerGroups,
-    prepareRow = _useTable.prepareRow,
-    visibleColumns = _useTable.visibleColumns,
-    page = _useTable.page,
-    gotoPage = _useTable.gotoPage,
-    setPageSize = _useTable.setPageSize,
-    _useTable$state = _useTable.state,
-    pageIndex = _useTable$state.pageIndex,
-    pageSize = _useTable$state.pageSize;
-  var _useState3 = (0, _react.useState)(isSubTable ? 10000 : 10),
-    _useState4 = _slicedToArray(_useState3, 2),
-    inputPageSize = _useState4[0],
-    setInputPageSize = _useState4[1];
-  _react.default.useEffect(function () {
+  const {
+    getTableProps,
+    getTableBodyProps,
+    headerGroups,
+    prepareRow,
+    visibleColumns,
+    page,
+    // page contains only the rows for the active page
+    gotoPage,
+    setPageSize,
+    state: {
+      pageIndex,
+      pageSize
+    }
+  } = (0, _reactTable.useTable)({
+    columns,
+    data,
+    initialState: {
+      pageIndex: 0,
+      pageSize: isSubTable ? 10000 : 10
+    }
+  }, _reactTable.useExpanded, _reactTable.usePagination);
+  const [inputPageSize, setInputPageSize] = (0, _react.useState)(isSubTable ? 10000 : 10);
+  _react.default.useEffect(() => {
     setInputPageSize(pageSize);
   }, [pageSize]);
 
   // Function to render cell content with hover support
-  var renderCellContent = function renderCellContent(cell, rowIndex, rowData) {
+  const renderCellContent = (cell, rowIndex, rowData) => {
     if (customRowHoverContent && hoveredRowIndex === rowIndex) {
-      var hoverContent = customRowHoverContent(cell.column.id, rowIndex, rowData);
+      const hoverContent = customRowHoverContent(cell.column.id, rowIndex, rowData);
       if (hoverContent !== undefined) {
         return hoverContent;
       }
     }
     return cell.render('Cell');
   };
-  return /*#__PURE__*/_react.default.createElement(_Table.Styles, null, /*#__PURE__*/_react.default.createElement(_Table.TableWrap, null, /*#__PURE__*/_react.default.createElement(_Table.StyledReactTable, getTableProps(), /*#__PURE__*/_react.default.createElement("thead", null, headerGroups.map(function (headerGroup) {
-    return /*#__PURE__*/_react.default.createElement(_Table.StyledReactTable.Tr, headerGroup.getHeaderGroupProps(), headerGroup.headers.map(function (column) {
-      var cellStyles = customThStyles ? customThStyles(column) : {};
-      return /*#__PURE__*/_react.default.createElement(_Table.StyledReactTable.Th, _extends({}, column.getHeaderProps({
-        className: column.collapse ? 'collapse' : '',
-        style: _objectSpread({}, cellStyles)
-      }), {
-        blue: blue,
-        width: column.width,
-        minWidth: column.minWidth,
-        maxWidth: column.maxWidth
-      }), column.render('Header'));
-    }));
-  })), /*#__PURE__*/_react.default.createElement("tbody", getTableBodyProps(), page.map(function (row, i) {
+  return /*#__PURE__*/_react.default.createElement(_Table.Styles, null, /*#__PURE__*/_react.default.createElement(_Table.TableWrap, null, /*#__PURE__*/_react.default.createElement(_Table.StyledReactTable, _extends({}, getTableProps(), {
+    customTableStyles: customTableStyles
+  }), /*#__PURE__*/_react.default.createElement("thead", null, headerGroups.map(headerGroup => /*#__PURE__*/_react.default.createElement(_Table.StyledReactTable.Tr, headerGroup.getHeaderGroupProps(), headerGroup.headers.map(column => {
+    const cellStyles = customThStyles ? customThStyles(column) : {};
+    return /*#__PURE__*/_react.default.createElement(_Table.StyledReactTable.Th, _extends({}, column.getHeaderProps({
+      className: column.collapse ? 'collapse' : '',
+      style: _objectSpread({}, cellStyles)
+    }), {
+      blue: blue,
+      width: column.width,
+      minWidth: column.minWidth,
+      maxWidth: column.maxWidth
+    }), column.render('Header'));
+  })))), /*#__PURE__*/_react.default.createElement("tbody", getTableBodyProps(), page.map((row, i) => {
     prepareRow(row);
     return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, {
       key: row.id
     }, /*#__PURE__*/_react.default.createElement(_Table.StyledReactTable.Tr, _extends({}, row.getRowProps(), {
       customRowHoverStyles: customRowHoverStyles,
+      customRowStyles: customRowStyles,
       rowIndex: i,
       rowData: row.original,
-      onMouseEnter: function onMouseEnter() {
-        return setHoveredRowIndex(i);
-      },
-      onMouseLeave: function onMouseLeave() {
-        return setHoveredRowIndex(null);
-      }
-    }), row.cells.map(function (cell) {
-      var cellStyles = customTdStyles ? customTdStyles(i, row.original) : {};
+      onMouseEnter: () => setHoveredRowIndex(i),
+      onMouseLeave: () => setHoveredRowIndex(null)
+    }), row.cells.map(cell => {
+      const cellStyles = customTdStyles ? customTdStyles(i, row.original, cell.column) : {};
       return /*#__PURE__*/_react.default.createElement(_Table.StyledReactTable.Td, _extends({}, cell.row.getToggleRowExpandedProps(), {
         title: ""
       }, cell.getCellProps({
@@ -139,9 +133,7 @@ function ReactTable(props) {
     currentPage: pageIndex + 1,
     totalCount: data.length,
     pageSize: pageSize,
-    onPageChange: function onPageChange(page) {
-      return gotoPage(page - 1);
-    },
+    onPageChange: page => gotoPage(page - 1),
     inputPageSize: inputPageSize,
     setInputPageSize: setInputPageSize,
     setPageSize: setPageSize
@@ -157,7 +149,9 @@ ReactTable.propTypes = {
   withSubTable: _propTypes.default.bool,
   isSubTable: _propTypes.default.bool,
   customRowHoverStyles: _propTypes.default.func,
-  customRowHoverContent: _propTypes.default.func
+  customRowHoverContent: _propTypes.default.func,
+  customRowStyles: _propTypes.default.func,
+  customTableStyles: _propTypes.default.func
 };
 ReactTable.defaultProps = {
   blue: false,
@@ -165,5 +159,4 @@ ReactTable.defaultProps = {
   withSubTable: false,
   isSubTable: false
 };
-var _default = ReactTable;
-exports.default = _default;
+var _default = exports.default = ReactTable;

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

@@ -3,19 +3,18 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.WrapperWithSubTable = exports.WithoutPagination = exports.WithSubTable = exports.WithStatusBasedHover = exports.WithRowSpecificHover = exports.WithRowHover = exports.WithHoverStylesAndContent = exports.WithHoverContent = exports.WithFixedColumnWidths = exports.WithCustomStyling = exports.DefaultWrapper = exports.Default = exports.BlueWrapper = exports.BlueTable = void 0;
+exports.default = exports.WrapperWithSubTable = exports.WithoutPagination = exports.WithSubTable = exports.WithStatusBasedHover = exports.WithRowSpecificHover = exports.WithRowHover = exports.WithHoverStylesAndContent = exports.WithHoverContent = exports.WithFixedColumnWidths = exports.WithCustomStyling = exports.DefaultWrapper = exports.Default = exports.CustomStyledTable = exports.BoxStyleTable = exports.BlueWrapper = exports.BlueTable = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _ReactTable = require("./ReactTable");
 var _ReactTableWrapper = require("./ReactTableWrapper");
 var _global = _interopRequireDefault(require("../../../styles/global"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-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); }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 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); }
-var _default = {
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+var _default = exports.default = {
   title: 'Components Library/React table',
   component: _ReactTable.ReactTable,
   parameters: {
@@ -55,8 +54,7 @@ var _default = {
     }
   }
 }; // Sample columns and data for demonstration
-exports.default = _default;
-var columns = [{
+const columns = [{
   Header: 'ID',
   accessor: 'id',
   width: '10%',
@@ -77,7 +75,7 @@ var columns = [{
   width: '40%',
   minWidth: '120px'
 }];
-var columnsWrapper = [{
+const columnsWrapper = [{
   label: 'ID',
   key: 'id',
   width: '10%',
@@ -98,21 +96,21 @@ var columnsWrapper = [{
   width: '40%',
   minWidth: '120px'
 }];
-var subColumns = [{
+const subColumns = [{
   Header: 'Detail ID',
   accessor: 'detailId'
 }, {
   Header: 'Detail Name',
   accessor: 'detailName'
 }];
-var subColumnsWrapper = [{
+const subColumnsWrapper = [{
   label: 'Detail ID',
   key: 'detailId'
 }, {
   label: 'Detail Name',
   key: 'detailName'
 }];
-var data = [{
+const data = [{
   id: 1,
   name: 'Alice',
   status: 'Active',
@@ -147,7 +145,7 @@ var data = [{
 }];
 
 // Custom styling functions
-var customTdStyles = function customTdStyles(index, row) {
+const customTdStyles = (index, row, column) => {
   if (index === 0) {
     return {
       backgroundColor: 'lightblue',
@@ -167,20 +165,19 @@ var customTdStyles = function customTdStyles(index, row) {
   }
   return {}; // default style
 };
-
-var customThStyles = function customThStyles(column) {
+const customThStyles = column => {
   return {
     backgroundColor: 'lightblue'
   };
 };
 
 // Custom row hover styles function
-var customRowHoverStyles = function customRowHoverStyles(rowIndex, rowData) {
+const customRowHoverStyles = (rowIndex, rowData) => {
   return "\n    background-color: #f0f8ff !important;\n    transform: scale(1.01);\n    transition: all 0.2s ease-in-out;\n    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);\n    \n    td {\n      background-color: #f0f8ff !important;\n      border-bottom-color: #0050ca !important;\n    }\n  ";
 };
 
 // Custom row hover content function
-var customRowHoverContent = function customRowHoverContent(columnId, rowIndex, rowData) {
+const customRowHoverContent = (columnId, rowIndex, rowData) => {
   switch (columnId) {
     case 'name':
       // Show underlined link on hover
@@ -209,9 +206,7 @@ var customRowHoverContent = function customRowHoverContent(columnId, rowIndex, r
           borderRadius: '4px',
           cursor: 'pointer'
         },
-        onClick: function onClick() {
-          return alert("Edit ".concat(rowData.name));
-        }
+        onClick: () => alert("Edit ".concat(rowData.name))
       }, "Edit"), /*#__PURE__*/_react.default.createElement("button", {
         style: {
           padding: '4px 8px',
@@ -222,13 +217,11 @@ var customRowHoverContent = function customRowHoverContent(columnId, rowIndex, r
           borderRadius: '4px',
           cursor: 'pointer'
         },
-        onClick: function onClick() {
-          return alert("Delete ".concat(rowData.name));
-        }
+        onClick: () => alert("Delete ".concat(rowData.name))
       }, "Delete"));
     case 'status':
       // Show status with icon on hover
-      var statusColors = {
+      const statusColors = {
         Active: '#28a745',
         Inactive: '#dc3545',
         Pending: '#ffc107'
@@ -254,7 +247,7 @@ var customRowHoverContent = function customRowHoverContent(columnId, rowIndex, r
 };
 
 // Status-based hover styles
-var statusBasedHoverStyles = function statusBasedHoverStyles(rowIndex, rowData) {
+const statusBasedHoverStyles = (rowIndex, rowData) => {
   switch (rowData.status) {
     case 'Active':
       return "\n        background-color: #e8f5e8 !important;\n        td {\n          background-color: #e8f5e8 !important;\n          border-bottom-color: #28a745 !important;\n        }\n      ";
@@ -268,7 +261,7 @@ var statusBasedHoverStyles = function statusBasedHoverStyles(rowIndex, rowData)
 };
 
 // Row-specific hover styles (example: different styles for first and last rows)
-var rowSpecificHoverStyles = function rowSpecificHoverStyles(rowIndex, rowData) {
+const rowSpecificHoverStyles = (rowIndex, rowData) => {
   // Special styling for first row
   if (rowIndex === 0) {
     return "\n      background-color: #e3f2fd !important;\n      transform: scale(1.02);\n      box-shadow: 0 4px 12px rgba(33, 150, 243, 0.3);\n      td {\n        background-color: #e3f2fd !important;\n        border-bottom-color: #2196f3 !important;\n        font-weight: bold;\n      }\n    ";
@@ -284,88 +277,71 @@ var rowSpecificHoverStyles = function rowSpecificHoverStyles(rowIndex, rowData)
 };
 
 // Function to calculate sub data
-var calculateSubData = function calculateSubData(row) {
+const calculateSubData = row => {
   return row.original.subData || [];
 };
-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 TemplateWrapper = function TemplateWrapper(args) {
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_global.default, null), /*#__PURE__*/_react.default.createElement(_ReactTableWrapper.ReactTableWrapper, args));
-};
-var Default = Template.bind({});
-exports.Default = Default;
+const Template = args => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_global.default, null), /*#__PURE__*/_react.default.createElement(_ReactTable.ReactTable, args));
+const TemplateWrapper = args => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_global.default, null), /*#__PURE__*/_react.default.createElement(_ReactTableWrapper.ReactTableWrapper, args));
+const Default = exports.Default = Template.bind({});
 Default.args = {
   columns: columns,
   data: data,
   noPagination: false
 };
-var WithoutPagination = Template.bind({});
-exports.WithoutPagination = WithoutPagination;
+const WithoutPagination = exports.WithoutPagination = Template.bind({});
 WithoutPagination.args = _objectSpread(_objectSpread({}, Default.args), {}, {
   noPagination: true
 });
-var WithCustomStyling = Template.bind({});
-exports.WithCustomStyling = WithCustomStyling;
+const WithCustomStyling = exports.WithCustomStyling = Template.bind({});
 WithCustomStyling.args = _objectSpread(_objectSpread({}, Default.args), {}, {
   customTdStyles: customTdStyles,
   customThStyles: customThStyles
 });
-var WithRowHover = Template.bind({});
-exports.WithRowHover = WithRowHover;
+const WithRowHover = exports.WithRowHover = Template.bind({});
 WithRowHover.args = _objectSpread(_objectSpread({}, Default.args), {}, {
   customRowHoverStyles: customRowHoverStyles
 });
-var WithHoverContent = Template.bind({});
-exports.WithHoverContent = WithHoverContent;
+const WithHoverContent = exports.WithHoverContent = Template.bind({});
 WithHoverContent.args = _objectSpread(_objectSpread({}, Default.args), {}, {
   customRowHoverContent: customRowHoverContent
 });
-var WithHoverStylesAndContent = Template.bind({});
-exports.WithHoverStylesAndContent = WithHoverStylesAndContent;
+const WithHoverStylesAndContent = exports.WithHoverStylesAndContent = Template.bind({});
 WithHoverStylesAndContent.args = _objectSpread(_objectSpread({}, Default.args), {}, {
   customRowHoverStyles: customRowHoverStyles,
   customRowHoverContent: customRowHoverContent
 });
-var WithStatusBasedHover = Template.bind({});
-exports.WithStatusBasedHover = WithStatusBasedHover;
+const WithStatusBasedHover = exports.WithStatusBasedHover = Template.bind({});
 WithStatusBasedHover.args = _objectSpread(_objectSpread({}, Default.args), {}, {
   customRowHoverStyles: statusBasedHoverStyles
 });
-var WithRowSpecificHover = Template.bind({});
-exports.WithRowSpecificHover = WithRowSpecificHover;
+const WithRowSpecificHover = exports.WithRowSpecificHover = Template.bind({});
 WithRowSpecificHover.args = _objectSpread(_objectSpread({}, Default.args), {}, {
   customRowHoverStyles: rowSpecificHoverStyles
 });
-var WithFixedColumnWidths = Template.bind({});
-exports.WithFixedColumnWidths = WithFixedColumnWidths;
+const WithFixedColumnWidths = exports.WithFixedColumnWidths = Template.bind({});
 WithFixedColumnWidths.args = _objectSpread(_objectSpread({}, Default.args), {}, {
   customRowHoverContent: customRowHoverContent,
   customRowHoverStyles: customRowHoverStyles
 });
-var WithSubTable = Template.bind({});
-exports.WithSubTable = WithSubTable;
+const WithSubTable = exports.WithSubTable = Template.bind({});
 WithSubTable.args = _objectSpread(_objectSpread({}, Default.args), {}, {
   withSubTable: true,
   subColumns: subColumns,
   calculateSubData: calculateSubData
 });
-var BlueTable = Template.bind({});
-exports.BlueTable = BlueTable;
+const BlueTable = exports.BlueTable = Template.bind({});
 BlueTable.args = _objectSpread(_objectSpread({}, Default.args), {}, {
   blue: true
 });
 
 // Wrapper examples
-var DefaultWrapper = TemplateWrapper.bind({});
-exports.DefaultWrapper = DefaultWrapper;
+const DefaultWrapper = exports.DefaultWrapper = TemplateWrapper.bind({});
 DefaultWrapper.args = {
   columns: columnsWrapper,
   data: data,
   noPagination: false
 };
-var WrapperWithSubTable = TemplateWrapper.bind({});
-exports.WrapperWithSubTable = WrapperWithSubTable;
+const WrapperWithSubTable = exports.WrapperWithSubTable = TemplateWrapper.bind({});
 WrapperWithSubTable.args = {
   columns: columnsWrapper,
   data: data,
@@ -373,10 +349,58 @@ WrapperWithSubTable.args = {
   subColumns: subColumnsWrapper,
   calculateSubData: calculateSubData
 };
-var BlueWrapper = TemplateWrapper.bind({});
-exports.BlueWrapper = BlueWrapper;
+const BlueWrapper = exports.BlueWrapper = TemplateWrapper.bind({});
 BlueWrapper.args = {
   columns: columnsWrapper,
   data: data,
   blue: true
-};
+};
+
+// Box-style table example
+const BoxStyleTable = exports.BoxStyleTable = Template.bind({});
+BoxStyleTable.args = _objectSpread(_objectSpread({}, Default.args), {}, {
+  customRowStyles: (rowIndex, rowData) => {
+    // return {
+    //   border: '1px solid #e1e1e1',
+    //   borderRadius: '8px',
+    //   marginBottom: '12px',
+    //   borderRight: '1px solid red !important',
+
+    //   backgroundColor: '#ffffff',
+    // }
+    return "\n      border: 1px solid #e1e1e1;\n      border-radius: 8px;\n      margin-bottom: 12px;\n      background-color: #ffffff;\n\n      td{\n        border:inherit;\n        border-right:none;\n        border-left:none;\n        \n        &:first-child {\n          border-left:inherit;\n          border-top-left-radius:4px;\n          border-bottom-left-radius:4px;\n        }\n        &:last-child {\n            border-right:inherit;\n            border-top-right-radius:4px;\n            border-bottom-right-radius:4px;\n        }\n        }\n    ";
+  },
+  customRowHoverStyles: (rowIndex, rowData) => ({
+    backgroundColor: '#e1e1e1'
+  }),
+  customTableStyles: () => ({
+    borderSpacing: '0 20px'
+  })
+});
+
+// Table with custom styling
+const CustomStyledTable = exports.CustomStyledTable = Template.bind({});
+CustomStyledTable.args = _objectSpread(_objectSpread({}, Default.args), {}, {
+  customTableStyles: () => ({
+    border: '2px solid #4caf50',
+    borderRadius: '12px',
+    overflow: 'hidden',
+    boxShadow: '0 8px 16px rgba(76, 175, 80, 0.2)',
+    backgroundColor: '#f8fff8'
+  }),
+  customRowStyles: (rowIndex, rowData) => ({
+    backgroundColor: rowIndex % 2 === 0 ? '#ffffff' : '#f0f8f0',
+    borderBottom: '1px solid #e8f5e8'
+  }),
+  customRowHoverStyles: (rowIndex, rowData) => ({
+    backgroundColor: '#e8f5e8',
+    transform: 'scale(1.01)'
+  }),
+  customThStyles: column => ({
+    backgroundColor: '#4caf50',
+    color: '#ffffff',
+    fontWeight: 'bold',
+    textTransform: 'uppercase',
+    letterSpacing: '0.5px'
+  })
+});

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

@@ -8,30 +8,29 @@ var _react = _interopRequireDefault(require("react"));
 var _ReactTable = _interopRequireDefault(require("./ReactTable"));
 var _Table = require("./Table.styles");
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _excluded = ["columns", "subColumns"];
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-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); }
-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); }
-function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
-function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+const _excluded = ["columns", "subColumns"];
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
 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 _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 //This components is used only to memoize the values before we sent them to the react-table
-var ReactTableWrapper = function ReactTableWrapper(props) {
-  var makeNewColumns = function makeNewColumns(data) {
+const ReactTableWrapper = props => {
+  const makeNewColumns = data => {
     if (!data || !Array.isArray(data)) return [];
-    return data.map(function (column) {
+    return data.map(column => {
       if (column.key === 'dropdown' || column.accessor === 'dropdown') {
         return {
-          Header: function Header() {
-            return null;
-          },
+          Header: () => null,
           id: column.key || column.accessor,
-          Cell: function Cell(_ref) {
-            var row = _ref.row;
+          Cell: _ref => {
+            let {
+              row
+            } = _ref;
             return (
               /*#__PURE__*/
               // Use Cell to render an expander for dropdown cell.
@@ -50,19 +49,15 @@ var ReactTableWrapper = function ReactTableWrapper(props) {
       }, column);
     });
   };
-  var memoizedColumns = _react.default.useMemo(function () {
-    return makeNewColumns(props.columns);
-  }, [props.columns]);
-  var memoizedData = _react.default.useMemo(function () {
-    return props.data;
-  }, [props.data]);
-  var memoizedSubColumns = _react.default.useMemo(function () {
-    return props.subColumns ? makeNewColumns(props.subColumns) : undefined;
-  }, [props.subColumns]);
+  const memoizedColumns = _react.default.useMemo(() => makeNewColumns(props.columns), [props.columns]);
+  const memoizedData = _react.default.useMemo(() => props.data, [props.data]);
+  const memoizedSubColumns = _react.default.useMemo(() => props.subColumns ? makeNewColumns(props.subColumns) : undefined, [props.subColumns]);
 
   // Create a new props object without the original columns and subColumns
-  var columns = props.columns,
-    subColumns = props.subColumns,
+  const {
+      columns,
+      subColumns
+    } = props,
     restProps = _objectWithoutProperties(props, _excluded);
   return /*#__PURE__*/_react.default.createElement(_ReactTable.default, _extends({
     columns: memoizedColumns,
@@ -90,5 +85,4 @@ ReactTableWrapper.defaultProps = {
   noPagination: false,
   withSubTable: false
 };
-var _default = ReactTableWrapper;
-exports.default = _default;
+var _default = exports.default = ReactTableWrapper;