@unbxd-ui/unbxd-react-components 0.3.3 → 0.3.4-beta.2

package/components/PulseVersionToggler/PulseVersionToggler.stories.js

@@ -0,0 +1,295 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.WithCustomTooltipComponents = exports.StartingWithV2 = exports.StartingWithV1 = exports.Default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _PulseVersionToggler = _interopRequireDefault(require("./PulseVersionToggler"));
+require("./pulse-version-toggler.css");
+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); }
+var meta = {
+  title: 'Components/PulseVersionToggler',
+  component: _PulseVersionToggler["default"],
+  parameters: {
+    layout: 'fullscreen',
+    docs: {
+      description: {
+        component: 'A floating button component for toggling between different versions (v1/v2) with API integration, cookie management, and loading states.'
+      }
+    }
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    className: {
+      control: 'text',
+      description: 'Additional CSS class names'
+    },
+    endpoint: {
+      control: 'text',
+      description: 'API endpoint for version toggle'
+    },
+    cookieName: {
+      control: 'text',
+      description: 'Name of the cookie to track version'
+    },
+    queryParamKey: {
+      control: 'text',
+      description: 'Key name for the version parameter in API request'
+    },
+    tooltipMessageOn: {
+      control: 'text',
+      description: 'Tooltip message when v2 is active (can be string or function)'
+    },
+    tooltipMessageOff: {
+      control: 'text',
+      description: 'Tooltip message when v1 is active (can be string or function)'
+    },
+    successMessage: {
+      control: 'text',
+      description: 'Success message after version switch (can be string or function)'
+    },
+    errorMessage: {
+      control: 'text',
+      description: 'Error message when version switch fails (can be string or function)'
+    },
+    reloadDelay: {
+      control: 'number',
+      description: 'Delay in milliseconds before page reload after successful switch'
+    },
+    shouldFallbackToV2: {
+      control: 'boolean',
+      description: 'Initial state when no cookie exists - true for v2, false for v1'
+    }
+  }
+};
+var _default = exports["default"] = meta; // Default Story
+var Default = exports.Default = {
+  args: {
+    endpoint: '/api/v1/pulse/version',
+    cookieName: '_pulse_ver',
+    queryParamKey: 'version',
+    shouldFallbackToV2: true
+  },
+  render: function render(args) {
+    // Mock fetch for Storybook (without Jest)
+    _react["default"].useEffect(function () {
+      var originalFetch = global.fetch;
+      global.fetch = function (url, options) {
+        console.log('Mock API Call:', url, options === null || options === void 0 ? void 0 : options.body);
+        return Promise.resolve({
+          ok: true,
+          status: 200,
+          json: function json() {
+            return Promise.resolve({
+              success: true
+            });
+          }
+        });
+      };
+      return function () {
+        global.fetch = originalFetch;
+      };
+    }, []);
+    return /*#__PURE__*/_react["default"].createElement("div", {
+      style: {
+        height: '400px',
+        position: 'relative'
+      }
+    }, /*#__PURE__*/_react["default"].createElement(_PulseVersionToggler["default"], args), /*#__PURE__*/_react["default"].createElement("div", {
+      style: {
+        padding: '20px',
+        maxWidth: '600px'
+      }
+    }, /*#__PURE__*/_react["default"].createElement("h2", null, "Floating Version Toggle Button"), /*#__PURE__*/_react["default"].createElement("p", null, "This button appears in the bottom-right corner of the page."), /*#__PURE__*/_react["default"].createElement("p", null, "Hover over the button to see the tooltip and click to toggle between versions."), /*#__PURE__*/_react["default"].createElement("p", null, /*#__PURE__*/_react["default"].createElement("strong", null, "Note:"), " In Storybook, the API calls are mocked and page reload is disabled.")));
+  }
+};
+
+// With Custom Tooltip Components
+var WithCustomTooltipComponents = exports.WithCustomTooltipComponents = {
+  args: {
+    endpoint: '/api/v1/pulse/version',
+    cookieName: '_pulse_ver',
+    queryParamKey: 'version',
+    shouldFallbackToV2: true
+  },
+  render: function render(args) {
+    _react["default"].useEffect(function () {
+      var originalFetch = global.fetch;
+      global.fetch = function (url, options) {
+        console.log('Mock API Call:', url, options === null || options === void 0 ? void 0 : options.body);
+        return Promise.resolve({
+          ok: true,
+          status: 200,
+          json: function json() {
+            return Promise.resolve({
+              success: true
+            });
+          }
+        });
+      };
+      return function () {
+        global.fetch = originalFetch;
+      };
+    }, []);
+
+    // Custom tooltip component for v2 (on state)
+    var TooltipV2Component = function TooltipV2Component(currentVersion, targetVersion) {
+      return /*#__PURE__*/_react["default"].createElement("div", {
+        style: {
+          display: 'flex',
+          flexDirection: 'column',
+          gap: '8px'
+        }
+      }, /*#__PURE__*/_react["default"].createElement("div", {
+        style: {
+          display: 'flex',
+          alignItems: 'center',
+          gap: '8px'
+        }
+      }, /*#__PURE__*/_react["default"].createElement("span", {
+        style: {
+          background: '#10b981',
+          color: 'white',
+          padding: '2px 8px',
+          borderRadius: '4px',
+          fontSize: '12px',
+          fontWeight: 'bold'
+        }
+      }, currentVersion.toUpperCase()), /*#__PURE__*/_react["default"].createElement("span", null, "You're on the new experience")), /*#__PURE__*/_react["default"].createElement("div", {
+        style: {
+          fontSize: '13px',
+          color: '#666'
+        }
+      }, "Click to switch back to ", targetVersion.toUpperCase(), " (Classic)"));
+    };
+
+    // Custom tooltip component for v1 (off state)
+    var TooltipV1Component = function TooltipV1Component(currentVersion, targetVersion) {
+      return /*#__PURE__*/_react["default"].createElement("div", {
+        style: {
+          display: 'flex',
+          flexDirection: 'column',
+          gap: '8px'
+        }
+      }, /*#__PURE__*/_react["default"].createElement("div", {
+        style: {
+          display: 'flex',
+          alignItems: 'center',
+          gap: '8px'
+        }
+      }, /*#__PURE__*/_react["default"].createElement("span", {
+        style: {
+          background: '#3b82f6',
+          color: 'white',
+          padding: '2px 8px',
+          borderRadius: '4px',
+          fontSize: '12px',
+          fontWeight: 'bold'
+        }
+      }, currentVersion.toUpperCase()), /*#__PURE__*/_react["default"].createElement("span", null, "You're on the classic version")), /*#__PURE__*/_react["default"].createElement("div", {
+        style: {
+          fontSize: '13px',
+          color: '#666'
+        }
+      }, "\u2728 Try the new ", targetVersion.toUpperCase(), " experience!"));
+    };
+    return /*#__PURE__*/_react["default"].createElement("div", {
+      style: {
+        height: '400px',
+        position: 'relative'
+      }
+    }, /*#__PURE__*/_react["default"].createElement(_PulseVersionToggler["default"], _extends({}, args, {
+      tooltipMessageOn: TooltipV2Component,
+      tooltipMessageOff: TooltipV1Component
+    })), /*#__PURE__*/_react["default"].createElement("div", {
+      style: {
+        padding: '20px',
+        maxWidth: '600px'
+      }
+    }, /*#__PURE__*/_react["default"].createElement("h2", null, "Custom Tooltip Components"), /*#__PURE__*/_react["default"].createElement("p", null, "This example demonstrates passing React components as tooltip messages."), /*#__PURE__*/_react["default"].createElement("p", null, "The tooltips include custom styling with badges, icons, and multi-line content."), /*#__PURE__*/_react["default"].createElement("p", null, /*#__PURE__*/_react["default"].createElement("strong", null, "Features:")), /*#__PURE__*/_react["default"].createElement("ul", null, /*#__PURE__*/_react["default"].createElement("li", null, "Version badges with different colors"), /*#__PURE__*/_react["default"].createElement("li", null, "Multi-line content with descriptions"), /*#__PURE__*/_react["default"].createElement("li", null, "Custom typography and spacing"), /*#__PURE__*/_react["default"].createElement("li", null, "Dynamic content based on current/target version"))));
+  }
+};
+
+// Starting with V1 (shouldFallbackToV2 = false)
+var StartingWithV1 = exports.StartingWithV1 = {
+  args: {
+    endpoint: '/api/v1/pulse/version',
+    cookieName: '_pulse_ver_v1',
+    queryParamKey: 'version',
+    shouldFallbackToV2: false
+  },
+  render: function render(args) {
+    _react["default"].useEffect(function () {
+      var originalFetch = global.fetch;
+      global.fetch = function (url, options) {
+        console.log('Mock API Call:', url, options === null || options === void 0 ? void 0 : options.body);
+        return Promise.resolve({
+          ok: true,
+          status: 200,
+          json: function json() {
+            return Promise.resolve({
+              success: true
+            });
+          }
+        });
+      };
+      return function () {
+        global.fetch = originalFetch;
+      };
+    }, []);
+    return /*#__PURE__*/_react["default"].createElement("div", {
+      style: {
+        height: '400px',
+        position: 'relative'
+      }
+    }, /*#__PURE__*/_react["default"].createElement(_PulseVersionToggler["default"], args), /*#__PURE__*/_react["default"].createElement("div", {
+      style: {
+        padding: '20px',
+        maxWidth: '600px'
+      }
+    }, /*#__PURE__*/_react["default"].createElement("h2", null, "Starting with V1 (Classic)"), /*#__PURE__*/_react["default"].createElement("p", null, "This example sets ", /*#__PURE__*/_react["default"].createElement("code", null, "shouldFallbackToV2"), " to ", /*#__PURE__*/_react["default"].createElement("code", null, "false"), "."), /*#__PURE__*/_react["default"].createElement("p", null, "When no cookie exists, the component will default to ", /*#__PURE__*/_react["default"].createElement("strong", null, "V1"), " (classic version)."), /*#__PURE__*/_react["default"].createElement("p", null, "The button will show \"V1\" and allow users to switch to V2."), /*#__PURE__*/_react["default"].createElement("p", null, /*#__PURE__*/_react["default"].createElement("strong", null, "Use case:"), " Perfect for users who should see the classic version by default.")));
+  }
+};
+
+// Starting with V2 (shouldFallbackToV2 = true)
+var StartingWithV2 = exports.StartingWithV2 = {
+  args: {
+    endpoint: '/api/v1/pulse/version',
+    cookieName: '_pulse_ver_v2',
+    queryParamKey: 'version',
+    shouldFallbackToV2: true
+  },
+  render: function render(args) {
+    _react["default"].useEffect(function () {
+      var originalFetch = global.fetch;
+      global.fetch = function (url, options) {
+        console.log('Mock API Call:', url, options === null || options === void 0 ? void 0 : options.body);
+        return Promise.resolve({
+          ok: true,
+          status: 200,
+          json: function json() {
+            return Promise.resolve({
+              success: true
+            });
+          }
+        });
+      };
+      return function () {
+        global.fetch = originalFetch;
+      };
+    }, []);
+    return /*#__PURE__*/_react["default"].createElement("div", {
+      style: {
+        height: '400px',
+        position: 'relative'
+      }
+    }, /*#__PURE__*/_react["default"].createElement(_PulseVersionToggler["default"], args), /*#__PURE__*/_react["default"].createElement("div", {
+      style: {
+        padding: '20px',
+        maxWidth: '600px'
+      }
+    }, /*#__PURE__*/_react["default"].createElement("h2", null, "Starting with V2 (New Experience)"), /*#__PURE__*/_react["default"].createElement("p", null, "This example sets ", /*#__PURE__*/_react["default"].createElement("code", null, "shouldFallbackToV2"), " to ", /*#__PURE__*/_react["default"].createElement("code", null, "true"), "."), /*#__PURE__*/_react["default"].createElement("p", null, "When no cookie exists, the component will default to ", /*#__PURE__*/_react["default"].createElement("strong", null, "V2"), " (new version)."), /*#__PURE__*/_react["default"].createElement("p", null, "The button will show \"V2\" with the active state and allow users to switch back to V1."), /*#__PURE__*/_react["default"].createElement("p", null, /*#__PURE__*/_react["default"].createElement("strong", null, "Use case:"), " Perfect for users who should see the new experience by default.")));
+  }
+};

