qbs-react-grid 1.2.2 → 1.2.4

package/es/qbsTable/Toolbar.js

@@ -1,9 +1,9 @@
-import React, { useCallback, useState } from 'react';
+import React, { useCallback, useRef, useState } from 'react';
 import debounce from './utilities/debounce';
+import { CardIcon, TableIcon } from './utilities/icons';
 import SearchInput from './utilities/SearchInput';
 import { getRowDisplayRange } from './utilities/tablecalc';
 import TooltipComponent from './utilities/ToolTip';
-import { CardIcon, TableIcon } from './utilities/icons';
 var ToolBar = function ToolBar(_ref) {
   var _paginationProps$tota, _paginationProps$rows, _paginationProps$curr;
   var pagination = _ref.pagination,
@@ -31,6 +31,7 @@ var ToolBar = function ToolBar(_ref) {
   var _useState = useState(searchValue),
     searchParam = _useState[0],
     setSearchParam = _useState[1];
+  var toolbarRef = useRef(null);
   var handleSearch = useCallback(function (e) {
     if (debouncedOnSearch) {
       debouncedOnSearch(e);
@@ -54,7 +55,8 @@ var ToolBar = function ToolBar(_ref) {
     }
   };
   return /*#__PURE__*/React.createElement("div", {
-    className: "qbs-table-toolbar-container"
+    className: "qbs-table-toolbar-container",
+    ref: toolbarRef
   }, /*#__PURE__*/React.createElement("div", {
     className: "qbs-table-toolbar " + className
   }, /*#__PURE__*/React.createElement("div", {
@@ -71,14 +73,14 @@ var ToolBar = function ToolBar(_ref) {
     handleSearch: handleSearch,
     searchValue: searchParam
   }), primaryFilter)), /*#__PURE__*/React.createElement("div", {
-    className: "end-container"
+    className: "end-container flex items-center"
   }, tableHeaderActions, /*#__PURE__*/React.createElement("div", {
-    className: " pr-1 cursor-pointer",
+    className: " pr-1 cursor-pointer relative",
     onClick: function onClick() {
       return setTableViewToggle === null || setTableViewToggle === void 0 ? void 0 : setTableViewToggle(!tableViewToggle);
     }
-  }, !enableTableToggle && /*#__PURE__*/React.createElement(TooltipComponent, {
-    enabled: true,
+  }, enableTableToggle && /*#__PURE__*/React.createElement(TooltipComponent, {
+    tableBodyRef: toolbarRef,
     title: tableViewToggle ? 'Switch to Card View' : 'Switch to Table View'
   }, !tableViewToggle ? /*#__PURE__*/React.createElement(CardIcon, null) : /*#__PURE__*/React.createElement(TableIcon, null))))), advancefilter && /*#__PURE__*/React.createElement("div", {
     className: "sub-qbs-table-toolbar"

package/es/qbsTable/commontypes.d.ts

@@ -8,6 +8,7 @@ export interface ColumnBase {
     field: string;
     sortable?: boolean;
     resizable?: boolean;
+    colSpan?: number;
     fixed?: boolean;
     align?: 'left' | 'right' | 'center';
     colWidth?: number;
@@ -121,6 +122,8 @@ export interface QbsTableProps {
     emptyTitle?: string;
     enableTableToggle?: boolean;
     tableView?: boolean;
+    cardColumLimit?: number;
+    childDetailHeading?: string;
 }
 export interface QbsTableToolbarProps {
     title?: string;

package/es/qbsTable/utilities/CardComponent.d.ts

@@ -7,6 +7,8 @@ type Props = {
     actionProps?: any;
     index?: number;
     handleMenuActions?: () => void;
+    cardColumLimit?: number;
+    childDetailHeading?: string;
 };
 declare const CardComponent: React.FC<Props>;
 export default CardComponent;

package/es/qbsTable/utilities/CardComponent.js

@@ -1,33 +1,44 @@
-import React, { useState } from 'react';
+import React, { useState, useRef } from 'react';
 import CardMenuDropdown from './CardMenuDropdown';
 import { CustomTableCell } from './SwitchCardColumns';
 import { handleCellFormat } from './handleFormatCell';
 import { ArrowUpIcon } from './icons';
+import { getGridColsClass, getGridColSpanClass } from './store';
+import TooltipComponent from './ToolTip';
 var CardComponent = function CardComponent(_ref) {
   var columns = _ref.columns,
     data = _ref.data,
     tableBodyRef = _ref.tableBodyRef,
     actionProps = _ref.actionProps,
     index = _ref.index,
-    handleMenuActions = _ref.handleMenuActions;
+    _ref$cardColumLimit = _ref.cardColumLimit,
+    cardColumLimit = _ref$cardColumLimit === void 0 ? 5 : _ref$cardColumLimit,
+    handleMenuActions = _ref.handleMenuActions,
+    _ref$childDetailHeadi = _ref.childDetailHeading,
+    childDetailHeading = _ref$childDetailHeadi === void 0 ? '' : _ref$childDetailHeadi;
   var _useState = useState(false),
     viewMore = _useState[0],
     setViewMore = _useState[1];
-  var initialDisplayCount = 5;
+  var initialDisplayCount = cardColumLimit;
   var toggleViewMore = function toggleViewMore() {
     setViewMore(!viewMore);
   };
+  var useCardRef = useRef(null);
   var displayedColumns = viewMore ? columns : columns.slice(0, initialDisplayCount);
   return /*#__PURE__*/React.createElement("div", {
-    className: "grid grid-cols-5 p-3 gap-3 border-2 border-grey shadow-sm rounded-lg relative qbs-card-container"
+    ref: useCardRef,
+    className: "p-3 gap-3 border-2 border-grey shadow-sm rounded-lg relative qbs-card-container"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "grid " + getGridColsClass(initialDisplayCount) + " qbs-card-columns"
   }, displayedColumns.map(function (col, index) {
+    var _col$colSpan;
     return /*#__PURE__*/React.createElement("div", {
       key: index,
-      className: "grid col-span-1 place-content-start text-sm qbs-card-column"
+      className: "grid " + getGridColSpanClass((_col$colSpan = col.colSpan) != null ? _col$colSpan : 1) + " place-content-start text-sm qbs-card-column   " + (index === initialDisplayCount - 1 ? 'mr-4' : '') + " "
     }, /*#__PURE__*/React.createElement("p", {
       className: " text-grey "
     }, col.title), col.customCell || col.link ? /*#__PURE__*/React.createElement("span", {
-      className: "qbs-card-column-content mt-1 font-semibold " + (!viewMore ? 'line-clamp-1' : '')
+      className: "qbs-card-column-content mt-1   " + (!viewMore ? 'line-clamp-1' : '')
     }, /*#__PURE__*/React.createElement(CustomTableCell, {
       dataKey: col.field,
       rowData: data,
@@ -38,7 +49,7 @@ var CardComponent = function CardComponent(_ref) {
       rowClick: col.rowClick,
       renderCell: col.renderCell
     })) : /*#__PURE__*/React.createElement("p", {
-      className: "mt-1 font-semibold qbs-card-column-content " + (!viewMore ? 'line-clamp-1' : ''),
+      className: "mt-1  qbs-card-column-content " + (!viewMore ? 'line-clamp-1' : ''),
       key: index
     }, handleCellFormat(data[col.field], col.type)));
   }), /*#__PURE__*/React.createElement("div", {
@@ -54,11 +65,19 @@ var CardComponent = function CardComponent(_ref) {
     iconName: "more",
     rowIndex: index,
     handleMenuActions: handleMenuActions
-  })), columns.length > initialDisplayCount && /*#__PURE__*/React.createElement("button", {
+  })), columns.length > initialDisplayCount && /*#__PURE__*/React.createElement(TooltipComponent, {
+    tableBodyRef: useCardRef,
+    title: viewMore ? ' View Less' : 'View More',
+    enabled: false
+  }, /*#__PURE__*/React.createElement("button", {
     onClick: toggleViewMore,
     className: " qbs-card-column-action-menu-view-more justify-end text-blue-500 text-xs"
   }, /*#__PURE__*/React.createElement(ArrowUpIcon, {
     className: (viewMore ? 'rotate-180' : '') + " "
-  })))));
+  })))))), viewMore && (data === null || data === void 0 ? void 0 : data.childDetail) && /*#__PURE__*/React.createElement("div", {
+    className: "mt-4 p-3 border-t border-grey qbs-card-child-detail-container"
+  }, childDetailHeading && /*#__PURE__*/React.createElement("p", {
+    className: " text-lg qbs-card-child-detail-head font-semibold "
+  }, childDetailHeading), data === null || data === void 0 ? void 0 : data.childDetail));
 };
 export default CardComponent;

