qbs-react-grid 1.2.2 → 1.2.4

package/lib/qbsTable/utilities/CardMenuDropdown.js

@@ -1,9 +1,11 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 exports.__esModule = true;
 exports["default"] = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _icons = require("./icons");
+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 CardMenuDropdown = function CardMenuDropdown(_ref) {
@@ -61,7 +63,6 @@ var CardMenuDropdown = function CardMenuDropdown(_ref) {
     handleMenuActions === null || handleMenuActions === void 0 ? void 0 : handleMenuActions(item, rowData);
     handleClose();
   };
-  console.log(menuPositionStyles);
   return /*#__PURE__*/_react["default"].createElement("div", {
     className: "dropdown text-black dark:text-white dark:bg-[#424242] bg-white",
     ref: menuRef
@@ -69,25 +70,29 @@ var CardMenuDropdown = function CardMenuDropdown(_ref) {
     className: "dropdown-toggle",
     onClick: toggleMenu,
     ref: menuButtonRef
-  }, /*#__PURE__*/_react["default"].createElement(_icons.ThreeDotIcon, null)), openMenu && /*#__PURE__*/_react["default"].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["default"].createElement(_ToolTip["default"], {
+    title: "Actions",
+    enabled: false,
+    ref: menuButtonRef
+  }, /*#__PURE__*/_react["default"].createElement(_icons.ThreeDotIcon, null))), openMenu && /*#__PURE__*/_react["default"].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["default"].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["default"].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["default"].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["default"].createElement(_react["default"].Fragment, null, item.icon), /*#__PURE__*/_react["default"].createElement("span", {
-      className: "pl-1.5"
+      className: "pl-1.5 no-underline text-sm "
     }, item.title)));
   }))));
 };

package/lib/qbsTable/utilities/SwitchCardColumns.js

@@ -21,10 +21,10 @@ var CustomTableCell = /*#__PURE__*/_react["default"].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 : (0, _handleFormatCell.handleCellFormat)(rowData[dataKey], type)) : path && !(hideLink !== null && hideLink !== void 0 && hideLink(rowData)) ? /*#__PURE__*/_react["default"].createElement(_reactRouterDom.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 : (0, _handleFormatCell.handleCellFormat)(rowData[dataKey], type)) : /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, renderCell ? (_renderCell3 = renderCell(rowData)) === null || _renderCell3 === void 0 ? void 0 : _renderCell3.cell : (0, _handleFormatCell.handleCellFormat)(rowData[dataKey], type)));
 });
 exports.CustomTableCell = CustomTableCell;

package/lib/qbsTable/utilities/ToolTip.js

@@ -16,15 +16,12 @@ var TooltipComponent = function TooltipComponent(_ref) {
   var menuButtonRef = (0, _react.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 {
@@ -44,7 +41,7 @@ var TooltipComponent = function TooltipComponent(_ref) {
     }
   }, children), /*#__PURE__*/_react["default"].createElement("span", {
     ref: dropRef,
-    className: "tooltiptext "
+    className: 'tooltiptext'
   }, title));
 };
 var _default = TooltipComponent;

package/lib/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/lib/qbsTable/utilities/store.js

@@ -0,0 +1,66 @@
+"use strict";
+
+exports.__esModule = true;
+exports.getGridColsClass = exports.getGridColSpanClass = void 0;
+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';
+  }
+};
+exports.getGridColsClass = getGridColsClass;
+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';
+  }
+};
+exports.getGridColSpanClass = getGridColSpanClass;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "qbs-react-grid",
-  "version": "1.2.2",
+  "version": "1.2.4",
   "description": "A React table component",
   "main": "lib/index.js",
   "typings": "lib/index.d.ts",

package/src/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/src/qbsTable/QbsTable.tsx

