qbs-react-grid 1.2.1 → 1.2.2

package/es/qbsTable/utilities/CardComponent.js

@@ -0,0 +1,64 @@
+import React, { useState } from 'react';
+import CardMenuDropdown from './CardMenuDropdown';
+import { CustomTableCell } from './SwitchCardColumns';
+import { handleCellFormat } from './handleFormatCell';
+import { ArrowUpIcon } from './icons';
+var CardComponent = function CardComponent(_ref) {
+  var columns = _ref.columns,
+    data = _ref.data,
+    tableBodyRef = _ref.tableBodyRef,
+    actionProps = _ref.actionProps,
+    index = _ref.index,
+    handleMenuActions = _ref.handleMenuActions;
+  var _useState = useState(false),
+    viewMore = _useState[0],
+    setViewMore = _useState[1];
+  var initialDisplayCount = 5;
+  var toggleViewMore = function toggleViewMore() {
+    setViewMore(!viewMore);
+  };
+  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"
+  }, displayedColumns.map(function (col, index) {
+    return /*#__PURE__*/React.createElement("div", {
+      key: index,
+      className: "grid col-span-1 place-content-start text-sm qbs-card-column"
+    }, /*#__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' : '')
+    }, /*#__PURE__*/React.createElement(CustomTableCell, {
+      dataKey: col.field,
+      rowData: data,
+      type: col.type,
+      path: col.getPath,
+      link: col.link,
+      viewMore: viewMore,
+      rowClick: col.rowClick,
+      renderCell: col.renderCell
+    })) : /*#__PURE__*/React.createElement("p", {
+      className: "mt-1 font-semibold qbs-card-column-content " + (!viewMore ? 'line-clamp-1' : ''),
+      key: index
+    }, handleCellFormat(data[col.field], col.type)));
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "qbs-card-column-action absolute  text-blue-500 mt-2 right-2 " + (columns.length > initialDisplayCount ? 'top-2' : 'top-4') + "  text-xs"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "flex  qbs-card-column-action-container\n               flex-col   items-center gap-y-2\n          "
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "  text-blue-500 qbs-card-column-action-menu "
+  }, /*#__PURE__*/React.createElement(CardMenuDropdown, {
+    tableBodyRef: tableBodyRef,
+    actionDropDown: actionProps,
+    rowData: data,
+    iconName: "more",
+    rowIndex: index,
+    handleMenuActions: handleMenuActions
+  })), columns.length > initialDisplayCount && /*#__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' : '') + " "
+  })))));
+};
+export default CardComponent;

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

@@ -0,0 +1,13 @@
+import React from 'react';
+import { ActionProps } from '../commontypes';
+type Props = {
+    iconName: string;
+    actionDropDown: ActionProps[];
+    handleMenuActions?: (slug: ActionProps, rowData?: any) => void;
+    rowData?: any;
+    dataTheme?: string;
+    tableBodyRef: React.RefObject<HTMLDivElement>;
+    rowIndex?: number;
+};
+declare const CardMenuDropdown: React.FC<Props>;
+export default CardMenuDropdown;

package/es/qbsTable/utilities/CardMenuDropdown.js

@@ -0,0 +1,89 @@
+import { useEffect, useRef, useState } from 'react';
+import React from 'react';
+import { ThreeDotIcon } from './icons';
+var CardMenuDropdown = function CardMenuDropdown(_ref) {
+  var actionDropDown = _ref.actionDropDown,
+    handleMenuActions = _ref.handleMenuActions,
+    rowData = _ref.rowData;
+  var _useState = useState(false),
+    openMenu = _useState[0],
+    setOpenMenu = _useState[1];
+  var _useState2 = useState({}),
+    menuPositionStyles = _useState2[0],
+    setMenuPositionStyles = _useState2[1];
+  var menuButtonRef = useRef(null);
+  var menuRef = useRef(null);
+  useEffect(function () {
+    var handleClickOutside = function handleClickOutside(event) {
+      if (menuRef.current && !menuRef.current.contains(event.target)) {
+        setOpenMenu(false);
+      }
+    };
+    document.addEventListener('click', handleClickOutside);
+    return function () {
+      document.removeEventListener('click', handleClickOutside);
+    };
+  }, []);
+  var toggleMenu = function toggleMenu() {
+    setOpenMenu(function (prevState) {
+      if (!prevState && menuButtonRef.current) {
+        var buttonRect = menuButtonRef.current.getBoundingClientRect();
+        var dropdownHeight = 200; // Adjust this if your dropdown height varies
+        var spaceBelow = window.innerHeight - buttonRect.bottom;
+        var spaceAbove = buttonRect.top;
+        console.log(spaceAbove, spaceBelow, dropdownHeight);
+        if (spaceBelow < dropdownHeight && spaceAbove > spaceBelow) {
+          setMenuPositionStyles({
+            bottom: '30px',
+            right: '10px'
+          });
+        } else {
+          setMenuPositionStyles({
+            top: buttonRect.height + "px",
+            right: '10px'
+          });
+        }
+      }
+      return !prevState;
+    });
+  };
+  var handleClose = function handleClose() {
+    setOpenMenu(false);
+  };
+  var handleMenuItemClick = function handleMenuItemClick(item) {
+    var _item$action;
+    (_item$action = item.action) === null || _item$action === void 0 ? void 0 : _item$action.call(item, item);
+    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
+  }, /*#__PURE__*/React.createElement("button", {
+    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",
+    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"
+  }, 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 ',
+      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 "
+    }, (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"
+    }, item.title)));
+  }))));
+};
+export default CardMenuDropdown;

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

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const CustomTableCell: React.FC<any>;