package/es/qbsTable/utilities/CardMenuDropdown.js

@@ -1,6 +1,7 @@
 import { useEffect, useRef, useState } from 'react';
 import React from 'react';
 import { ThreeDotIcon } from './icons';
+import TooltipComponent from './ToolTip';
 var CardMenuDropdown = function CardMenuDropdown(_ref) {
   var actionDropDown = _ref.actionDropDown,
     handleMenuActions = _ref.handleMenuActions,
@@ -56,7 +57,6 @@ var CardMenuDropdown = function CardMenuDropdown(_ref) {
     handleMenuActions === null || handleMenuActions === void 0 ? void 0 : handleMenuActions(item, rowData);
     handleClose();
   };
-  console.log(menuPositionStyles);
   return /*#__PURE__*/React.createElement("div", {
     className: "dropdown text-black dark:text-white dark:bg-[#424242] bg-white",
     ref: menuRef
@@ -64,25 +64,29 @@ var CardMenuDropdown = function CardMenuDropdown(_ref) {
     className: "dropdown-toggle",
     onClick: toggleMenu,
     ref: menuButtonRef
-  }, /*#__PURE__*/React.createElement(ThreeDotIcon, null)), openMenu && /*#__PURE__*/React.createElement("div", {
-    className: " qbs-card-dropdown rounded absolute right-0 mt-2 w-56 z-10 shadow-modalShadow bg-white dark:bg-[#424242] dark:text-white",
+  }, /*#__PURE__*/React.createElement(TooltipComponent, {
+    title: "Actions",
+    enabled: false,
+    ref: menuButtonRef
+  }, /*#__PURE__*/React.createElement(ThreeDotIcon, null))), openMenu && /*#__PURE__*/React.createElement("div", {
+    className: " qbs-card-dropdown rounded absolute right-0 mt-2 w-auto min-w-11 z-10 shadow-modalShadow bg-white dark:bg-[#424242] dark:text-white",
     style: menuPositionStyles
   }, /*#__PURE__*/React.createElement("div", {
-    className: "qbs-card-dropdown-menu px-2 bg-white rounded w-full border border-grey-border shadow-menudropdown dark:bg-[#424242] dark:text-white"
+    className: "qbs-card-dropdown-menu px-2 bg-white rounded w-full border border-grey-border shadow-lg shadow-menudropdown dark:bg-[#424242] dark:text-white"
   }, actionDropDown === null || actionDropDown === void 0 ? void 0 : actionDropDown.map(function (item) {
     return !item.hidden && /*#__PURE__*/React.createElement("a", {
       key: item.title,
       href: "#/",
-      className: 'px-2  hover:bg-background ',
+      className: 'px-1  hover:bg-background no-underline whitespace-nowrap ',
       onClick: function onClick(e) {
         e.preventDefault();
         e.stopPropagation();
         handleMenuItemClick(item);
       }
     }, /*#__PURE__*/React.createElement("div", {
-      className: " qbs-card-dropdown-menu-item " + (item.isWarning ? 'text-error-light' : 'text-black dark:text-white') + " text-xxs flex items-center w-full tracking-[0.24px] font-medium "
+      className: " qbs-card-dropdown-menu-item no-underline " + (item.isWarning ? 'text-error-light' : ' text-black/70  dark:text-white') + " text-xxs flex items-center w-full tracking-[0.24px] font-medium "
     }, (item === null || item === void 0 ? void 0 : item.icon) && /*#__PURE__*/React.createElement(React.Fragment, null, item.icon), /*#__PURE__*/React.createElement("span", {
-      className: "pl-1.5"
+      className: "pl-1.5 no-underline text-sm "
     }, item.title)));
   }))));
 };