package/components/PulseVersionToggler/index.js

@@ -0,0 +1,9 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _PulseVersionToggler = _interopRequireDefault(require("./PulseVersionToggler"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+var _default = exports["default"] = _PulseVersionToggler["default"];

package/components/PulseVersionToggler/pulse-version-toggler.css

@@ -0,0 +1 @@
+.RCB-pulse-toggler{position:fixed;right:-5px;top:50%;transform:translateY(-50%);z-index:9999;display:flex;align-items:center;transition:right 0.3s ease}.RCB-pulse-toggler.RCB-pulse-toggler-visible{right:0}.RCB-pulse-toggler-btn-text{font-size:10px}.RCB-pulse-toggler-btn{border:none;border-radius:8px 0 0 8px;cursor:pointer;font-size:12px;font-weight:600;font-family:inherit;letter-spacing:0.5px;color:#fff;background-color:#8a8a8a;display:flex;flex-direction:column;align-items:center;justify-content:center;transition:background-color 0.2s ease;box-shadow:-2px 2px 8px rgba(0,0,0,0.15);padding:6px 10px}.RCB-pulse-toggler-btn:hover{background-color:#6e6e6e}.RCB-pulse-toggler-btn:disabled{cursor:not-allowed;opacity:0.7}.RCB-pulse-toggler-btn.active{background-color:#3E71F2}.RCB-pulse-toggler-btn.active:hover{background-color:#3865D9}.RCB-pulse-toggler-tooltip{position:absolute;right:45px;top:50%;transform:translateY(-50%);background:#fff;color:#333;padding:10px 14px;border-radius:6px;box-shadow:0 4px 16px rgba(0,0,0,0.15);font-size:13px;line-height:1.5;width:220px;white-space:normal;pointer-events:none}.RCB-pulse-toggler-tooltip-arrow{position:absolute;right:-6px;top:50%;transform:translateY(-50%);width:0;height:0;border-top:6px solid transparent;border-bottom:6px solid transparent;border-left:6px solid #fff}.RCB-pulse-toggler-loader-wrap{display:flex;align-items:center;gap:8px}.RCB-pulse-toggler-loader{display:inline-block;width:16px;height:16px;border:2px solid #e0e0e0;border-top-color:#3E71F2;border-radius:50%;animation:RCB-pulse-spin 0.6s linear infinite;flex-shrink:0}@keyframes RCB-pulse-spin{to{transform:rotate(360deg)}}

package/components/PulseVersionToggler/pulse-version-toggler.scss

@@ -0,0 +1,106 @@
+.RCB-pulse-toggler {
+  position: fixed;
+  right: -5px;
+  top: 50%;
+  transform: translateY(-50%);
+  z-index: 9999;
+  display: flex;
+  align-items: center;
+  transition: right 0.3s ease;
+
+  &.RCB-pulse-toggler-visible {
+    right: 0;
+  }
+
+  &-btn-text {
+    font-size: 10px;
+  }
+
+  &-btn {
+    border: none;
+    border-radius: 8px 0 0 8px;
+    cursor: pointer;
+    font-size: 12px;
+    font-weight: 600;
+    font-family: inherit;
+    letter-spacing: 0.5px;
+    color: #fff;
+    background-color: #8a8a8a;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    transition: background-color 0.2s ease;
+    box-shadow: -2px 2px 8px rgba(0, 0, 0, 0.15);
+    padding: 6px 10px;
+
+    &:hover {
+      background-color: #6e6e6e;
+    }
+
+    &:disabled {
+      cursor: not-allowed;
+      opacity: 0.7;
+    }
+
+    &.active {
+      background-color: #3E71F2;
+
+      &:hover {
+        background-color: #3865D9;
+      }
+    }
+  }
+
+  &-tooltip {
+    position: absolute;
+    right: 45px;
+    top: 50%;
+    transform: translateY(-50%);
+    background: #fff;
+    color: #333;
+    padding: 10px 14px;
+    border-radius: 6px;
+    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
+    font-size: 13px;
+    line-height: 1.5;
+    width: 220px;
+    white-space: normal;
+    pointer-events: none;
+
+    &-arrow {
+      position: absolute;
+      right: -6px;
+      top: 50%;
+      transform: translateY(-50%);
+      width: 0;
+      height: 0;
+      border-top: 6px solid transparent;
+      border-bottom: 6px solid transparent;
+      border-left: 6px solid #fff;
+    }
+  }
+
+  &-loader-wrap {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+  }
+
+  &-loader {
+    display: inline-block;
+    width: 16px;
+    height: 16px;
+    border: 2px solid #e0e0e0;
+    border-top-color: #3E71F2;
+    border-radius: 50%;
+    animation: RCB-pulse-spin 0.6s linear infinite;
+    flex-shrink: 0;
+  }
+}
+
+@keyframes RCB-pulse-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}

package/components/Table/Table.stories.js

@@ -4,10 +4,10 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = exports.StickyLastColumn = exports.StickyFirstColumn = exports.StickyBothColumns = exports.SimpleExpandableRows = exports.ServerSidePaginationWithCustomStyling = exports.ServerSidePagination = exports.SelectableRows = exports.RefreshTable = exports.PaginationOptionsShowcase = exports.NoStickyColumn = exports.NoPagination = exports.NoDataDefault = exports.ExpandableRows = exports.Default = exports.CustomStyling = exports.CustomPaginationStyling = exports.CustomNoDataComponent = exports.CustomColumnFormatting = exports.ConditionalExpandableRows = exports.BottomPagination = exports.AdvancedPaginationStyling = void 0;
+exports["default"] = exports.StickyLastColumn = exports.StickyFirstColumn = exports.StickyBothColumns = exports.SimpleExpandableRows = exports.ServerSidePaginationWithCustomStyling = exports.ServerSidePagination = exports.ServerSideDefaultLoadingState = exports.SelectableRows = exports.RefreshTable = exports.PaginationOptionsShowcase = exports.NoStickyColumn = exports.NoPagination = exports.NoDataDefault = exports.ExpandableRows = exports.Default = exports.CustomStyling = exports.CustomPaginationStyling = exports.CustomNoDataComponent = exports.CustomColumnFormatting = exports.ConditionalExpandableRows = exports.BottomPagination = exports.AdvancedPaginationStyling = void 0;
 var _react = _interopRequireWildcard(require("react"));
-var _Table = _interopRequireDefault(require("./Table"));
 var _dataLoader = _interopRequireDefault(require("../../core/dataLoader"));
+var _Table = _interopRequireDefault(require("./Table"));
 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 _interopRequireWildcard(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 (var _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 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; }
@@ -269,14 +269,14 @@ var postsColumnConfigs = [{
     return row.id;
   },
   sortable: true,
-  width: '100px'
+  width: '10%'
 }, {
   name: 'Title',
   selector: function selector(row) {
     return row.title;
   },
   sortable: true,
-  width: '300px',
+  width: '30%',
   cell: function cell(row) {
     return /*#__PURE__*/_react["default"].createElement("div", {
       style: {
@@ -292,7 +292,7 @@ var postsColumnConfigs = [{
     return row.body;
   },
   sortable: true,
-  width: '400px',
+  width: '40%',
   cell: function cell(row) {
     return /*#__PURE__*/_react["default"].createElement("div", {
       style: {
@@ -311,7 +311,7 @@ var postsColumnConfigs = [{
     return row.userId;
   },
   sortable: true,
-  width: '100px',
+  width: '10%',
   cell: function cell(row) {
     return /*#__PURE__*/_react["default"].createElement("span", {
       style: {
@@ -556,7 +556,9 @@ NoDataDefault.args = {
   columnConfigs: basicColumnConfigs,
   paginationType: 'CLIENT',
   pagination: true,
-  customClassName: 'custom-table'
+  customClassName: 'custom-table',
+  noDataHeading: 'No data available',
+  noDataDescription: 'No data available for this table'
 };
 
 // Table with custom no data component
@@ -2154,4 +2156,48 @@ var AdvancedPaginationStyling = exports.AdvancedPaginationStyling = function Adv
       selectAllRowsItemText: '🌟 All'
     }
   }));
+};
+var ServerSideDefaultLoadingState = exports.ServerSideDefaultLoadingState = function ServerSideDefaultLoadingState() {
+  var _useState15 = (0, _react.useState)([]),
+    _useState16 = _slicedToArray(_useState15, 2),
+    selectedRows = _useState16[0],
+    setSelectedRows = _useState16[1];
+  var _useState17 = (0, _react.useState)(false),
+    _useState18 = _slicedToArray(_useState17, 2),
+    refreshTrigger = _useState18[0],
+    setRefreshTrigger = _useState18[1];
+  var responseFormatter = function responseFormatter(response) {
+    return {
+      entries: response || [],
+      total: response ? 30 : 0
+    };
+  };
+  var handleRefresh = function handleRefresh() {
+    setRefreshTrigger(!refreshTrigger);
+  };
+  return /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("div", {
+    style: {
+      marginBottom: '1rem'
+    }
+  }, /*#__PURE__*/_react["default"].createElement("h3", null, "Server-Side Default Loading State"), /*#__PURE__*/_react["default"].createElement("p", null, "This table shows the default loading state for server-side pagination.")), /*#__PURE__*/_react["default"].createElement(_Table["default"], {
+    columnConfigs: postsColumnConfigs,
+    paginationType: "SERVER",
+    pagination: true,
+    showSelectableRows: true,
+    setSelectedRow: setSelectedRows,
+    CheckBoxRow: CustomCheckBoxRow,
+    refreshData: refreshTrigger,
+    progressPending: true,
+    customClassName: "custom-table",
+    apiInfo: {
+      pageNoKey: '_page',
+      perPageKey: '_limit',
+      searchBy: 'q',
+      requestId: 'getPosts',
+      responseFormatter: responseFormatter
+    },
+    onApiError: function onApiError(error) {
+      return console.error('API Error:', error);
+    }
+  }));
 };

package/components/Table/TableChild.js

@@ -5,15 +5,16 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
+var _lodash = _interopRequireDefault(require("lodash.isequal"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
 var _react = _interopRequireWildcard(require("react"));
+var _dataLoader = _interopRequireDefault(require("../../core/dataLoader"));
 var _BaseTable = _interopRequireDefault(require("./BaseTable"));
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _lodash = _interopRequireDefault(require("lodash.isequal"));
 var _usePrevious = require("./hooks/usePrevious");
-var _dataLoader = _interopRequireDefault(require("../../core/dataLoader"));
-var _excluded = ["records", "columnConfigs", "paginationType", "sortOrder", "apiInfo", "onApiError", "noDataDescription", "noDataHeading", "customClassName", "pagination", "refreshData", "showSelectableRows", "setSelectedRow", "clearData", "expandableRows", "selectableRows", "CustomLoading", "CustomNoDataComponent", "CustomAPIErrorComponent", "CheckBoxRow", "page", "perPage", "onPageChangeCB", "onRowsPerPageChangeCB", "requestKeys", "paginationRowsPerPageOptions"];
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+var _TableUtils = require("./TableUtils");
+var _excluded = ["records", "columnConfigs", "paginationType", "sortOrder", "apiInfo", "onApiError", "noDataDescription", "noDataHeading", "noDataImage", "apiFailedImage", "customClassName", "pagination", "refreshData", "showSelectableRows", "setSelectedRow", "clearData", "expandableRows", "selectableRows", "CustomLoading", "CustomNoDataComponent", "CustomAPIErrorComponent", "CheckBoxRow", "page", "perPage", "onPageChangeCB", "onRowsPerPageChangeCB", "requestKeys", "paginationRowsPerPageOptions"];
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(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 (var _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 _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 _toConsumableArray(r) { return _arrayWithoutHoles(r) || _iterableToArray(r) || _unsupportedIterableToArray(r) || _nonIterableSpread(); }
 function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
@@ -50,6 +51,10 @@ var TableChild = function TableChild() {
     noDataDescription = _props$noDataDescript === void 0 ? "" : _props$noDataDescript,
     _props$noDataHeading = props.noDataHeading,
     noDataHeading = _props$noDataHeading === void 0 ? "" : _props$noDataHeading,
+    _props$noDataImage = props.noDataImage,
+    noDataImage = _props$noDataImage === void 0 ? "" : _props$noDataImage,
+    _props$apiFailedImage = props.apiFailedImage,
+    apiFailedImage = _props$apiFailedImage === void 0 ? "" : _props$apiFailedImage,
     _props$customClassNam = props.customClassName,
     customClassName = _props$customClassNam === void 0 ? "" : _props$customClassNam,
     _props$pagination = props.pagination,
@@ -63,7 +68,8 @@ var TableChild = function TableChild() {
     expandableRows = _props$expandableRows === void 0 ? false : _props$expandableRows,
     _props$selectableRows = props.selectableRows,
     selectableRows = _props$selectableRows === void 0 ? false : _props$selectableRows,
-    CustomLoading = props.CustomLoading,
+    _props$CustomLoading = props.CustomLoading,
+    CustomLoading = _props$CustomLoading === void 0 ? _TableUtils.DefaultLoading : _props$CustomLoading,
     CustomNoDataComponent = props.CustomNoDataComponent,
     CustomAPIErrorComponent = props.CustomAPIErrorComponent,
     CheckBoxRow = props.CheckBoxRow,
@@ -320,10 +326,18 @@ var TableChild = function TableChild() {
     onChangePage: handlePageChange,
     noDataComponent: apiError ? CustomAPIErrorComponent ? /*#__PURE__*/_react["default"].createElement(CustomAPIErrorComponent, {
       status: apiErrorMessage
-    }) : /*#__PURE__*/_react["default"].createElement("div", null, "Error") : CustomNoDataComponent ? /*#__PURE__*/_react["default"].createElement(CustomNoDataComponent, {
+    }) : /*#__PURE__*/_react["default"].createElement(_TableUtils.DefaultAPIErrorComponent, {
+      status: apiErrorMessage,
+      image: apiFailedImage
+    }) : CustomNoDataComponent ? /*#__PURE__*/_react["default"].createElement(CustomNoDataComponent, {
+      description: noDataDescription,
+      heading: noDataHeading,
+      image: noDataImage
+    }) : /*#__PURE__*/_react["default"].createElement(_TableUtils.DefaultNoDataComponent, {
       description: noDataDescription,
-      heading: noDataHeading
-    }) : /*#__PURE__*/_react["default"].createElement("div", null, "No Data"),
+      heading: noDataHeading,
+      image: noDataImage
+    }),
     paginationDefaultPage: page,
     className: "".concat(customClassName, " nutana-table ").concat(isServerPagination ? 'pagination' : 'no-pagination', " ").concat(isFirstColumnSticky ? 'first-clm-sticky' : '', " ").concat(isLastColumnSticky ? 'last-clm-sticky' : '', " ").concat(expandableRows ? 'expandable-rows' : ''),
     paginationRowsPerPageOptions: paginationRowsPerPageOptions,