package/es/qbsTable/utilities/SwitchCardColumns.js

@@ -0,0 +1,24 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+import { handleCellFormat } from './handleFormatCell';
+export var CustomTableCell = /*#__PURE__*/React.memo(function (_ref) {
+  var _renderCell, _path, _renderCell2, _renderCell3;
+  var rowData = _ref.rowData,
+    renderCell = _ref.renderCell,
+    hideLink = _ref.hideLink,
+    dataKey = _ref.dataKey,
+    rowClick = _ref.rowClick,
+    type = _ref.type,
+    path = _ref.path,
+    link = _ref.link,
+    viewMore = _ref.viewMore;
+  return /*#__PURE__*/React.createElement(React.Fragment, null, link && !path && !(hideLink !== null && hideLink !== void 0 && hideLink(rowData)) ? /*#__PURE__*/React.createElement("a", {
+    onClick: function onClick() {
+      return rowClick === null || rowClick === void 0 ? void 0 : rowClick(rowData);
+    },
+    className: "qbs-table-row-link " + (!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' : '')
+  }, 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/icons.d.ts

@@ -1,3 +1,6 @@
 import React from 'react';
 export declare const ThreeDotIcon: React.FC<any>;
 export declare const SettingsIcon: React.FC<any>;
+export declare const ArrowUpIcon: React.FC<any>;
+export declare const TableIcon: React.FC<any>;
+export declare const CardIcon: React.FC<any>;

package/es/qbsTable/utilities/icons.js

@@ -36,4 +36,49 @@ export var SettingsIcon = function SettingsIcon() {
     strokeLinecap: "round",
     strokeLinejoin: "round"
   }));
+};
+export var ArrowUpIcon = function ArrowUpIcon(_ref) {
+  var className = _ref.className;
+  return /*#__PURE__*/React.createElement("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    fill: "none",
+    viewBox: "0 0 24 24",
+    strokeWidth: "3",
+    stroke: "currentColor",
+    className: className + " w-4 h-4"
+  }, /*#__PURE__*/React.createElement("path", {
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    d: "m19.5 8.25-7.5 7.5-7.5-7.5"
+  }));
+};
+export var TableIcon = function TableIcon(_ref2) {
+  var className = _ref2.className;
+  return /*#__PURE__*/React.createElement("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    fill: "none",
+    viewBox: "0 0 24 24",
+    strokeWidth: "1.5",
+    stroke: "currentColor",
+    className: className + " w-6 h-6"
+  }, /*#__PURE__*/React.createElement("path", {
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    d: "M2.25 8.25h19.5M2.25 9h19.5m-16.5 5.25h6m-6 2.25h3m-3.75 3h15a2.25 2.25 0 0 0 2.25-2.25V6.75A2.25 2.25 0 0 0 19.5 4.5h-15a2.25 2.25 0 0 0-2.25 2.25v10.5A2.25 2.25 0 0 0 4.5 19.5Z"
+  }));
+};
+export var CardIcon = function CardIcon(_ref3) {
+  var className = _ref3.className;
+  return /*#__PURE__*/React.createElement("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    fill: "none",
+    viewBox: "0 0 24 24",
+    strokeWidth: "1.5",
+    stroke: "currentColor",
+    className: className + " w-6 h-6"
+  }, /*#__PURE__*/React.createElement("path", {
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    d: "M3.375 19.5h17.25m-17.25 0a1.125 1.125 0 0 1-1.125-1.125M3.375 19.5h7.5c.621 0 1.125-.504 1.125-1.125m-9.75 0V5.625m0 12.75v-1.5c0-.621.504-1.125 1.125-1.125m18.375 2.625V5.625m0 12.75c0 .621-.504 1.125-1.125 1.125m1.125-1.125v-1.5c0-.621-.504-1.125-1.125-1.125m0 3.75h-7.5A1.125 1.125 0 0 1 12 18.375m9.75-12.75c0-.621-.504-1.125-1.125-1.125H3.375c-.621 0-1.125.504-1.125 1.125m19.5 0v1.5c0 .621-.504 1.125-1.125 1.125M2.25 5.625v1.5c0 .621.504 1.125 1.125 1.125m0 0h17.25m-17.25 0h7.5c.621 0 1.125.504 1.125 1.125M3.375 8.25c-.621 0-1.125.504-1.125 1.125v1.5c0 .621.504 1.125 1.125 1.125m17.25-3.75h-7.5c-.621 0-1.125.504-1.125 1.125m8.625-1.125c.621 0 1.125.504 1.125 1.125v1.5c0 .621-.504 1.125-1.125 1.125m-17.25 0h7.5m-7.5 0c-.621 0-1.125.504-1.125 1.125v1.5c0 .621.504 1.125 1.125 1.125M12 10.875v-1.5m0 1.5c0 .621-.504 1.125-1.125 1.125M12 10.875c0 .621.504 1.125 1.125 1.125m-2.25 0c.621 0 1.125.504 1.125 1.125M13.125 12h7.5m-7.5 0c-.621 0-1.125.504-1.125 1.125M20.625 12c.621 0 1.125.504 1.125 1.125v1.5c0 .621-.504 1.125-1.125 1.125m-17.25 0h7.5M12 14.625v-1.5m0 1.5c0 .621-.504 1.125-1.125 1.125M12 14.625c0 .621.504 1.125 1.125 1.125m-2.25 0c.621 0 1.125.504 1.125 1.125m0 1.5v-1.5m0 0c0-.621.504-1.125 1.125-1.125m0 0h7.5"
+  }));
 };