package/es/qbsTable/utilities/SwitchCardColumns.js

@@ -16,9 +16,9 @@ export var CustomTableCell = /*#__PURE__*/React.memo(function (_ref) {
     onClick: function onClick() {
       return rowClick === null || rowClick === void 0 ? void 0 : rowClick(rowData);
     },
-    className: "qbs-table-row-link " + (!viewMore ? 'line-clamp-1' : '')
+    className: "qbs-table-row-link no-underline   " + (!viewMore ? 'line-clamp-1' : '')
   }, renderCell ? (_renderCell = renderCell(rowData)) === null || _renderCell === void 0 ? void 0 : _renderCell.cell : handleCellFormat(rowData[dataKey], type)) : path && !(hideLink !== null && hideLink !== void 0 && hideLink(rowData)) ? /*#__PURE__*/React.createElement(Link, {
     to: (_path = path === null || path === void 0 ? void 0 : path(rowData)) != null ? _path : '',
-    className: "qbs-table-row-link " + (!viewMore ? 'line-clamp-1' : '')
+    className: "qbs-table-row-link no-underline " + (!viewMore ? 'line-clamp-1' : '')
   }, renderCell ? (_renderCell2 = renderCell(rowData)) === null || _renderCell2 === void 0 ? void 0 : _renderCell2.cell : handleCellFormat(rowData[dataKey], type)) : /*#__PURE__*/React.createElement(React.Fragment, null, renderCell ? (_renderCell3 = renderCell(rowData)) === null || _renderCell3 === void 0 ? void 0 : _renderCell3.cell : handleCellFormat(rowData[dataKey], type)));
 });

