oa-componentbook 0.0.0-sit1.1

package/build/components/oa-component-table/CustomTableV1.js

@@ -0,0 +1,610 @@
+"use strict";
+
+require("core-js/modules/es.symbol.description.js");
+require("core-js/modules/es.object.assign.js");
+require("core-js/modules/es.weak-map.js");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+require("core-js/modules/web.dom-collections.iterator.js");
+require("core-js/modules/es.json.stringify.js");
+require("core-js/modules/es.array.sort.js");
+require("core-js/modules/es.array.reduce.js");
+require("core-js/modules/es.array.includes.js");
+require("core-js/modules/es.string.includes.js");
+require("core-js/modules/es.string.trim.js");
+var _react = _interopRequireWildcard(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _antd = require("antd");
+var _KeyboardArrowUp = _interopRequireDefault(require("@material-ui/icons/KeyboardArrowUp"));
+var _KeyboardArrowDown = _interopRequireDefault(require("@material-ui/icons/KeyboardArrowDown"));
+var _MoreVert = _interopRequireDefault(require("@material-ui/icons/MoreVert"));
+var _CustomTooltip = _interopRequireDefault(require("../oa-component-tooltip/CustomTooltip"));
+var _utils = require("../../utils");
+var _Typography = _interopRequireDefault(require("../oa-component-typography/Typography"));
+require("antd/dist/reset.css");
+var _CustomButton = _interopRequireDefault(require("../oa-component-button/CustomButton"));
+var _CustomSelect = _interopRequireDefault(require("../oa-component-select/CustomSelect"));
+var _stylesV = require("./stylesV1");
+var _MaterialIcon = _interopRequireDefault(require("../oa-component-icons/MaterialIcon"));
+var _CustomDropdown = _interopRequireDefault(require("../oa-component-dropdown/CustomDropdown"));
+var _CustomTag = _interopRequireDefault(require("../oa-component-tag/CustomTag"));
+var _CustomPagination = _interopRequireDefault(require("../oa-component-pagination/CustomPagination"));
+var _checkbox = _interopRequireDefault(require("antd/lib/checkbox"));
+const _excluded = ["columns", "dataSource", "pagination", "rowKey", "size", "style", "tableBorder", "emptyText", "ellipsisConfig", "multiItemConfig", "defaultCardShow", "setConfig", "customTableChange", "selectedRows", "onMobilePageChange", "emptyStateCard"],
+  _excluded2 = ["title", "dataIndex", "jsxConfig", "render", "ellipsisConfig", "multiItemConfig", "filterDropdown", "filterDropdownProps", "filters"];
+/* eslint-disable */
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+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 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 _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; }
+// Custom Filter Dropdown Component
+const CustomFilterDropdown = _ref => {
+  let {
+    setSelectedKeys,
+    selectedKeys,
+    confirm,
+    clearFilters,
+    filters,
+    filterDropdownProps
+  } = _ref;
+  // Initialize with empty array - local state should start clean
+  const [localSelectedKeys, setLocalSelectedKeys] = (0, _react.useState)([]);
+
+  // Update local state when selectedKeys prop changes (when filters are applied)
+  (0, _react.useEffect)(() => {
+    // Only update if selectedKeys actually changed (when filters are applied)
+    setLocalSelectedKeys(selectedKeys || []);
+  }, [selectedKeys]);
+  const handleFilterChange = checkedValues => {
+    setLocalSelectedKeys(checkedValues);
+  };
+  const handleFilterConfirm = () => {
+    setSelectedKeys(localSelectedKeys);
+    confirm();
+  };
+  const handleFilterReset = () => {
+    // Clear the local state
+    setLocalSelectedKeys([]);
+    // Clear the applied filters
+    setSelectedKeys([]);
+    // Clear filters and close popup
+    clearFilters();
+    // Confirm the changes to close the popup
+    confirm();
+  };
+
+  // Check if current local state is different from applied state
+  const hasChanges = JSON.stringify([...localSelectedKeys].sort()) !== JSON.stringify([...(selectedKeys || [])].sort());
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "statusBox"
+  }, /*#__PURE__*/_react.default.createElement(_Typography.default, {
+    color: "secondary-content",
+    className: "type-sl1-700"
+  }, filterDropdownProps.filterTitle || "FILTER"), /*#__PURE__*/_react.default.createElement(_checkbox.default.Group, {
+    options: filters.map(filter => ({
+      label: filter.text,
+      value: filter.value
+    })),
+    value: localSelectedKeys,
+    onChange: handleFilterChange
+  }), /*#__PURE__*/_react.default.createElement("aside", null, /*#__PURE__*/_react.default.createElement(_CustomButton.default, {
+    type: "secondary",
+    onClick: handleFilterReset,
+    size: "small",
+    label: filterDropdownProps.filterReset || "Clear All"
+  }), /*#__PURE__*/_react.default.createElement(_CustomButton.default, {
+    onClick: handleFilterConfirm,
+    size: "small",
+    disabled: !hasChanges,
+    label: filterDropdownProps.filterConfirm || "Submit"
+  })));
+};
+function CustomTableV1(_ref2) {
+  let {
+      columns,
+      dataSource,
+      pagination,
+      rowKey,
+      size,
+      style,
+      tableBorder,
+      emptyText,
+      ellipsisConfig,
+      multiItemConfig,
+      defaultCardShow,
+      setConfig,
+      customTableChange,
+      selectedRows = [],
+      onMobilePageChange,
+      emptyStateCard
+    } = _ref2,
+    antDesignProps = _objectWithoutProperties(_ref2, _excluded);
+  // State to manage card vs table view and expanded cards
+  const [viewMore, setViewMore] = (0, _react.useState)([]);
+  const [ctaColumnsSorted, setCtaColumnsSorted] = (0, _react.useState)(null);
+  const [cardShow, setCardShow] = (0, _react.useState)(false);
+  const threshold = 10;
+  function getByPath(obj, path) {
+    var _path$split;
+    return path === null || path === void 0 || (_path$split = path.split(".")) === null || _path$split === void 0 ? void 0 : _path$split.reduce((acc, part) => acc === null || acc === void 0 ? void 0 : acc[part], obj);
+  }
+  // Determine card view on initial load if on mobile
+  (0, _react.useEffect)(() => {
+    if (window.innerWidth <= 600) {
+      setCardShow(true);
+    }
+  }, [defaultCardShow, columns.length]);
+  const mergedPagination = pagination && typeof pagination === "object" ? _objectSpread(_objectSpread({}, pagination), {}, {
+    position: ["bottomLeft", "bottomRight"]
+  }) : pagination;
+  // Add helper function to check if row is selected
+  const isRowSelected = record => {
+    let isSelected = selectedRows.some(row => row.rowKey === record.rowKey);
+    return isSelected;
+  };
+
+  // Process columns: wrap titles in Typography, handle jsxConfig and custom renderers
+  const finalColumns = (0, _react.useMemo)(() => {
+    // Check if any column has non-array filters (like '{{branchDetails}}')
+    const hasInvalidFilters = columns.some(col => col.filters && !Array.isArray(col.filters));
+
+    // If there are invalid filters, return empty array to prevent table rendering
+    if (hasInvalidFilters) {
+      return [];
+    }
+
+    // Process each column while preserving the original order
+    const processedColumns = columns.map(col => {
+      const {
+          title,
+          dataIndex,
+          jsxConfig,
+          render: userRender,
+          ellipsisConfig: colEllipsisConfig,
+          multiItemConfig: colMultiItemConfig,
+          filterDropdown,
+          filterDropdownProps,
+          filters
+        } = col,
+        rest = _objectWithoutProperties(col, _excluded2);
+      const titleNode = (0, _utils.isString)(title) || (0, _utils.isNumber)(title) ? /*#__PURE__*/_react.default.createElement(_Typography.default, {
+        typography: "type-sl1-700"
+      }, title) : title;
+      let finalFilterDropdown = filterDropdown;
+      if (filterDropdownProps && filters && Array.isArray(filters)) {
+        finalFilterDropdown = props => /*#__PURE__*/_react.default.createElement(CustomFilterDropdown, _extends({}, props, {
+          filters: filters,
+          filterDropdownProps: filterDropdownProps
+        }));
+      }
+
+      // Handle jsxConfig for columns - now supports array
+      if (jsxConfig) {
+        var _jsxConfigs$;
+        // Check if jsxConfig is an array or single object
+        const jsxConfigs = Array.isArray(jsxConfig) ? jsxConfig : [jsxConfig];
+
+        // Determine position from first config or default
+        const position = ((_jsxConfigs$ = jsxConfigs[0]) === null || _jsxConfigs$ === void 0 ? void 0 : _jsxConfigs$.position) || "end";
+
+        // Check if any config has customRenderers type
+        const hasCustomRenderers = jsxConfigs.some(config => config && config.type === "customRenderers");
+        let ctaRender = (_, record) => /*#__PURE__*/_react.default.createElement("div", {
+          style: {
+            display: "flex",
+            gap: "8px",
+            alignItems: "center"
+          }
+        }, jsxConfigs.map((config, index) => {
+          var _config$options, _record$config$styleK;
+          // Add safety check for undefined config
+          if (!config) return null;
+          const {
+            type,
+            subType,
+            label,
+            onClickHandler,
+            options,
+            disabled = false,
+            icon
+          } = config;
+
+          // Handle different CTA types
+          switch (type) {
+            case "icon":
+              return /*#__PURE__*/_react.default.createElement(_MaterialIcon.default, {
+                key: index,
+                size: 24,
+                icon: icon,
+                color: "secondary-content",
+                onClick: () => !isRowSelected(record) && customTableChange(record, config)
+              });
+            case "customRenderers":
+              return /*#__PURE__*/_react.default.createElement("div", {
+                key: index
+              }, (config === null || config === void 0 ? void 0 : config.mainLink) && /*#__PURE__*/_react.default.createElement(_CustomButton.default, {
+                role: "button",
+                onClick: () => {
+                  !isRowSelected(record) && customTableChange(record, config.mainLink);
+                },
+                onKeyDown: e => !isRowSelected(record) && (e.key === "Enter" || e.key === " ") && customTableChange(record, config.mainLink),
+                label: label || _,
+                type: "text-only",
+                disabled: disabled || isRowSelected(record)
+              }), config === null || config === void 0 || (_config$options = config.options) === null || _config$options === void 0 ? void 0 : _config$options.map((option, idx) => {
+                var _record$option$styleK, _record$option$styleK2;
+                return /*#__PURE__*/_react.default.createElement("div", {
+                  key: idx
+                }, (option === null || option === void 0 ? void 0 : option.type) === "button" ? /*#__PURE__*/_react.default.createElement(_CustomButton.default, {
+                  type: (option === null || option === void 0 ? void 0 : option.subType) || "primary",
+                  label: (option === null || option === void 0 ? void 0 : option.label) || (record === null || record === void 0 ? void 0 : record[option === null || option === void 0 ? void 0 : option.key]) || "",
+                  onClick: () => customTableChange(record, config)
+                }) : (option === null || option === void 0 ? void 0 : option.type) === "tag" ? /*#__PURE__*/_react.default.createElement(_CustomTag.default, {
+                  label: getByPath(record, option === null || option === void 0 ? void 0 : option.key) || "",
+                  type: (option === null || option === void 0 ? void 0 : option.tagType) || "primary",
+                  visible: true
+                }) : /*#__PURE__*/_react.default.createElement(_Typography.default, {
+                  typography: (option === null || option === void 0 ? void 0 : option.typography) || (col === null || col === void 0 ? void 0 : col.customStyle) && (record === null || record === void 0 || (_record$option$styleK = record[option === null || option === void 0 ? void 0 : option.styleKey]) === null || _record$option$styleK === void 0 ? void 0 : _record$option$styleK.typography) || "type-b2-400",
+                  color: (option === null || option === void 0 ? void 0 : option.color) || (col === null || col === void 0 ? void 0 : col.customStyle) && (record === null || record === void 0 || (_record$option$styleK2 = record[option === null || option === void 0 ? void 0 : option.styleKey]) === null || _record$option$styleK2 === void 0 ? void 0 : _record$option$styleK2.color)
+                }, getByPath(record, option === null || option === void 0 ? void 0 : option.key)));
+              }));
+            case "tag":
+              const tagType = typeof subType === "function" ? subType(_, record) : subType;
+              const tagLabel = label || _;
+              return tagLabel ? /*#__PURE__*/_react.default.createElement(_CustomTag.default, {
+                key: index,
+                label: tagLabel,
+                type: tagType,
+                visible: true
+              }) : null;
+            case "link":
+              return /*#__PURE__*/_react.default.createElement(_CustomButton.default, {
+                key: index,
+                role: "button",
+                onClick: () => {
+                  !isRowSelected(record) && customTableChange(record, config);
+                },
+                onKeyDown: e => !isRowSelected(record) && (e.key === "Enter" || e.key === " ") && customTableChange(record, config),
+                label: label || _,
+                type: "text-only",
+                disabled: disabled || isRowSelected(record)
+              });
+            case "button":
+              return /*#__PURE__*/_react.default.createElement(_CustomButton.default, {
+                key: index,
+                type: subType || "primary",
+                label: label || _,
+                onClick: () => !isRowSelected(record) && customTableChange(record, config),
+                disabled: disabled || (col === null || col === void 0 ? void 0 : col.customStyle) && (record === null || record === void 0 || (_record$config$styleK = record[config === null || config === void 0 ? void 0 : config.styleKey]) === null || _record$config$styleK === void 0 ? void 0 : _record$config$styleK.disabled) || isRowSelected(record)
+              });
+            case "dropdown":
+              return /*#__PURE__*/_react.default.createElement(_CustomSelect.default, {
+                key: index,
+                options: options,
+                onChange: val => !isRowSelected(record) && onClickHandler(record, val, setConfig),
+                disabled: isRowSelected(record)
+              });
+            case "popover":
+              return /*#__PURE__*/_react.default.createElement(_CustomDropdown.default, {
+                key: index,
+                type: "primary",
+                disabled: isRowSelected(record),
+                items: options.map(opt => {
+                  var _record$opt$styleKey;
+                  return {
+                    label: opt.label,
+                    key: opt.key,
+                    danger: opt.danger || false,
+                    onClick: () => !isRowSelected(record) && customTableChange(record, config, opt.key),
+                    disabled: (col === null || col === void 0 ? void 0 : col.customStyle) && (record === null || record === void 0 || (_record$opt$styleKey = record[opt === null || opt === void 0 ? void 0 : opt.styleKey]) === null || _record$opt$styleKey === void 0 ? void 0 : _record$opt$styleKey.disabled) || isRowSelected(record)
+                  };
+                })
+              }, /*#__PURE__*/_react.default.createElement(_MaterialIcon.default, {
+                size: 24,
+                icon: _MoreVert.default,
+                color: isRowSelected(record) ? "disabled" : "secondary-content"
+              }));
+            default:
+              return null;
+          }
+        }));
+        return _objectSpread(_objectSpread({}, rest), {}, {
+          dataIndex,
+          title: titleNode,
+          isCTA: !hasCustomRenderers,
+          position,
+          render: ctaRender
+        }, finalFilterDropdown && {
+          filterDropdown: finalFilterDropdown
+        });
+      }
+
+      // Handle Data columns with ellipsisConfig and multiItemConfig
+      let effectiveEllipsisConfig = ellipsisConfig;
+      let effectiveMultiItemConfig = multiItemConfig;
+      if (!cardShow) {
+        if (colEllipsisConfig && colEllipsisConfig.enabled) {
+          effectiveEllipsisConfig = colEllipsisConfig;
+          effectiveMultiItemConfig = _objectSpread(_objectSpread({}, multiItemConfig), {}, {
+            enabled: false
+          });
+        }
+        if (colMultiItemConfig && colMultiItemConfig.enabled) {
+          effectiveMultiItemConfig = colMultiItemConfig;
+          effectiveEllipsisConfig = _objectSpread(_objectSpread({}, effectiveEllipsisConfig), {}, {
+            enabled: false
+          });
+        }
+      } else {
+        // In cardShow mode -> ellipsis off
+        effectiveEllipsisConfig = _objectSpread(_objectSpread({}, effectiveEllipsisConfig), {}, {
+          enabled: false
+        });
+      }
+      return _objectSpread(_objectSpread(_objectSpread({}, rest), {}, {
+        dataIndex,
+        title: titleNode
+      }, finalFilterDropdown && {
+        filterDropdown: finalFilterDropdown
+      }), {}, {
+        render: (value, record) => {
+          let items = [];
+          if (Array.isArray(value)) {
+            items = value;
+          } else if ((0, _utils.isString)(value) && value.includes(",")) {
+            items = value.split(",").map(item => item.trim());
+          }
+
+          // Multi-item popover logic
+          if (effectiveMultiItemConfig.enabled && items && items.length > effectiveMultiItemConfig.displayCount) {
+            const visible = items.slice(0, effectiveMultiItemConfig.displayCount);
+            const moreCount = items.length - effectiveMultiItemConfig.displayCount;
+            const popList = /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, items.slice(effectiveMultiItemConfig.displayCount).map(item => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Typography.default, {
+              key: (0, _utils.getUUID)(),
+              typography: "type-b2-400"
+            }, item, /*#__PURE__*/_react.default.createElement("br", null)))));
+            return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, visible.map((item, idx) => /*#__PURE__*/_react.default.createElement(_Typography.default, {
+              key: (0, _utils.getUUID)(),
+              typography: "type-b2-400",
+              style: {
+                display: "inline",
+                marginRight: 4
+              }
+            }, item, idx < visible.length - 1 ? "," : "")), /*#__PURE__*/_react.default.createElement(_CustomTooltip.default, {
+              title: popList,
+              trigger: "hover",
+              placement: "topLeft",
+              className: "pointer"
+            }, /*#__PURE__*/_react.default.createElement(_Typography.default, {
+              typography: "type-b2-400",
+              color: "primary"
+            }, "+", moreCount, " more")));
+          }
+
+          // Ellipsis popover
+          if (effectiveEllipsisConfig.enabled && !cardShow &&
+          // Completely disable ellipsis for mobile card view
+          (0, _utils.isString)(value) && value.length > effectiveEllipsisConfig.limit) {
+            const truncated = "".concat(value.slice(0, effectiveEllipsisConfig.limit), "...");
+            const popText = /*#__PURE__*/_react.default.createElement(_Typography.default, {
+              typography: "type-b2-400",
+              style: {
+                maxWidth: 300,
+                whiteSpace: "normal",
+                color: "#fff"
+              }
+            }, value);
+            return /*#__PURE__*/_react.default.createElement("span", {
+              style: {
+                whiteSpace: "nowrap",
+                overflow: "hidden",
+                textOverflow: "ellipsis",
+                display: "inline-flex",
+                alignItems: "center"
+              }
+            }, /*#__PURE__*/_react.default.createElement(_Typography.default, {
+              typography: "type-b2-400"
+            }, truncated), effectiveEllipsisConfig.expandText && /*#__PURE__*/_react.default.createElement(_CustomTooltip.default, {
+              title: popText,
+              trigger: "hover",
+              placement: "topLeft"
+            }, /*#__PURE__*/_react.default.createElement("div", {
+              className: "margin-left-4"
+            }, /*#__PURE__*/_react.default.createElement(_Typography.default, {
+              typography: "type-b2-400",
+              color: "primary"
+            }, effectiveEllipsisConfig.expandText))));
+          }
+
+          // Default rendering
+          if (typeof userRender === "function") {
+            return userRender(value, record);
+          }
+          if ((0, _utils.isString)(value) || (0, _utils.isNumber)(value)) {
+            return /*#__PURE__*/_react.default.createElement(_Typography.default, {
+              typography: "type-b2-400"
+            }, value);
+          }
+          return value;
+        }
+      });
+    });
+    const ctaColumnsSorted = [...processedColumns.filter(c => c.isCTA && c.position === "start"), ...processedColumns.filter(c => c.isCTA && c.position !== "start")];
+    setCtaColumnsSorted(ctaColumnsSorted);
+
+    // Returning processed columns in the same order as initial `columns` array
+    return processedColumns;
+  }, [columns, setConfig, ellipsisConfig, multiItemConfig, selectedRows, cardShow]);
+  const tableStyle = {
+    borderTop: "1px solid var(--color-divider)",
+    overflow: "hidden",
+    borderRight: tableBorder ? "1px solid var(--color-divider)" : 0,
+    borderBottom: tableBorder ? "1px solid var(--color-divider)" : 0,
+    borderLeft: tableBorder ? "1px solid var(--color-divider)" : 0,
+    borderRadius: tableBorder ? "4px" : 0
+  };
+
+  // Helper to get cell content (uses column render or dataIndex)
+  const getContentToBeRender = (col, row) => {
+    if (typeof col.render === "function") {
+      const value = Array.isArray(col.dataIndex) ? getByPath(row, col.dataIndex.join(".")) : col.dataIndex ? row[col.dataIndex] : undefined;
+      return col.render(value, row);
+    }
+    if (Array.isArray(col.dataIndex)) {
+      var _getByPath;
+      return (_getByPath = getByPath(row, col.dataIndex.join("."))) !== null && _getByPath !== void 0 ? _getByPath : "";
+    }
+    if (col.dataIndex) {
+      var _row$col$dataIndex;
+      return (_row$col$dataIndex = row[col.dataIndex]) !== null && _row$col$dataIndex !== void 0 ? _row$col$dataIndex : "";
+    }
+    return "";
+  };
+
+  // Toggle expanded view for a card (add/remove row index in viewMore array)
+  const handleViewMore = index => {
+    setViewMore(prev => prev.includes(index) ? prev.filter(i => i !== index) : [...prev, index]);
+  };
+  const customLocale = {
+    filterReset: "Reset",
+    filterConfirm: "Apply"
+  };
+  return /*#__PURE__*/_react.default.createElement(_stylesV.MainContainer, null, /*#__PURE__*/_react.default.createElement(_stylesV.GlobalStyle, null), !cardShow && /*#__PURE__*/_react.default.createElement(_antd.ConfigProvider, {
+    theme: {
+      components: {
+        Table: {}
+      }
+    },
+    locale: {
+      Table: customLocale
+    }
+  }, /*#__PURE__*/_react.default.createElement(_stylesV.StyledTable, _extends({
+    style: _objectSpread(_objectSpread({}, tableStyle), style),
+    columns: finalColumns,
+    dataSource: dataSource,
+    pagination: mergedPagination,
+    rowKey: row => row.rowKey,
+    locale: {
+      emptyText
+    },
+    size: size,
+    scroll: {
+      x: "max-content"
+    }
+  }, antDesignProps))), /*#__PURE__*/_react.default.createElement("div", {
+    className: cardShow && dataSource ? "bottomPadding" : ""
+  }, cardShow && dataSource && dataSource.map((row, rowIndex) => {
+    var _finalColumns$;
+    return /*#__PURE__*/_react.default.createElement("div", {
+      key: (0, _utils.getUUID)(),
+      className: "cardStyles"
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      className: "srDetails"
+    }, /*#__PURE__*/_react.default.createElement(_Typography.default, {
+      typography: "type-t2-700",
+      color: "primary-content"
+    }, /*#__PURE__*/_react.default.createElement("div", null, (_finalColumns$ = finalColumns[0]) === null || _finalColumns$ === void 0 ? void 0 : _finalColumns$.title, " : "), /*#__PURE__*/_react.default.createElement("div", {
+      className: "srValue"
+    }, getContentToBeRender(finalColumns[0], row)))), finalColumns.map((col, colIndex) => {
+      // Exclude the first column and any column with action buttons (jsxConfig) from the card view
+      if (colIndex === 0 || col.isCTA) return null; // Ensure no action buttons in card
+      if (!viewMore.includes(rowIndex) && colIndex > threshold) return null;
+      return /*#__PURE__*/_react.default.createElement("div", {
+        key: (0, _utils.getUUID)(),
+        className: "keyValue"
+      }, /*#__PURE__*/_react.default.createElement("span", null, col.title), /*#__PURE__*/_react.default.createElement("strong", null, getContentToBeRender(col, row)));
+    }), finalColumns.length > threshold && /*#__PURE__*/_react.default.createElement("div", {
+      className: "showHideBtn"
+    }, /*#__PURE__*/_react.default.createElement(_CustomButton.default, {
+      size: "medium",
+      type: "text-only",
+      label: viewMore.includes(rowIndex) ? "View Less" : "View More",
+      iconConfig: {
+        icon: viewMore.includes(rowIndex) ? /*#__PURE__*/_react.default.createElement(_MaterialIcon.default, {
+          icon: _KeyboardArrowUp.default,
+          size: 16
+        }) : /*#__PURE__*/_react.default.createElement(_MaterialIcon.default, {
+          icon: _KeyboardArrowDown.default,
+          size: 16
+        }),
+        position: "right"
+      },
+      onClick: () => handleViewMore(rowIndex)
+    })), ctaColumnsSorted.length > 0 && /*#__PURE__*/_react.default.createElement("div", {
+      className: "footerCta"
+    }, ctaColumnsSorted.filter(col => col.isCTA && col !== finalColumns[0]) // Exclude first column from footer
+    .map(col => /*#__PURE__*/_react.default.createElement("div", {
+      key: col.key || col.dataIndex,
+      style: {
+        display: "flex",
+        gap: "8px",
+        flexWrap: "wrap"
+      }
+    }, getContentToBeRender(col, row)))));
+  }), cardShow && dataSource.length == 0 && emptyStateCard), cardShow && dataSource.length > 0 && onMobilePageChange && /*#__PURE__*/_react.default.createElement("div", {
+    className: "mobileViewPagination"
+  }, /*#__PURE__*/_react.default.createElement(_CustomPagination.default, {
+    current: pagination.current,
+    pageSize: pagination.pageSize,
+    total: pagination.total,
+    onChange: page => {
+      onMobilePageChange === null || onMobilePageChange === void 0 || onMobilePageChange({
+        current: page,
+        pageSize: pagination.pageSize
+      });
+    },
+    showLessItems: true
+  })));
+}
+CustomTableV1.propTypes = {
+  columns: _propTypes.default.array.isRequired,
+  dataSource: _propTypes.default.array,
+  pagination: _propTypes.default.oneOfType([_propTypes.default.bool, _propTypes.default.object]),
+  rowKey: _propTypes.default.string,
+  size: _propTypes.default.oneOf(["small", "middle", "large"]),
+  style: _propTypes.default.object,
+  tableBorder: _propTypes.default.bool,
+  emptyText: _propTypes.default.string,
+  defaultCardShow: _propTypes.default.bool,
+  setConfig: _propTypes.default.func.isRequired,
+  ellipsisConfig: _propTypes.default.shape({
+    enabled: _propTypes.default.bool,
+    limit: _propTypes.default.number,
+    expandText: _propTypes.default.string
+  }),
+  multiItemConfig: _propTypes.default.shape({
+    enabled: _propTypes.default.bool,
+    displayCount: _propTypes.default.number
+  }),
+  selectedRows: _propTypes.default.array
+};
+CustomTableV1.defaultProps = {
+  dataSource: [],
+  pagination: false,
+  rowKey: "",
+  size: "middle",
+  style: {},
+  tableBorder: true,
+  emptyText: "No Data",
+  defaultCardShow: false,
+  ellipsisConfig: {
+    enabled: false,
+    limit: 100,
+    expandText: ""
+  },
+  multiItemConfig: {
+    enabled: false,
+    displayCount: 2
+  },
+  selectedRows: []
+};
+var _default = exports.default = CustomTableV1;