package/es/utils/getTotalByColumns.js

@@ -6,7 +6,7 @@ function getTotalByColumns(columns) {
   var totalWidth = 0;
   var count = function count(items) {
     Array.from(items).forEach(function (column) {
-      if ( /*#__PURE__*/React.isValidElement(column)) {
+      if (/*#__PURE__*/React.isValidElement(column)) {
         var _getColumnProps = getColumnProps(column),
           flexGrow = _getColumnProps.flexGrow,
           _getColumnProps$width = _getColumnProps.width,

package/es/utils/mergeCells.js

@@ -46,7 +46,7 @@ function mergeCells(cells) {
             removed: true
           });
         }
-        groupChildren.push( /*#__PURE__*/React.createElement(HeaderCell, {
+        groupChildren.push(/*#__PURE__*/React.createElement(HeaderCell, {
           key: j,
           left: left,
           align: align,

package/es/utils/useCellDescriptor.js

@@ -138,11 +138,11 @@ var useCellDescriptor = function useCellDescriptor(props) {
     totalFlexGrow = _getTotalByColumns.totalFlexGrow,
     totalWidth = _getTotalByColumns.totalWidth;
   React.Children.forEach(columns, function (column, index) {
-    if ( /*#__PURE__*/React.isValidElement(column)) {
+    if (/*#__PURE__*/React.isValidElement(column)) {
       var _initialColumnWidths$, _columnWidths$current;
       var columnChildren = column.props.children;
       var columnProps = getColumnProps(column);
-      var _width = columnProps.width,
+      var width = columnProps.width,
         resizable = columnProps.resizable,
         flexGrow = columnProps.flexGrow,
         minWidth = columnProps.minWidth,
@@ -161,23 +161,23 @@ var useCellDescriptor = function useCellDescriptor(props) {
       // get column width from cache.
       var initialColumnWidth = (_initialColumnWidths$ = initialColumnWidths.current) === null || _initialColumnWidths$ === void 0 ? void 0 : _initialColumnWidths$[cellWidthId];
       var currentWidth = (_columnWidths$current = columnWidths.current) === null || _columnWidths$current === void 0 ? void 0 : _columnWidths$current[cellWidthId];
-      var cellWidth = currentWidth || _width || 0;
-      var isControlled = typeof _width === 'number' && typeof onResize === 'function';
+      var cellWidth = currentWidth || width || 0;
+      var isControlled = typeof width === 'number' && typeof onResize === 'function';
 
       /**
        * in resizable mode,
        *    if width !== initialColumnWidth, use current column width and update cache.
        */
-      if (resizable && (initialColumnWidth || _width) && initialColumnWidth !== _width) {
+      if (resizable && (initialColumnWidth || width) && initialColumnWidth !== width) {
         // initial or update initialColumnWidth cache.
-        initialColumnWidths.current[cellWidthId] = _width;
+        initialColumnWidths.current[cellWidthId] = width;
         /**
          * if currentWidth exist, update columnWidths cache.
          */
         if (currentWidth) {
-          columnWidths.current[cellWidthId] = _width;
+          columnWidths.current[cellWidthId] = width;
           // update cellWidth
-          cellWidth = _width;
+          cellWidth = width;
         }
       }
       if (tableWidth.current && flexGrow && totalFlexGrow) {
@@ -193,7 +193,7 @@ var useCellDescriptor = function useCellDescriptor(props) {
         left: left,
         headerHeight: headerHeight,
         key: index,
-        width: isControlled ? _width : cellWidth,
+        width: isControlled ? width : cellWidth,
         height: typeof rowHeight === 'function' ? rowHeight() : rowHeight,
         firstColumn: index === 0,
         lastColumn: index === count - 1
@@ -220,9 +220,9 @@ var useCellDescriptor = function useCellDescriptor(props) {
             onColumnResizeMove: handleColumnResizeMove
           });
         }
-        headerCells.push( /*#__PURE__*/React.cloneElement(headerCell, _extends({}, cellProps, headerCellProps)));
+        headerCells.push(/*#__PURE__*/React.cloneElement(headerCell, _extends({}, cellProps, headerCellProps)));
       }
-      bodyCells.push( /*#__PURE__*/React.cloneElement(cell, cellProps));
+      bodyCells.push(/*#__PURE__*/React.cloneElement(cell, cellProps));
       left += cellWidth;
     }
   });

package/es/utils/useClassNames.js

@@ -5,7 +5,9 @@ import TableContext from '../TableContext';
 
 // This is the only way I found to break circular references between ClassArray and ClassValue
 // https://github.com/Microsoft/TypeScript/issues/3496#issuecomment-128553540
+
 //eslint-disable-line @typescript-eslint/no-empty-interface
+
 /**
  * Add a prefix to all classNames.
  *

package/lib/Table.js

@@ -36,13 +36,13 @@ var filterTreeData = function filterTreeData(data, expandedRowKeys, rowKey) {
   return (0, _utils.flattenData)(data).filter(function (rowData) {
     if (rowKey) {
       var parents = (0, _utils.findAllParents)(rowData, rowKey);
-      var _expanded = (0, _utils.shouldShowRowByExpanded)(expandedRowKeys, parents);
+      var expanded = (0, _utils.shouldShowRowByExpanded)(expandedRowKeys, parents);
 
       // FIXME This function is supposed to be pure.
       //       Don't mutate rowData in-place!
-      rowData[_constants.EXPANDED_KEY] = _expanded;
+      rowData[_constants.EXPANDED_KEY] = expanded;
       rowData[_constants.TREE_DEPTH] = parents.length;
-      return _expanded;
+      return expanded;
     }
   });
 };
@@ -593,7 +593,7 @@ var Table = /*#__PURE__*/_react["default"].forwardRef(function (props, ref) {
 
       // Cells marked as deleted when checking for merged cell.
       var removedCell = (_cell$props4 = cell.props) !== null && _cell$props4 !== void 0 && _cell$props4.rowSpan && !rowSpan && ((_rowSpanState$current2 = rowSpanState.current[_cellKey]) === null || _rowSpanState$current2 === void 0 ? void 0 : _rowSpanState$current2[0]) !== 0 ? true : false;
-      cells.push( /*#__PURE__*/_react["default"].cloneElement(cell, {
+      cells.push(/*#__PURE__*/_react["default"].cloneElement(cell, {
         hasChildren: hasChildren,
         rowData: rowData,
         rowIndex: props.rowIndex,
@@ -617,7 +617,7 @@ var Table = /*#__PURE__*/_react["default"].forwardRef(function (props, ref) {
     }
     var scrollbars = [];
     if (hasHorizontalScrollbar && !(tableKey === 'parent' && isChildFocused)) {
-      scrollbars.push( /*#__PURE__*/_react["default"].createElement(_Scrollbar["default"], {
+      scrollbars.push(/*#__PURE__*/_react["default"].createElement(_Scrollbar["default"], {
         key: "scrollbar",
         tableId: id,
         style: {
@@ -630,7 +630,7 @@ var Table = /*#__PURE__*/_react["default"].forwardRef(function (props, ref) {
       }));
     }
     if (hasVerticalScrollbar && !(tableKey === 'parent' && isChildFocused)) {
-      scrollbars.push( /*#__PURE__*/_react["default"].createElement(_Scrollbar["default"], {
+      scrollbars.push(/*#__PURE__*/_react["default"].createElement(_Scrollbar["default"], {
         vertical: true,
         key: "vertical-scrollbar",
         tableId: id,
@@ -673,7 +673,7 @@ var Table = /*#__PURE__*/_react["default"].forwardRef(function (props, ref) {
     var bottomHideHeight = 0;
     visibleRows.current = [];
     if (data) {
-      var _top = 0; // Row position
+      var top = 0; // Row position
       var minTop = Math.abs(scrollY.current);
       var maxTop = minTop + height + rowExpandedHeight;
       var isCustomRowHeight = typeof rowHeight === 'function';
@@ -690,13 +690,13 @@ var Table = /*#__PURE__*/_react["default"].forwardRef(function (props, ref) {
           maxTop = maxTop + coveredHeight;
         }
         for (var index = 0; index < data.length; index++) {
-          var _rowData = data[index];
+          var rowData = data[index];
           var maxHeight = tableRowsMaxHeight[index];
-          var expandedRow = shouldRenderExpandedRow(_rowData);
+          var expandedRow = shouldRenderExpandedRow(rowData);
           var nextRowHeight = 0;
           var cellHeight = 0;
           if (typeof rowHeight === 'function') {
-            nextRowHeight = rowHeight(_rowData);
+            nextRowHeight = rowHeight(rowData);
             cellHeight = nextRowHeight;
           } else {
             nextRowHeight = maxHeight ? Math.max(maxHeight + _constants.CELL_PADDING_HEIGHT, rowHeight) : rowHeight;
@@ -709,10 +709,10 @@ var Table = /*#__PURE__*/_react["default"].forwardRef(function (props, ref) {
           contentHeight += nextRowHeight;
           var rowProps = {
             key: index,
-            top: _top,
+            top: top,
             rowIndex: index,
             width: rowWidth,
-            depth: _rowData[_constants.TREE_DEPTH],
+            depth: rowData[_constants.TREE_DEPTH],
             height: nextRowHeight,
             cellHeight: cellHeight,
             index: index,
@@ -720,17 +720,17 @@ var Table = /*#__PURE__*/_react["default"].forwardRef(function (props, ref) {
             handleParentCallBack: handleParentCallBack,
             zIndexValue: rowZIndices[index]
           };
-          _top += nextRowHeight;
+          top += nextRowHeight;
           if (virtualized && !wordWrap) {
-            if (_top + nextRowHeight < minTop) {
+            if (top + nextRowHeight < minTop) {
               topHideHeight += nextRowHeight;
               continue;
-            } else if (_top > maxTop) {
+            } else if (top > maxTop) {
               bottomHideHeight += nextRowHeight;
               continue;
             }
           }
-          visibleRows.current.push(renderRowData(bodyCells, _rowData, rowProps, expandedRow));
+          visibleRows.current.push(renderRowData(bodyCells, rowData, rowProps, expandedRow));
         }
       } else {
         /** virtualized */
@@ -752,11 +752,11 @@ var Table = /*#__PURE__*/_react["default"].forwardRef(function (props, ref) {
         topHideHeight = startIndex * _nextRowHeight;
         bottomHideHeight = (data.length - endIndex) * _nextRowHeight;
         for (var _index = startIndex; _index < endIndex; _index++) {
-          var _rowData2 = data[_index];
+          var _rowData = data[_index];
           var _rowProps = {
             key: _index,
             rowIndex: _index,
-            depth: _rowData2[_constants.TREE_DEPTH],
+            depth: _rowData[_constants.TREE_DEPTH],
             top: _index * _nextRowHeight,
             width: rowWidth,
             height: _nextRowHeight,
@@ -766,7 +766,7 @@ var Table = /*#__PURE__*/_react["default"].forwardRef(function (props, ref) {
             handleParentCallBack: handleParentCallBack,
             zIndexValue: rowZIndices[_index]
           };
-          visibleRows.current.push(renderRowData(bodyCells, _rowData2, _rowProps, false));
+          visibleRows.current.push(renderRowData(bodyCells, _rowData, _rowProps, false));
         }
       }
     }

package/lib/less/index.less

@@ -1,3 +1,6 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
 @import './themes.less';
 
 .rs {

package/lib/qbsTable/QbsTable.js

@@ -16,9 +16,10 @@ var _Toolbar = _interopRequireDefault(require("./Toolbar"));
 var _ColumShowHide = _interopRequireDefault(require("./utilities/ColumShowHide"));
 var _debounce = _interopRequireDefault(require("./utilities/debounce"));
 var _deepEqual = require("./utilities/deepEqual");
+var _empty = _interopRequireDefault(require("./utilities/empty"));
 var _icons = require("./utilities/icons");
 require("../../dist/css/qbs-react-grid.css");
-var _empty = _interopRequireDefault(require("./utilities/empty"));
+var _CardComponent = _interopRequireDefault(require("./utilities/CardComponent"));
 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; }
 // import 'qbs-react-table/dist/css/qbs-react-grid.css';
@@ -97,7 +98,11 @@ var QbsTable = function QbsTable(_ref) {
     _renderEmpty = _ref.renderEmpty,
     autoHeight = _ref.autoHeight,
     emptySubTitle = _ref.emptySubTitle,
-    emptyTitle = _ref.emptyTitle;
+    emptyTitle = _ref.emptyTitle,
+    _ref$tableView = _ref.tableView,
+    tableView = _ref$tableView === void 0 ? true : _ref$tableView,
+    _ref$enableTableToggl = _ref.enableTableToggle,
+    enableTableToggle = _ref$enableTableToggl === void 0 ? false : _ref$enableTableToggl;
   var _useState = (0, _react.useState)(false),
     loading = _useState[0],
     setLoading = _useState[1];
@@ -115,6 +120,9 @@ var QbsTable = function QbsTable(_ref) {
     isOpen = _useState4[0],
     setIsOpen = _useState4[1];
   var prevColumns = (0, _react.useRef)();
+  var _useState5 = (0, _react.useState)(tableView),
+    tableViewToggle = _useState5[0],
+    setTableViewToggle = _useState5[1];
   var tableBodyRef = (0, _react.useRef)(null);
   var handleSortColumn = (0, _react.useCallback)(function (sortColumn, sortType) {
     setLoading(true);
@@ -137,6 +145,10 @@ var QbsTable = function QbsTable(_ref) {
     var keys = event.target.checked ? data.map(function (item) {
       return item.id;
     }) : [];
+    //  let updatedKeys = [...keys];
+    //  if (checkedKeys) {
+    //    updatedKeys = [...checkedKeys, ...updatedKeys];
+    //  } TODO => previous bug fix removed this section
     var updatedKeys = [].concat(keys);
     setCheckedKeys(updatedKeys);
     handleChecked(updatedKeys);
@@ -233,7 +245,10 @@ var QbsTable = function QbsTable(_ref) {
     onSelect: handleClear,
     handleColumnToggle: handleColumnToggle,
     dataLength: data === null || data === void 0 ? void 0 : data.length,
-    searchPlaceholder: searchPlaceholder
+    searchPlaceholder: searchPlaceholder,
+    setTableViewToggle: setTableViewToggle,
+    tableViewToggle: tableViewToggle,
+    enableTableToggle: enableTableToggle
   };
   var themeToggle = (0, _react.useMemo)(function () {
     return document.getElementById('themeToggle');
@@ -410,7 +425,7 @@ var QbsTable = function QbsTable(_ref) {
     "data-theme": dataTheme
   }, toolbar && /*#__PURE__*/_react["default"].createElement(_Toolbar["default"], toolbarProps), /*#__PURE__*/_react["default"].createElement("div", {
     className: "qbs-table-border-wrap"
-  }, /*#__PURE__*/_react["default"].createElement(_Table["default"], {
+  }, tableViewToggle ? /*#__PURE__*/_react["default"].createElement(_Table["default"], {
     height: autoHeight ? undefined : height,
     key: tableKey,
     tableKey: tableKey,
@@ -482,13 +497,13 @@ var QbsTable = function QbsTable(_ref) {
   }, /*#__PURE__*/_react["default"].createElement("input", {
     type: "checkbox",
     onChange: handleCheckAll,
-    id: "checkbox-all",
+    id: 'checkbox-all',
     className: "qbs-table-checkbox-input " + classes.tableCheckBoxClass,
     checked: (data === null || data === void 0 ? void 0 : data.length) > 0 && data.every(function (item) {
       return checkedKeys === null || checkedKeys === void 0 ? void 0 : checkedKeys.includes(item.id);
     })
   }), /*#__PURE__*/_react["default"].createElement("label", {
-    htmlFor: "checkbox-all"
+    htmlFor: 'checkbox-all'
   }, /*#__PURE__*/_react["default"].createElement("svg", {
     width: "8",
     height: "6",
@@ -559,7 +574,19 @@ var QbsTable = function QbsTable(_ref) {
     className: classes.cellClass + " " + classes.actionCellClass,
     handleMenuActions: handleMenuActions,
     dataTheme: dataTheme
-  }))), /*#__PURE__*/_react["default"].createElement("div", null, pagination && (data === null || data === void 0 ? void 0 : data.length) > 0 && /*#__PURE__*/_react["default"].createElement(_Pagination["default"], {
+  }))) : /*#__PURE__*/_react["default"].createElement("div", {
+    className: " p-2"
+  }, data.map(function (items) {
+    return /*#__PURE__*/_react["default"].createElement("div", {
+      className: "flex flex-col gap-3 p-2",
+      key: items === null || items === void 0 ? void 0 : items.id
+    }, /*#__PURE__*/_react["default"].createElement(_CardComponent["default"], {
+      data: items,
+      columns: columns,
+      tableBodyRef: tableBodyRef,
+      actionProps: actionProps
+    }));
+  })), /*#__PURE__*/_react["default"].createElement("div", null, pagination && (data === null || data === void 0 ? void 0 : data.length) > 0 && /*#__PURE__*/_react["default"].createElement(_Pagination["default"], {
     paginationProps: paginationProps
   }))));
 };

package/lib/qbsTable/TableCardList.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import { QbsTableProps } from './commontypes';
+import '../../dist/css/qbs-react-grid.css';
+declare const QbsTable: React.FC<QbsTableProps>;
+export default QbsTable;