package/es/qbsTable/utilities/ToolTip.js

@@ -10,15 +10,12 @@ var TooltipComponent = function TooltipComponent(_ref) {
   var menuButtonRef = useRef(null);
   var adjustDropdownPosition = function adjustDropdownPosition() {
     if (menuButtonRef.current && tableBodyRef !== null && tableBodyRef !== void 0 && tableBodyRef.current) {
-      var _menuButtonRef$curren, _tableBodyRef$current, _tableBodyRef$current2;
+      var _menuButtonRef$curren;
       var inputBoxRect = (_menuButtonRef$curren = menuButtonRef.current) === null || _menuButtonRef$curren === void 0 ? void 0 : _menuButtonRef$curren.getBoundingClientRect();
-      var viewportHeight = (_tableBodyRef$current = tableBodyRef === null || tableBodyRef === void 0 ? void 0 : (_tableBodyRef$current2 = tableBodyRef.current) === null || _tableBodyRef$current2 === void 0 ? void 0 : _tableBodyRef$current2.offsetHeight) != null ? _tableBodyRef$current : window.innerHeight;
       var tableRect = tableBodyRef.current.getBoundingClientRect();
-
       // Calculate positions relative to the table
       var spaceAbove = inputBoxRect.top - tableRect.top;
       var spaceBelow = tableRect.bottom - inputBoxRect.bottom;
-      console.log(viewportHeight, spaceAbove, spaceBelow);
       if (spaceAbove > spaceBelow) {
         setDropdownPosition('top-position');
       } else {
@@ -38,7 +35,7 @@ var TooltipComponent = function TooltipComponent(_ref) {
     }
   }, children), /*#__PURE__*/React.createElement("span", {
     ref: dropRef,
-    className: "tooltiptext "
+    className: 'tooltiptext'
   }, title));
 };
 export default TooltipComponent;

package/es/qbsTable/utilities/store.d.ts

@@ -0,0 +1,2 @@
+export declare const getGridColsClass: (count: number) => "grid-cols-1" | "grid-cols-2" | "grid-cols-3" | "grid-cols-4" | "grid-cols-5" | "grid-cols-6" | "grid-cols-7" | "grid-cols-8" | "grid-cols-9" | "grid-cols-10" | "grid-cols-11" | "grid-cols-12";
+export declare const getGridColSpanClass: (count: number) => "col-span-1" | "col-span-2" | "col-span-3" | "col-span-4" | "col-span-5" | "col-span--6" | "col-span--7" | "col-span--8" | "col-span--9" | "col-span--10" | "col-span--11" | "col-span--12" | "col-span--1";