package/build/components/oa-component-table/styles.js

@@ -0,0 +1,14 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.StyledTable = exports.MainContainer = void 0;
+var _antd = require("antd");
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _templateObject, _templateObject2;
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+var _default = exports.default = {};
+const StyledTable = exports.StyledTable = (0, _styledComponents.default)(_antd.Table)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  tr > td {\n    vertical-align: top;\n  }\n  .ant-table-row:last-child td {\n    border: none;\n  }\n"])));
+const MainContainer = exports.MainContainer = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n.fullWidthBtn button{\n  width: 100%;\n}\n.fullWidthBtn{\n  position: fixed;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  background: #fff;\n  padding: 16px;\n  box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.14);\n}\n.secondary:hover {\n  background: transparent;\n    border: 1px solid var(--color-primary);\n    color: var(--color-primary);\n}\n.cardStyles {\n    padding: 16px;\n    border-radius: 4px;\n    border: 1px solid var(--color-divider);\n    background: var(--color-primary-background);\n    margin: 0 0 24px;\n  }\n  .bottomPadding{\n    padding: 0 0 84px;\n  }\n  .showHideBtn {\n    padding: 8px 0 16px;\n  }\n  .keyValue {\n    display: flex;\n    gap: 12px;\n    margin: 0 0 16px;\n  }\n  .keyValue:last-child {\n    margin: 0;\n  }\n  .keyValue strong, .keyValue span {\n    width: 100%;\n  }\n  .keyValue strong {\n    color: var(--color-primary-content);\n    font-size: 14px;\n    font-weight: 500;\n    line-height: 20px;\n  }\n  .keyValue span {\n    color: var(--color-primary-content);\n    font-size: 14px;\n    font-weight: 400;\n    line-height: 20px;\n  }\n  .srDetails {\n    padding: 0 0 12px;\n    margin: 0 0 16px;\n    border-bottom: 1px solid var(--color-divider);\n  }\n  .srDetails >span > .type-sl1-700{\n    font-size: initial;\n  }\n  .footerCta {\n    display: flex;\n    justify-content: space-between;\n    gap: 16px;\n    padding: 16px 16px 0;\n    border-top: 1px solid var(--color-divider);\n    width: 100%;\n  }\n  .footerCta button{\n    width: 100%;\n  }\n  .flexEnd {\n    display: flex;\n    justify-content: end;\n    margin: 0 0 12px;\n  }\n\n@media only screen and (max-width: 600px) {\n  .mobileViewPagination{display: flex;\n    justify-content: flex-end;\n    margin: 16px 0px;\n  }\n\n  .mobileViewPagination .ant-pagination {\n    padding: 0;\n  }\n}\n"])));

package/build/components/oa-component-table/stylesV1.js

@@ -0,0 +1,19 @@
+"use strict";
+
+require("core-js/modules/es.weak-map.js");
+require("core-js/modules/web.dom-collections.iterator.js");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.StyledTable = exports.MainContainer = exports.GlobalStyle = void 0;
+var _antd = require("antd");
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
+var _templateObject, _templateObject2, _templateObject3;
+/* eslint-disable */
+// components/oa-component-table/styles.js
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+const GlobalStyle = exports.GlobalStyle = (0, _styledComponents.createGlobalStyle)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n.ant-dropdown .ant-table-filter-dropdown .ant-dropdown-menu {padding: 0; top: 0;}\n.ant-dropdown .ant-dropdown-menu .ant-dropdown-menu-item {border-radius: 0; padding: 12px !important;}\n.ant-dropdown .ant-table-filter-dropdown {border-radius: 8px;background: #FFF;box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.14);}\n.ant-dropdown .ant-table-filter-dropdown .ant-table-filter-dropdown-btns {padding: 12px; border: none;}\n.ant-dropdown .ant-table-filter-dropdown  .ant-btn-link, .ant-dropdown .ant-table-filter-dropdown  .ant-btn-primary {border-radius: 4px; min-width: 100px; padding: 7px 16px;\n  border: 1px solid #014FC5;  height: auto;text-align: center;font-size: 14px;font-style: normal;font-weight: 500;line-height: 20px; }\n.ant-dropdown .ant-table-filter-dropdown  .ant-btn-link {color:  #014FC5; background: #fff;}\n.ant-dropdown .ant-table-filter-dropdown  .ant-btn-primary {background:  #014FC5; color: #fff;}\n.ant-checkbox .ant-checkbox-inner {width: 18px; height: 18px; border: 1px solid #717171; border-radius: 2px;}\n.ant-checkbox-checked .ant-checkbox-inner {background-color: #014FC5; border-color: #014FC5;}\n.ant-dropdown .ant-table-filter-dropdown  .ant-btn-primary:hover {background:#82a9e2; border: 1px solid #82a9e2;}\n.ant-dropdown .ant-table-filter-dropdown  .ant-btn-link:hover {border: 1px solid #82a9e2; color: #82a9e2;}\n.ant-table-wrapper .ant-table-tbody .ant-table-row.ant-table-row-selected >.ant-table-cell {background: #DEF1FB;}\n.ant-table-wrapper .ant-table-pagination.ant-pagination {\n    padding: 16px; margin: 0;\n    border-top: solid 1px #E0E0E0;\n}\n\n/* Custom filter dropdown styles */\n.statusBox {\n  padding: 20px 12px;\n  display: flex;\n  flex-direction: column;\n  gap: 24px;\n}\n\n.statusBox .ant-checkbox-group {\n  display: flex;\n  flex-direction: column;\n  gap: 24px;\n}\n\n.statusBox aside {\n  display: flex;\n  justify-content: space-between;\n  gap: 12px;\n  padding: 8px 0 0;\n}\n\n.statusBox aside button {\n  width: 100% !important;\n}\n\n.statusBox .type-sl1-700 {\n  margin-bottom: 0;\n  color: var(--color-secondary-content);\n  font-weight: 700;\n  font-size: 14px;\n  line-height: 20px;\n}\n"])));
+const StyledTable = exports.StyledTable = (0, _styledComponents.default)(_antd.Table)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  tr > td {\n    vertical-align: top;\n  }\n  .ant-table-row:last-child td {\n    border: none;\n  }\n  .ant-table-row .ant-table-cell,\n  .ant-table-thead .ant-table-cell {\n    padding: 16px !important;\n  }\n  .ant-table-measure-row > td {\n    padding: 0 !important;\n  }\n"])));
+const MainContainer = exports.MainContainer = _styledComponents.default.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  .fullWidthBtn button {\n    width: 100%;\n  }\n  .fullWidthBtn {\n    position: fixed;\n    bottom: 0;\n    left: 0;\n    right: 0;\n    background: #fff;\n    padding: 16px;\n    box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.14);\n  }\n  .secondary:hover {\n    background: transparent;\n    border: 1px solid var(--color-primary);\n    color: var(--color-primary);\n  }\n  .cardStyles {\n    padding: 16px;\n    border-radius: 8px;\n    border: 1px solid var(--color-divider);\n    background: var(--color-primary-background);\n    margin: 0 0 24px;\n    box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.14);\n  }\n\n  .showHideBtn {\n    padding: 8px 0 16px;\n  }\n  .keyValue {\n    display: flex;\n    gap: 12px;\n    margin: 0 0 16px;\n  }\n  .keyValue:last-child {\n    margin: 0;\n  }\n  .keyValue strong,\n  .keyValue span {\n    width: 100%;\n  }\n  .keyValue strong {\n    color: var(--color-primary-content);\n    font-size: 14px;\n    font-weight: 400;\n    line-height: 20px;\n  }\n  .keyValue span {\n    color: var(--color-primary-content);\n    font-size: 14px;\n    font-weight: 400;\n    line-height: 20px;\n  }\n  .srDetails {\n    padding: 0 0 12px;\n    margin: 0 0 16px;\n    border-bottom: 1px solid var(--color-divider);\n  }\n\n  .srDetails span {\n    display: flex;\n    flex-direction: row;\n    gap: 8px;\n    align-items: flex-start;\n    white-space: nowrap;\n  }\n\n  .srDetails .ctaContainer {\n    display: flex;\n    gap: 8px;\n    align-items: center;\n    word-break: break-word;\n    white-space: normal;\n  }\n\n  .srDetails > span > div {\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n  }\n\n  .srDetails > span > .type-sl1-700 {\n    font-size: initial;\n  }\n\n  .srDetails .srValue span {\n    white-space: break-spaces;\n  }\n\n  .footerCta {\n    display: flex;\n    justify-content: end;\n    gap: 16px;\n    padding: 16px 0 0 0;\n    border-top: 1px solid var(--color-divider);\n    width: 100%;\n    align-items: center;\n  }\n\n  .footerCta .ant-dropdown-trigger {\n    margin-bottom: 0;\n  }\n\n  .flexEnd {\n    display: flex;\n    justify-content: end;\n    margin: 0 0 12px;\n  }\n\n  @media only screen and (max-width: 600px) {\n    .keyValue span {\n      word-break: break-word;\n      overflow-wrap: break-word;\n    }\n    .keyValue strong {\n      word-break: break-word;\n      overflow-wrap: break-word;\n    }\n    .mobileViewPagination {\n      display: flex;\n      justify-content: flex-end;\n      margin: 16px 0px;\n    }\n\n    .mobileViewPagination .ant-pagination {\n      padding: 0;\n    }\n  }\n"])));