@@ -84,7 +84,9 @@ const QbsTable: React.FC<QbsTableProps> = ({
   emptySubTitle,
   emptyTitle,
   tableView = true,
-  enableTableToggle = false
+  enableTableToggle = false,
+  cardColumLimit = 5,
+  childDetailHeading = ''
 }) => {
   const [loading, setLoading] = useState(false);
   const [columns, setColumns] = useState(propColumn);
@@ -234,7 +236,7 @@ const QbsTable: React.FC<QbsTableProps> = ({
     searchPlaceholder: searchPlaceholder,
     setTableViewToggle: setTableViewToggle,
     tableViewToggle: tableViewToggle,
-    enableTableToggle : enableTableToggle
+    enableTableToggle: enableTableToggle
   };
   const themeToggle = useMemo(() => document.getElementById('themeToggle') as HTMLInputElement, []);
 
@@ -634,6 +636,8 @@ const QbsTable: React.FC<QbsTableProps> = ({
               <div className="flex flex-col gap-3 p-2" key={items?.id}>
                 <CardComponent
                   data={items}
+                  cardColumLimit={cardColumLimit}
+                  childDetailHeading={childDetailHeading}
                   columns={columns}
                   tableBodyRef={tableBodyRef}
                   actionProps={actionProps}

package/src/qbsTable/Toolbar.tsx

@@ -1,11 +1,11 @@
-import React, { useCallback, useState } from 'react';
+import React, { useCallback, useRef, useState } from 'react';
 
 import { QbsTableToolbarProps } from './commontypes';
 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';
 
 const ToolBar: React.FC<QbsTableToolbarProps> = ({
   pagination,
@@ -30,6 +30,7 @@ const ToolBar: React.FC<QbsTableToolbarProps> = ({
 }) => {
   const debouncedOnSearch = useCallback(debounce(onSearch ?? (() => {}), 1000), [onSearch]);
   const [searchParam, setSearchParam] = useState<string | undefined>(searchValue);
+  const toolbarRef = useRef<HTMLDivElement>(null);
   const handleSearch = useCallback(
     (e?: string) => {
       if (debouncedOnSearch) {
@@ -60,7 +61,7 @@ const ToolBar: React.FC<QbsTableToolbarProps> = ({
     }
   };
   return (
-    <div className="qbs-table-toolbar-container">
+    <div className="qbs-table-toolbar-container" ref={toolbarRef}>
       <div className={`qbs-table-toolbar ${className}`}>
         <div className="start-container" style={{ display: 'flex', justifyContent: 'flex-end' }}>
           <div className="qbs-table-primary-filter">
@@ -76,15 +77,15 @@ const ToolBar: React.FC<QbsTableToolbarProps> = ({
           </div>
         </div>
 
-        <div className="end-container">
+        <div className="end-container flex items-center">
           {tableHeaderActions}
           <div
-            className=" pr-1 cursor-pointer"
+            className=" pr-1 cursor-pointer relative"
             onClick={() => setTableViewToggle?.(!tableViewToggle)}
           >
-            {!enableTableToggle && (
+            {enableTableToggle && (
               <TooltipComponent
-                enabled
+                tableBodyRef={toolbarRef}
                 title={tableViewToggle ? 'Switch to Card View' : 'Switch to Table View'}
               >
                 {!tableViewToggle ? <CardIcon /> : <TableIcon />}

package/src/qbsTable/commontypes.ts

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

package/src/qbsTable/utilities/CardComponent.tsx

@@ -1,9 +1,11 @@
-import React, { useState } from 'react';
+import React, { useState, useRef } from 'react';
 import { QbsColumnProps } from '../commontypes';
 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';
 
 type Props = {
   columns: QbsColumnProps[];
@@ -12,6 +14,8 @@ type Props = {
   actionProps?: any;
   index?: number;
   handleMenuActions?: () => void;
+  cardColumLimit?: number;
+  childDetailHeading?: string;
 };
 
 const CardComponent: React.FC<Props> = ({
@@ -20,81 +24,107 @@ const CardComponent: React.FC<Props> = ({
   tableBodyRef,
   actionProps,
   index,
-  handleMenuActions
+  cardColumLimit = 5,
+  handleMenuActions,
+  childDetailHeading = ''
 }) => {
   const [viewMore, setViewMore] = useState(false);
-  const initialDisplayCount = 5;
+  const initialDisplayCount = cardColumLimit;
 
   const toggleViewMore = () => {
     setViewMore(!viewMore);
   };
-
+  const useCardRef = useRef<HTMLDivElement>(null);
   const displayedColumns = viewMore ? columns : columns.slice(0, initialDisplayCount);
 
   return (
-    <div className="grid grid-cols-5 p-3 gap-3 border-2 border-grey shadow-sm rounded-lg relative qbs-card-container">
-      {displayedColumns.map((col: QbsColumnProps, index: number) => (
-        <div key={index} className="grid col-span-1 place-content-start text-sm qbs-card-column">
-          <p className=" text-grey ">{col.title}</p>
-          {col.customCell || col.link ? (
-            <span
-              className={`qbs-card-column-content mt-1 font-semibold ${
-                !viewMore ? 'line-clamp-1' : ''
-              }`}
-            >
-              <CustomTableCell
-                dataKey={col.field}
-                rowData={data}
-                type={col.type}
-                path={col.getPath}
-                link={col.link}
-                viewMore={viewMore}
-                rowClick={col.rowClick}
-                renderCell={col.renderCell}
-              />
-            </span>
-          ) : (
-            <p
-              className={`mt-1 font-semibold qbs-card-column-content ${
-                !viewMore ? 'line-clamp-1' : ''
-              }`}
-              key={index}
-            >
-              {handleCellFormat(data[col.field], col.type as string)}
-            </p>
-          )}
-        </div>
-      ))}
-      <div
-        className={`qbs-card-column-action absolute  text-blue-500 mt-2 right-2 ${
-          columns.length > initialDisplayCount ? 'top-2' : 'top-4'
-        }  text-xs`}
-      >
+    <div
+      ref={useCardRef}
+      className="p-3 gap-3 border-2 border-grey shadow-sm rounded-lg relative qbs-card-container"
+    >
+      <div className={`grid ${getGridColsClass(initialDisplayCount)} qbs-card-columns`}>
+        {displayedColumns.map((col: QbsColumnProps, index: number) => (
+          <div
+            key={index}
+            className={`grid ${getGridColSpanClass(
+              col.colSpan ?? 1
+            )} place-content-start text-sm qbs-card-column   ${
+              index === initialDisplayCount - 1 ? 'mr-4' : ''
+            } `}
+          >
+            <p className=" text-grey ">{col.title}</p>
+            {col.customCell || col.link ? (
+              <span className={`qbs-card-column-content mt-1   ${!viewMore ? 'line-clamp-1' : ''}`}>
+                <CustomTableCell
+                  dataKey={col.field}
+                  rowData={data}
+                  type={col.type}
+                  path={col.getPath}
+                  link={col.link}
+                  viewMore={viewMore}
+                  rowClick={col.rowClick}
+                  renderCell={col.renderCell}
+                />
+              </span>
+            ) : (
+              <p
+                className={`mt-1  qbs-card-column-content ${!viewMore ? 'line-clamp-1' : ''}`}
+                key={index}
+              >
+                {handleCellFormat(data[col.field], col.type as string)}
+              </p>
+            )}
+          </div>
+        ))}
+
         <div
-          className={`flex  qbs-card-column-action-container
+          className={`qbs-card-column-action absolute  text-blue-500 mt-2 right-2 ${
+            columns.length > initialDisplayCount ? 'top-2' : 'top-4'
+          }  text-xs`}
+        >
+          <div
+            className={`flex  qbs-card-column-action-container
                flex-col   items-center gap-y-2
           `}
-        >
-          <div className="  text-blue-500 qbs-card-column-action-menu ">
-            <CardMenuDropdown
-              tableBodyRef={tableBodyRef}
-              actionDropDown={actionProps}
-              rowData={data}
-              iconName="more"
-              rowIndex={index}
-              handleMenuActions={handleMenuActions}
-            />
+          >
+            <div className="  text-blue-500 qbs-card-column-action-menu ">
+              <CardMenuDropdown
+                tableBodyRef={tableBodyRef}
+                actionDropDown={actionProps}
+                rowData={data}
+                iconName="more"
+                rowIndex={index}
+                handleMenuActions={handleMenuActions}
+              />
+            </div>
+
+            {columns.length > initialDisplayCount && (
+              <TooltipComponent
+                tableBodyRef={useCardRef}
+                title={viewMore ? ' View Less' : 'View More'}
+                enabled={false}
+              >
+                <button
+                  onClick={toggleViewMore}
+                  className=" qbs-card-column-action-menu-view-more justify-end text-blue-500 text-xs"
+                >
+                  <ArrowUpIcon className={`${viewMore ? 'rotate-180' : ''} `} />
+                </button>
+              </TooltipComponent>
+            )}
           </div>
-          {columns.length > initialDisplayCount && (
-            <button
-              onClick={toggleViewMore}
-              className=" qbs-card-column-action-menu-view-more justify-end text-blue-500 text-xs"
-            >
-              <ArrowUpIcon className={`${viewMore ? 'rotate-180' : ''} `} />
-            </button>
-          )}
         </div>
       </div>
+      {viewMore && data?.childDetail && (
+        <div className="mt-4 p-3 border-t border-grey qbs-card-child-detail-container">
+          {childDetailHeading && (
+            <p className=" text-lg qbs-card-child-detail-head font-semibold ">
+              {childDetailHeading}
+            </p>
+          )}
+          {data?.childDetail}
+        </div>
+      )}
     </div>
   );
 };