package/es/qbsTable/utilities/store.js

@@ -0,0 +1,60 @@
+export var getGridColsClass = function getGridColsClass(count) {
+  switch (count) {
+    case 1:
+      return 'grid-cols-1';
+    case 2:
+      return 'grid-cols-2';
+    case 3:
+      return 'grid-cols-3';
+    case 4:
+      return 'grid-cols-4';
+    case 5:
+      return 'grid-cols-5';
+    case 6:
+      return 'grid-cols-6';
+    case 7:
+      return 'grid-cols-7';
+    case 8:
+      return 'grid-cols-8';
+    case 9:
+      return 'grid-cols-9';
+    case 10:
+      return 'grid-cols-10';
+    case 11:
+      return 'grid-cols-11';
+    case 12:
+      return 'grid-cols-12';
+    default:
+      return 'grid-cols-1';
+  }
+};
+export var getGridColSpanClass = function getGridColSpanClass(count) {
+  switch (count) {
+    case 1:
+      return 'col-span-1';
+    case 2:
+      return 'col-span-2';
+    case 3:
+      return 'col-span-3';
+    case 4:
+      return 'col-span-4';
+    case 5:
+      return 'col-span-5';
+    case 6:
+      return 'col-span--6';
+    case 7:
+      return 'col-span--7';
+    case 8:
+      return 'col-span--8';
+    case 9:
+      return 'col-span--9';
+    case 10:
+      return 'col-span--10';
+    case 11:
+      return 'col-span--11';
+    case 12:
+      return 'col-span--12';
+    default:
+      return 'col-span--1';
+  }
+};

package/lib/less/qbs-table.less

@@ -180,16 +180,77 @@
   transition: all 0.2s ease;
 }
 /* Tooltip container */
+// .qbs-table-tooltip {
+//   position: relative;
+//   display: contents;
+//   cursor: pointer;
+// }
+
+// .qbs-table-tooltip .tooltiptext {
+//   visibility: hidden;
+//   background-color: #000;
+//   color: #fff;
+//   text-align: center;
+//   padding: 6px;
+//   border-radius: 4px;
+//   position: absolute;
+//   z-index: 9999;
+//   opacity: 0;
+//   transition: opacity 0.3s;
+//   font-size: 12px;
+//   font-style: normal;
+//   font-weight: 400;
+//   line-height: 16px;
+//   width: 100px;
+// }
+
+// .qbs-table-tooltip.up .tooltiptext {
+//   bottom: 125%;
+//   left: 0%;
+// }
+
+// .qbs-table-tooltip.down .tooltiptext {
+//   top: 125%;
+//   right: 0px;
+//   left: auto;
+// }
+
+// .qbs-table-tooltip:hover .tooltiptext {
+//   visibility: visible;
+//   opacity: 1;
+// }
+
+// .qbs-table-tooltip .tooltiptext::after {
+//   content: '';
+//   position: absolute;
+//   border-width: 5px;
+//   border-style: solid;
+// }
+
+// .qbs-table-tooltip.up .tooltiptext::after {
+//   top: 100%;
+//   left: 50%;
+//   margin-left: -5px;
+//   border-color: #000 transparent transparent transparent;
+// }
+
+// .qbs-table-tooltip.down .tooltiptext::after {
+//   bottom: 100%;
+//   left: 50%;
+//   margin-left: -5px;
+//   border-color: transparent transparent #000 transparent;
+// }
 .qbs-table-tooltip {
-  position: relative;
-  display: contents;
   cursor: pointer;
+  position: relative;
+  width: auto;
+  display: flex;
 }
 
 .qbs-table-tooltip .tooltiptext {
   visibility: hidden;
-  background-color: #000;
-  color: #fff;
+  background-color: black;
+  color: white;
   text-align: center;
   padding: 6px;
   border-radius: 4px;
@@ -205,20 +266,20 @@
 }
 
 .qbs-table-tooltip.up .tooltiptext {
-  bottom: 125%;
-  left: 0%;
+  bottom: calc(100% + 10px);
+  right: -8px;
+  left: unset;
 }
 
 .qbs-table-tooltip.down .tooltiptext {
-  top: 125%;
-  right: 0px;
-  left: auto;
+  right: -10px;
+  top: calc(100% + 8px);
 }
 
-.qbs-table-tooltip:hover .tooltiptext {
-  visibility: visible;
-  opacity: 1;
-}
+// .qbs-table-tooltip:hover .tooltiptext {
+//   visibility: visible;
+//   opacity: 1;
+// }
 
 .qbs-table-tooltip .tooltiptext::after {
   content: '';
@@ -228,19 +289,25 @@
 }
 
 .qbs-table-tooltip.up .tooltiptext::after {
-  top: 100%;
-  left: 50%;
-  margin-left: -5px;
-  border-color: #000 transparent transparent transparent;
+  border-color: black transparent transparent !important;
+  right: 12px !important;
+  margin-left: -5px !important;
+  top: 100% !important;
+  left: unset !important;
 }
 
 .qbs-table-tooltip.down .tooltiptext::after {
-  bottom: 100%;
-  left: 50%;
-  margin-left: -5px;
-  border-color: transparent transparent #000 transparent;
+  border-color: transparent transparent black;
+  bottom: 100% !important;
+  right: 12px !important;
+  margin-left: -5px !important;
+  left: unset !important;
+}
+.qbs-table-tooltip.down .tooltiptext {
+  top: 145% !important;
+  right: -10px !important;
+  left: auto !important;
 }
-
 .rs-table-row {
   overflow: visible !important;
 }

package/lib/qbsTable/QbsTable.js

@@ -102,7 +102,11 @@ var QbsTable = function QbsTable(_ref) {
     _ref$tableView = _ref.tableView,
     tableView = _ref$tableView === void 0 ? true : _ref$tableView,
     _ref$enableTableToggl = _ref.enableTableToggle,
-    enableTableToggle = _ref$enableTableToggl === void 0 ? false : _ref$enableTableToggl;
+    enableTableToggle = _ref$enableTableToggl === void 0 ? false : _ref$enableTableToggl,
+    _ref$cardColumLimit = _ref.cardColumLimit,
+    cardColumLimit = _ref$cardColumLimit === void 0 ? 5 : _ref$cardColumLimit,
+    _ref$childDetailHeadi = _ref.childDetailHeading,
+    childDetailHeading = _ref$childDetailHeadi === void 0 ? '' : _ref$childDetailHeadi;
   var _useState = (0, _react.useState)(false),
     loading = _useState[0],
     setLoading = _useState[1];
@@ -582,6 +586,8 @@ var QbsTable = function QbsTable(_ref) {
       key: items === null || items === void 0 ? void 0 : items.id
     }, /*#__PURE__*/_react["default"].createElement(_CardComponent["default"], {
       data: items,
+      cardColumLimit: cardColumLimit,
+      childDetailHeading: childDetailHeading,
       columns: columns,
       tableBodyRef: tableBodyRef,
       actionProps: actionProps

package/lib/qbsTable/Toolbar.js

@@ -5,10 +5,10 @@ exports.__esModule = true;
 exports["default"] = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _debounce = _interopRequireDefault(require("./utilities/debounce"));
+var _icons = require("./utilities/icons");
 var _SearchInput = _interopRequireDefault(require("./utilities/SearchInput"));
 var _tablecalc = require("./utilities/tablecalc");
 var _ToolTip = _interopRequireDefault(require("./utilities/ToolTip"));
-var _icons = require("./utilities/icons");
 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; }
 var ToolBar = function ToolBar(_ref) {
@@ -38,6 +38,7 @@ var ToolBar = function ToolBar(_ref) {
   var _useState = (0, _react.useState)(searchValue),
     searchParam = _useState[0],
     setSearchParam = _useState[1];
+  var toolbarRef = (0, _react.useRef)(null);
   var handleSearch = (0, _react.useCallback)(function (e) {
     if (debouncedOnSearch) {
       debouncedOnSearch(e);
@@ -61,7 +62,8 @@ var ToolBar = function ToolBar(_ref) {
     }
   };
   return /*#__PURE__*/_react["default"].createElement("div", {
-    className: "qbs-table-toolbar-container"
+    className: "qbs-table-toolbar-container",
+    ref: toolbarRef
   }, /*#__PURE__*/_react["default"].createElement("div", {
     className: "qbs-table-toolbar " + className
   }, /*#__PURE__*/_react["default"].createElement("div", {
@@ -78,14 +80,14 @@ var ToolBar = function ToolBar(_ref) {
     handleSearch: handleSearch,
     searchValue: searchParam
   }), primaryFilter)), /*#__PURE__*/_react["default"].createElement("div", {
-    className: "end-container"
+    className: "end-container flex items-center"
   }, tableHeaderActions, /*#__PURE__*/_react["default"].createElement("div", {
-    className: " pr-1 cursor-pointer",
+    className: " pr-1 cursor-pointer relative",
     onClick: function onClick() {
       return setTableViewToggle === null || setTableViewToggle === void 0 ? void 0 : setTableViewToggle(!tableViewToggle);
     }
-  }, !enableTableToggle && /*#__PURE__*/_react["default"].createElement(_ToolTip["default"], {
-    enabled: true,
+  }, enableTableToggle && /*#__PURE__*/_react["default"].createElement(_ToolTip["default"], {
+    tableBodyRef: toolbarRef,
     title: tableViewToggle ? 'Switch to Card View' : 'Switch to Table View'
   }, !tableViewToggle ? /*#__PURE__*/_react["default"].createElement(_icons.CardIcon, null) : /*#__PURE__*/_react["default"].createElement(_icons.TableIcon, null))))), advancefilter && /*#__PURE__*/_react["default"].createElement("div", {
     className: "sub-qbs-table-toolbar"

package/lib/qbsTable/commontypes.d.ts

@@ -8,6 +8,7 @@ export interface ColumnBase {
     field: string;
     sortable?: boolean;
     resizable?: boolean;
+    colSpan?: number;
     fixed?: boolean;
     align?: 'left' | 'right' | 'center';
     colWidth?: number;
@@ -121,6 +122,8 @@ export interface QbsTableProps {
     emptyTitle?: string;
     enableTableToggle?: boolean;
     tableView?: boolean;
+    cardColumLimit?: number;
+    childDetailHeading?: string;
 }
 export interface QbsTableToolbarProps {
     title?: string;

package/lib/qbsTable/utilities/CardComponent.d.ts

@@ -7,6 +7,8 @@ type Props = {
     actionProps?: any;
     index?: number;
     handleMenuActions?: () => void;
+    cardColumLimit?: number;
+    childDetailHeading?: string;
 };
 declare const CardComponent: React.FC<Props>;
 export default CardComponent;

package/lib/qbsTable/utilities/CardComponent.js

@@ -8,6 +8,8 @@ var _CardMenuDropdown = _interopRequireDefault(require("./CardMenuDropdown"));
 var _SwitchCardColumns = require("./SwitchCardColumns");
 var _handleFormatCell = require("./handleFormatCell");
 var _icons = require("./icons");
+var _store = require("./store");
+var _ToolTip = _interopRequireDefault(require("./ToolTip"));
 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; }
 var CardComponent = function CardComponent(_ref) {
@@ -16,25 +18,34 @@ var CardComponent = function CardComponent(_ref) {
     tableBodyRef = _ref.tableBodyRef,
     actionProps = _ref.actionProps,
     index = _ref.index,
-    handleMenuActions = _ref.handleMenuActions;
+    _ref$cardColumLimit = _ref.cardColumLimit,
+    cardColumLimit = _ref$cardColumLimit === void 0 ? 5 : _ref$cardColumLimit,
+    handleMenuActions = _ref.handleMenuActions,
+    _ref$childDetailHeadi = _ref.childDetailHeading,
+    childDetailHeading = _ref$childDetailHeadi === void 0 ? '' : _ref$childDetailHeadi;
   var _useState = (0, _react.useState)(false),
     viewMore = _useState[0],
     setViewMore = _useState[1];
-  var initialDisplayCount = 5;
+  var initialDisplayCount = cardColumLimit;
   var toggleViewMore = function toggleViewMore() {
     setViewMore(!viewMore);
   };
+  var useCardRef = (0, _react.useRef)(null);
   var displayedColumns = viewMore ? columns : columns.slice(0, initialDisplayCount);
   return /*#__PURE__*/_react["default"].createElement("div", {
-    className: "grid grid-cols-5 p-3 gap-3 border-2 border-grey shadow-sm rounded-lg relative qbs-card-container"
+    ref: useCardRef,
+    className: "p-3 gap-3 border-2 border-grey shadow-sm rounded-lg relative qbs-card-container"
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    className: "grid " + (0, _store.getGridColsClass)(initialDisplayCount) + " qbs-card-columns"
   }, displayedColumns.map(function (col, index) {
+    var _col$colSpan;
     return /*#__PURE__*/_react["default"].createElement("div", {
       key: index,
-      className: "grid col-span-1 place-content-start text-sm qbs-card-column"
+      className: "grid " + (0, _store.getGridColSpanClass)((_col$colSpan = col.colSpan) != null ? _col$colSpan : 1) + " place-content-start text-sm qbs-card-column   " + (index === initialDisplayCount - 1 ? 'mr-4' : '') + " "
     }, /*#__PURE__*/_react["default"].createElement("p", {
       className: " text-grey "
     }, col.title), col.customCell || col.link ? /*#__PURE__*/_react["default"].createElement("span", {
-      className: "qbs-card-column-content mt-1 font-semibold " + (!viewMore ? 'line-clamp-1' : '')
+      className: "qbs-card-column-content mt-1   " + (!viewMore ? 'line-clamp-1' : '')
     }, /*#__PURE__*/_react["default"].createElement(_SwitchCardColumns.CustomTableCell, {
       dataKey: col.field,
       rowData: data,
@@ -45,7 +56,7 @@ var CardComponent = function CardComponent(_ref) {
       rowClick: col.rowClick,
       renderCell: col.renderCell
     })) : /*#__PURE__*/_react["default"].createElement("p", {
-      className: "mt-1 font-semibold qbs-card-column-content " + (!viewMore ? 'line-clamp-1' : ''),
+      className: "mt-1  qbs-card-column-content " + (!viewMore ? 'line-clamp-1' : ''),
       key: index
     }, (0, _handleFormatCell.handleCellFormat)(data[col.field], col.type)));
   }), /*#__PURE__*/_react["default"].createElement("div", {
@@ -61,12 +72,20 @@ var CardComponent = function CardComponent(_ref) {
     iconName: "more",
     rowIndex: index,
     handleMenuActions: handleMenuActions
-  })), columns.length > initialDisplayCount && /*#__PURE__*/_react["default"].createElement("button", {
+  })), columns.length > initialDisplayCount && /*#__PURE__*/_react["default"].createElement(_ToolTip["default"], {
+    tableBodyRef: useCardRef,
+    title: viewMore ? ' View Less' : 'View More',
+    enabled: false
+  }, /*#__PURE__*/_react["default"].createElement("button", {
     onClick: toggleViewMore,
     className: " qbs-card-column-action-menu-view-more justify-end text-blue-500 text-xs"
   }, /*#__PURE__*/_react["default"].createElement(_icons.ArrowUpIcon, {
     className: (viewMore ? 'rotate-180' : '') + " "
-  })))));
+  })))))), viewMore && (data === null || data === void 0 ? void 0 : data.childDetail) && /*#__PURE__*/_react["default"].createElement("div", {
+    className: "mt-4 p-3 border-t border-grey qbs-card-child-detail-container"
+  }, childDetailHeading && /*#__PURE__*/_react["default"].createElement("p", {
+    className: " text-lg qbs-card-child-detail-head font-semibold "
+  }, childDetailHeading), data === null || data === void 0 ? void 0 : data.childDetail));
 };
 var _default = CardComponent;
 exports["default"] = _default;