qbs-react-grid 2.0.7 → 2.0.9

package/es/qbsTable/TableCardList.js

@@ -91,7 +91,9 @@ var QbsTable = function QbsTable(_ref) {
     _renderEmpty = _ref.renderEmpty,
     autoHeight = _ref.autoHeight,
     emptySubTitle = _ref.emptySubTitle,
-    emptyTitle = _ref.emptyTitle;
+    emptyTitle = _ref.emptyTitle,
+    _ref$dropType = _ref.dropType,
+    dropType = _ref$dropType === void 0 ? 'horizontal' : _ref$dropType;
   var _useState = useState(false),
     loading = _useState[0],
     setLoading = _useState[1];
@@ -261,7 +263,6 @@ var QbsTable = function QbsTable(_ref) {
     };
   }, [themeToggle]);
   var handleExpanded = useCallback(function (rowData) {
-    console.log(rowData);
     var keyValue = dataRowKey;
     var key = rowData[keyValue];
     var nextExpandedRowKeys = new Set(expandedRowKeys);
@@ -556,6 +557,7 @@ var QbsTable = function QbsTable(_ref) {
   })), /*#__PURE__*/React.createElement(ActionCell, {
     tableBodyRef: tableBodyRef,
     actionProps: actionProps,
+    dropType: dropType,
     className: classes.cellClass + " " + classes.actionCellClass,
     handleMenuActions: handleMenuActions,
     dataTheme: dataTheme

package/es/qbsTable/commontypes.d.ts

@@ -137,6 +137,7 @@ export interface QbsTableProps {
     fullWidthView?: boolean;
     setTableFullView?: (value: boolean) => void;
     setRowViewToggle?: (value: boolean) => void;
+    dropType?: 'horizondal' | 'vertical';
 }
 export interface QbsTableToolbarProps {
     title?: string;

package/es/qbsTable/utilities/CardMenuDropdown.js

@@ -1,5 +1,4 @@
-import { useEffect, useRef, useState } from 'react';
-import React from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import { ThreeDotIcon } from './icons';
 import TooltipComponent from './ToolTip';
 var CardMenuDropdown = function CardMenuDropdown(_ref) {
@@ -32,7 +31,6 @@ var CardMenuDropdown = function CardMenuDropdown(_ref) {
         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',

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

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

package/es/qbsTable/utilities/VerticalDropDownMenu.js

@@ -0,0 +1,82 @@
+import React, { useEffect, useRef, useState } from 'react';
+import { ThreeDotIcon } from './icons';
+import TooltipComponent from './ToolTip';
+var VerticalMenuDropdown = function VerticalMenuDropdown(_ref) {
+  var actionDropDown = _ref.actionDropDown,
+    handleMenuActions = _ref.handleMenuActions,
+    rowData = _ref.rowData,
+    tableBodyRef = _ref.tableBodyRef,
+    rowIndex = _ref.rowIndex;
+  var _useState = useState(false),
+    openMenu = _useState[0],
+    setOpenMenu = _useState[1];
+  var menuButtonRef = useRef(null);
+  var menuRef = useRef(null);
+  var dropRef = 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 handleMenuItemClick = function handleMenuItemClick(slug) {
+    var _slug$action;
+    handleMenuActions === null || handleMenuActions === void 0 ? void 0 : handleMenuActions(slug, rowData);
+    (_slug$action = slug.action) === null || _slug$action === void 0 ? void 0 : _slug$action.call(slug, rowData);
+    setOpenMenu(false);
+  };
+  var handleShowHideMenu = function handleShowHideMenu() {
+    var _actionDropDown$filte, _actionDropDown$filte2;
+    return (_actionDropDown$filte = actionDropDown === null || actionDropDown === void 0 ? void 0 : (_actionDropDown$filte2 = actionDropDown.filter(function (item) {
+      var _item$hide;
+      return !item.hidden && !(item !== null && item !== void 0 && (_item$hide = item.hide) !== null && _item$hide !== void 0 && _item$hide.call(item, rowData, rowIndex));
+    })) === null || _actionDropDown$filte2 === void 0 ? void 0 : _actionDropDown$filte2.length) != null ? _actionDropDown$filte : 0;
+  };
+  var toggleMenu = function toggleMenu() {
+    setTimeout(function () {
+      setOpenMenu(function (prev) {
+        return !prev;
+      });
+    }, 200);
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    className: "relative inline-block text-left vertical-menu-dropdown-wrapper",
+    ref: menuRef
+  }, handleShowHideMenu() > 0 && /*#__PURE__*/React.createElement("button", {
+    className: "vertical-menu-trigger-button p-2 rounded hover:bg-gray-100 transition-colors",
+    onClick: toggleMenu,
+    ref: menuButtonRef
+  }, /*#__PURE__*/React.createElement(ThreeDotIcon, null)), openMenu && /*#__PURE__*/React.createElement("div", {
+    className: "absolute z-10 mt-2 w-48 origin-top-right rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none vertical-menu-dropdown-content",
+    ref: dropRef
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "py-1"
+  }, actionDropDown === null || actionDropDown === void 0 ? void 0 : actionDropDown.map(function (item) {
+    var _item$hide2;
+    return !(item !== null && item !== void 0 && item.hidden) && !(item !== null && item !== void 0 && (_item$hide2 = item.hide) !== null && _item$hide2 !== void 0 && _item$hide2.call(item, rowData, rowIndex)) ? /*#__PURE__*/React.createElement("div", {
+      key: item.title,
+      className: "vertical-menu-item px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 cursor-pointer flex items-center gap-2 transition-colors",
+      onClick: function onClick(e) {
+        var _item$action;
+        e.preventDefault();
+        (_item$action = item.action) === null || _item$action === void 0 ? void 0 : _item$action.call(item, item);
+        handleMenuItemClick(item);
+      }
+    }, /*#__PURE__*/React.createElement(TooltipComponent, {
+      title: item.toolTip,
+      tableBodyRef: tableBodyRef
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "vertical-menu-icon-title flex items-center gap-2"
+    }, /*#__PURE__*/React.createElement("span", {
+      className: "vertical-menu-icon"
+    }, item.icon), /*#__PURE__*/React.createElement("span", {
+      className: "vertical-menu-title"
+    }, item.title)))) : null;
+  }))));
+};
+export default VerticalMenuDropdown;

package/es/utils/useScrollListener.js

@@ -131,7 +131,6 @@ var useScrollListener = function useScrollListener(props) {
     var x = Math.min(0, nextScrollX < minScrollX.current ? minScrollX.current : nextScrollX);
     setScrollX(x);
     setScrollY(y);
-    console.log(scrollY.current, contentHeight.current, nextScrollY, minScrollY.current, 'scrolllistner');
     if (typeof handleInfiniteScroll === 'function' && deltaY !== 0 && !loading && Math.abs(y) + getTableHeight() >= contentHeight.current - 12) {
       handleInfiniteScroll(scrollY.current);
     }
@@ -245,7 +244,6 @@ var useScrollListener = function useScrollListener(props) {
     if (!isTouching.current) {
       return;
     }
-    console.log('handleTouchEnd');
     isTouching.current = false;
     var touchDuration = new Date().getTime() - momentumStartTime.current;
     var absDeltaY = Math.abs(scrollY.current - momentumStartY.current);

package/lib/Table.d.ts

@@ -96,8 +96,6 @@ export interface TableProps<Row, Key> extends Omit<StandardProps, 'onScroll'> {
     virtualized?: boolean;
     /**Theme Change */
     dataTheme?: string;
-    /** Refresh Row */
-    refreshRow?: number;
     /** Tree table, the callback function in the expanded node */
     renderTreeToggle?: (expandButton: React.ReactNode, rowData?: Row, expanded?: boolean) => React.ReactNode;
     tableKey?: string;

package/lib/Table.js

@@ -20,7 +20,7 @@ var _Row = _interopRequireDefault(require("./Row"));
 var _Scrollbar = _interopRequireDefault(require("./Scrollbar"));
 var _TableContext = _interopRequireDefault(require("./TableContext"));
 var _utils = require("./utils");
-var _excluded = ["affixHeader", "children", "classPrefix", "className", "data", "defaultSortType", "width", "expandedRowKeys", "defaultExpandAllRows", "defaultExpandedRowKeys", "style", "id", "isTree", "hover", "bordered", "cellBordered", "wordWrap", "loading", "locale", "showHeader", "pagination", "paginationProps", "sortColumn", "rowHeight", "sortType", "headerHeight", "minHeight", "height", "autoHeight", "fillHeight", "rtl", "translate3d", "rowKey", "virtualized", "rowClassName", "rowExpandedHeight", "disabledScroll", "affixHorizontalScrollbar", "loadAnimation", "shouldUpdateScroll", "renderRow", "renderRowExpanded", "renderLoading", "renderEmpty", "onSortColumn", "onScroll", "renderTreeToggle", "onRowClick", "onRowContextMenu", "onExpandChange", "onTouchStart", "onTouchMove", "onTouchEnd", "dataTheme", "tableBodyHeight", "columns", "tableBodyRef", "tableKey", "handleInfiniteScroll", "infiniteLoading", "wheelWrapperRef"],
+var _excluded = ["affixHeader", "children", "classPrefix", "className", "data", "defaultSortType", "width", "expandedRowKeys", "defaultExpandAllRows", "defaultExpandedRowKeys", "style", "id", "isTree", "hover", "bordered", "cellBordered", "wordWrap", "loading", "locale", "showHeader", "sortColumn", "rowHeight", "sortType", "headerHeight", "minHeight", "height", "autoHeight", "fillHeight", "rtl", "translate3d", "rowKey", "virtualized", "rowClassName", "rowExpandedHeight", "disabledScroll", "affixHorizontalScrollbar", "loadAnimation", "shouldUpdateScroll", "renderRow", "renderRowExpanded", "renderLoading", "renderEmpty", "onSortColumn", "onScroll", "renderTreeToggle", "onRowClick", "onRowContextMenu", "onExpandChange", "onTouchStart", "onTouchMove", "onTouchEnd", "tableBodyHeight", "columns", "tableBodyRef", "tableKey", "handleInfiniteScroll", "infiniteLoading", "wheelWrapperRef"],
   _excluded2 = ["depth", "rowIndex"],
   _excluded3 = ["cellHeight"];
 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); }
@@ -77,10 +77,6 @@ var Table = /*#__PURE__*/_react["default"].forwardRef(function (props, ref) {
     } : _props$locale,
     _props$showHeader = props.showHeader,
     showHeader = _props$showHeader === void 0 ? true : _props$showHeader,
-    _props$pagination = props.pagination,
-    pagination = _props$pagination === void 0 ? true : _props$pagination,
-    _props$paginationProp = props.paginationProps,
-    paginationProps = _props$paginationProp === void 0 ? {} : _props$paginationProp,
     sortColumn = props.sortColumn,
     _props$rowHeight = props.rowHeight,
     rowHeight = _props$rowHeight === void 0 ? _constants.ROW_HEIGHT : _props$rowHeight,
@@ -118,7 +114,6 @@ var Table = /*#__PURE__*/_react["default"].forwardRef(function (props, ref) {
     onTouchStart = props.onTouchStart,
     onTouchMove = props.onTouchMove,
     onTouchEnd = props.onTouchEnd,
-    dataTheme = props.dataTheme,
     tableBodyHeight = props.tableBodyHeight,
     columns = props.columns,
     tableBodyRef = props.tableBodyRef,
@@ -627,7 +622,7 @@ var Table = /*#__PURE__*/_react["default"].forwardRef(function (props, ref) {
         },
         length: tableWidth.current,
         onScroll: function onScroll(delta) {
-          onScrollHorizontal(delta), console.log('onScrollHorizontal', delta);
+          onScrollHorizontal(delta);
         },
         scrollLength: contentWidth.current,
         ref: scrollbarXRef

package/lib/qbsTable/CustomTableCell.js

@@ -10,6 +10,7 @@ var _reactRouterDom = require("react-router-dom");
 var _Cell = _interopRequireDefault(require("../Cell"));
 var _handleFormatCell = require("./utilities/handleFormatCell");
 var _menuDropDown = _interopRequireDefault(require("./utilities/menuDropDown"));
+var _VerticalDropDownMenu = _interopRequireDefault(require("./utilities/VerticalDropDownMenu"));
 var _excluded = ["rowData", "onChange", "checkedKeys", "dataKey", "dataTheme"],
   _excluded2 = ["rowData", "dataKey", "expandedRowKeys", "onChange"],
   _excluded3 = ["rowData", "renderCell", "toolTip", "hideLink", "dataKey", "onChange", "rowClick", "type", "path", "link"],
@@ -61,8 +62,16 @@ var ActionCell = /*#__PURE__*/_react["default"].memo(function (_ref2) {
     dataTheme = _ref2.dataTheme,
     actionProps = _ref2.actionProps,
     tableBodyRef = _ref2.tableBodyRef,
-    rowIndex = _ref2.rowIndex;
-  return /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_menuDropDown["default"], {
+    rowIndex = _ref2.rowIndex,
+    dropType = _ref2.dropType;
+  return /*#__PURE__*/_react["default"].createElement("div", null, dropType == 'vertical' ? /*#__PURE__*/_react["default"].createElement(_VerticalDropDownMenu["default"], {
+    tableBodyRef: tableBodyRef,
+    actionDropDown: actionProps,
+    rowData: rowData,
+    dataTheme: dataTheme,
+    rowIndex: rowIndex,
+    handleMenuActions: handleMenuActions
+  }) : /*#__PURE__*/_react["default"].createElement(_menuDropDown["default"], {
     tableBodyRef: tableBodyRef,
     actionDropDown: actionProps,
     rowData: rowData,

package/lib/qbsTable/QbsTable.js

@@ -127,7 +127,9 @@ var QbsTable = function QbsTable(_ref) {
     _ref$fullWidthView = _ref.fullWidthView,
     fullWidthView = _ref$fullWidthView === void 0 ? false : _ref$fullWidthView,
     setTableFullView = _ref.setTableFullView,
-    setRowViewToggle = _ref.setRowViewToggle;
+    setRowViewToggle = _ref.setRowViewToggle,
+    _ref$dropType = _ref.dropType,
+    dropType = _ref$dropType === void 0 ? 'horizondal' : _ref$dropType;
   var _useState = (0, _react.useState)(false),
     loading = _useState[0],
     setLoading = _useState[1];
@@ -260,7 +262,6 @@ var QbsTable = function QbsTable(_ref) {
 
   // useEffect(() => {
   // }, [columns]);
-  console.log(viewMode);
   var handleClear = function handleClear(_ref2) {
     setCheckedKeys([]);
     handleChecked([]);
@@ -324,7 +325,6 @@ var QbsTable = function QbsTable(_ref) {
     };
   }, [themeToggle]);
   var handleExpanded = (0, _react.useCallback)(function (rowData) {
-    console.log(rowData);
     var keyValue = dataRowKey;
     var key = rowData[keyValue];
     var nextExpandedRowKeys = new Set(expandedRowKeys);
@@ -609,7 +609,6 @@ var QbsTable = function QbsTable(_ref) {
     key: tableKey + REFRESH_KEY,
     tableKey: tableKey,
     data: data,
-    refreshRow: REFRESH_KEY,
     tableBodyRef: tableBodyRef,
     dataTheme: dataTheme,
     wordWrap: wordWrap,
@@ -757,6 +756,7 @@ var QbsTable = function QbsTable(_ref) {
     handleColumnToggle: handleColumnToggle
   })), /*#__PURE__*/_react["default"].createElement(_CustomTableCell.ActionCell, {
     tableBodyRef: tableBodyRef,
+    dropType: dropType,
     actionProps: actionProps,
     className: classes.cellClass + " " + classes.actionCellClass,
     handleMenuActions: handleMenuActions,

package/lib/qbsTable/TableCardList.js

@@ -97,7 +97,9 @@ var QbsTable = function QbsTable(_ref) {
     _renderEmpty = _ref.renderEmpty,
     autoHeight = _ref.autoHeight,
     emptySubTitle = _ref.emptySubTitle,
-    emptyTitle = _ref.emptyTitle;
+    emptyTitle = _ref.emptyTitle,
+    _ref$dropType = _ref.dropType,
+    dropType = _ref$dropType === void 0 ? 'horizontal' : _ref$dropType;
   var _useState = (0, _react.useState)(false),
     loading = _useState[0],
     setLoading = _useState[1];
@@ -267,7 +269,6 @@ var QbsTable = function QbsTable(_ref) {
     };
   }, [themeToggle]);
   var handleExpanded = (0, _react.useCallback)(function (rowData) {
-    console.log(rowData);
     var keyValue = dataRowKey;
     var key = rowData[keyValue];
     var nextExpandedRowKeys = new Set(expandedRowKeys);
@@ -562,6 +563,7 @@ var QbsTable = function QbsTable(_ref) {
   })), /*#__PURE__*/_react["default"].createElement(_CustomTableCell.ActionCell, {
     tableBodyRef: tableBodyRef,
     actionProps: actionProps,
+    dropType: dropType,
     className: classes.cellClass + " " + classes.actionCellClass,
     handleMenuActions: handleMenuActions,
     dataTheme: dataTheme

package/lib/qbsTable/commontypes.d.ts

@@ -137,6 +137,7 @@ export interface QbsTableProps {
     fullWidthView?: boolean;
     setTableFullView?: (value: boolean) => void;
     setRowViewToggle?: (value: boolean) => void;
+    dropType?: 'horizondal' | 'vertical';
 }
 export interface QbsTableToolbarProps {
     title?: string;

package/lib/qbsTable/utilities/CardMenuDropdown.js

@@ -38,7 +38,6 @@ var CardMenuDropdown = function CardMenuDropdown(_ref) {
         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',

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

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

package/lib/qbsTable/utilities/VerticalDropDownMenu.js

@@ -0,0 +1,90 @@
+"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 VerticalMenuDropdown = function VerticalMenuDropdown(_ref) {
+  var actionDropDown = _ref.actionDropDown,
+    handleMenuActions = _ref.handleMenuActions,
+    rowData = _ref.rowData,
+    tableBodyRef = _ref.tableBodyRef,
+    rowIndex = _ref.rowIndex;
+  var _useState = (0, _react.useState)(false),
+    openMenu = _useState[0],
+    setOpenMenu = _useState[1];
+  var menuButtonRef = (0, _react.useRef)(null);
+  var menuRef = (0, _react.useRef)(null);
+  var dropRef = (0, _react.useRef)(null);
+  (0, _react.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 handleMenuItemClick = function handleMenuItemClick(slug) {
+    var _slug$action;
+    handleMenuActions === null || handleMenuActions === void 0 ? void 0 : handleMenuActions(slug, rowData);
+    (_slug$action = slug.action) === null || _slug$action === void 0 ? void 0 : _slug$action.call(slug, rowData);
+    setOpenMenu(false);
+  };
+  var handleShowHideMenu = function handleShowHideMenu() {
+    var _actionDropDown$filte, _actionDropDown$filte2;
+    return (_actionDropDown$filte = actionDropDown === null || actionDropDown === void 0 ? void 0 : (_actionDropDown$filte2 = actionDropDown.filter(function (item) {
+      var _item$hide;
+      return !item.hidden && !(item !== null && item !== void 0 && (_item$hide = item.hide) !== null && _item$hide !== void 0 && _item$hide.call(item, rowData, rowIndex));
+    })) === null || _actionDropDown$filte2 === void 0 ? void 0 : _actionDropDown$filte2.length) != null ? _actionDropDown$filte : 0;
+  };
+  var toggleMenu = function toggleMenu() {
+    setTimeout(function () {
+      setOpenMenu(function (prev) {
+        return !prev;
+      });
+    }, 200);
+  };
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    className: "relative inline-block text-left vertical-menu-dropdown-wrapper",
+    ref: menuRef
+  }, handleShowHideMenu() > 0 && /*#__PURE__*/_react["default"].createElement("button", {
+    className: "vertical-menu-trigger-button p-2 rounded hover:bg-gray-100 transition-colors",
+    onClick: toggleMenu,
+    ref: menuButtonRef
+  }, /*#__PURE__*/_react["default"].createElement(_icons.ThreeDotIcon, null)), openMenu && /*#__PURE__*/_react["default"].createElement("div", {
+    className: "absolute z-10 mt-2 w-48 origin-top-right rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none vertical-menu-dropdown-content",
+    ref: dropRef
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    className: "py-1"
+  }, actionDropDown === null || actionDropDown === void 0 ? void 0 : actionDropDown.map(function (item) {
+    var _item$hide2;
+    return !(item !== null && item !== void 0 && item.hidden) && !(item !== null && item !== void 0 && (_item$hide2 = item.hide) !== null && _item$hide2 !== void 0 && _item$hide2.call(item, rowData, rowIndex)) ? /*#__PURE__*/_react["default"].createElement("div", {
+      key: item.title,
+      className: "vertical-menu-item px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 cursor-pointer flex items-center gap-2 transition-colors",
+      onClick: function onClick(e) {
+        var _item$action;
+        e.preventDefault();
+        (_item$action = item.action) === null || _item$action === void 0 ? void 0 : _item$action.call(item, item);
+        handleMenuItemClick(item);
+      }
+    }, /*#__PURE__*/_react["default"].createElement(_ToolTip["default"], {
+      title: item.toolTip,
+      tableBodyRef: tableBodyRef
+    }, /*#__PURE__*/_react["default"].createElement("div", {
+      className: "vertical-menu-icon-title flex items-center gap-2"
+    }, /*#__PURE__*/_react["default"].createElement("span", {
+      className: "vertical-menu-icon"
+    }, item.icon), /*#__PURE__*/_react["default"].createElement("span", {
+      className: "vertical-menu-title"
+    }, item.title)))) : null;
+  }))));
+};
+var _default = VerticalMenuDropdown;
+exports["default"] = _default;

package/lib/utils/useScrollListener.js

@@ -135,7 +135,6 @@ var useScrollListener = function useScrollListener(props) {
     var x = Math.min(0, nextScrollX < minScrollX.current ? minScrollX.current : nextScrollX);
     setScrollX(x);
     setScrollY(y);
-    console.log(scrollY.current, contentHeight.current, nextScrollY, minScrollY.current, 'scrolllistner');
     if (typeof handleInfiniteScroll === 'function' && deltaY !== 0 && !loading && Math.abs(y) + getTableHeight() >= contentHeight.current - 12) {
       handleInfiniteScroll(scrollY.current);
     }
@@ -249,7 +248,6 @@ var useScrollListener = function useScrollListener(props) {
     if (!isTouching.current) {
       return;
     }
-    console.log('handleTouchEnd');
     isTouching.current = false;
     var touchDuration = new Date().getTime() - momentumStartTime.current;
     var absDeltaY = Math.abs(scrollY.current - momentumStartY.current);

package/package.json

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

package/src/Table.tsx

@@ -3,50 +3,17 @@ import debounce from 'lodash/debounce';
 import flatten from 'lodash/flatten';
 import isFunction from 'lodash/isFunction';
 import PropTypes from 'prop-types';
-import React, {
-  useCallback,
-  useEffect,
-  useImperativeHandle,
-  useReducer,
-  useRef,
-  useState
-} from 'react';
+import React, { useCallback, useEffect, useImperativeHandle, useReducer, useRef, useState } from 'react';
 
 import CellGroup from './CellGroup';
-import {
-  CELL_PADDING_HEIGHT,
-  EXPANDED_KEY,
-  ROW_HEADER_HEIGHT,
-  ROW_HEIGHT,
-  SCROLLBAR_WIDTH,
-  SORT_TYPE,
-  TREE_DEPTH
-} from './constants';
+import { CELL_PADDING_HEIGHT, EXPANDED_KEY, ROW_HEADER_HEIGHT, ROW_HEIGHT, SCROLLBAR_WIDTH, SORT_TYPE, TREE_DEPTH } from './constants';
 import EmptyMessage from './EmptyMessage';
 import Loader from './Loader';
 import MouseArea from './MouseArea';
 import Row, { RowProps } from './Row';
 import Scrollbar, { ScrollbarInstance } from './Scrollbar';
 import TableContext from './TableContext';
-import {
-  findAllParents,
-  findRowKeys,
-  flattenData,
-  isRTL,
-  isSupportTouchEvent,
-  mergeCells,
-  resetLeftForCells,
-  shouldShowRowByExpanded,
-  useAffix,
-  useCellDescriptor,
-  useClassNames,
-  useControlled,
-  usePosition,
-  useScrollListener,
-  useTableDimension,
-  useTableRows,
-  useUpdateEffect
-} from './utils';
+import { findAllParents, findRowKeys, flattenData, isRTL, isSupportTouchEvent, mergeCells, resetLeftForCells, shouldShowRowByExpanded, useAffix, useCellDescriptor, useClassNames, useControlled, usePosition, useScrollListener, useTableDimension, useTableRows, useUpdateEffect } from './utils';
 
 import type {
   RowDataType,
@@ -216,8 +183,7 @@ export interface TableProps<Row, Key> extends Omit<StandardProps, 'onScroll'> {
 
   /**Theme Change */
   dataTheme?: string;
-  /** Refresh Row */
-  refreshRow?: number;
+
   /** Tree table, the callback function in the expanded node */
   renderTreeToggle?: (
     expandButton: React.ReactNode,
@@ -307,8 +273,7 @@ const Table = React.forwardRef(<Row extends RowDataType, Key>(props: TableProps<
       loading: 'Loading...'
     },
     showHeader = true,
-    pagination = true,
-    paginationProps = {},
+
     sortColumn,
     rowHeight = ROW_HEIGHT,
     sortType: sortTypeProp,
@@ -340,7 +305,6 @@ const Table = React.forwardRef(<Row extends RowDataType, Key>(props: TableProps<
     onTouchStart,
     onTouchMove,
     onTouchEnd,
-    dataTheme,
     tableBodyHeight,
     columns,
     tableBodyRef,
@@ -961,7 +925,7 @@ const Table = React.forwardRef(<Row extends RowDataType, Key>(props: TableProps<
           style={{ width: tableWidth.current }}
           length={tableWidth.current}
           onScroll={delta => {
-            onScrollHorizontal(delta), console.log('onScrollHorizontal', delta);
+            onScrollHorizontal(delta);
           }}
           scrollLength={contentWidth.current}
           ref={scrollbarXRef}

package/src/qbsTable/CustomTableCell.tsx

@@ -4,6 +4,7 @@ import { Link } from 'react-router-dom';
 import Cell from '../Cell';
 import { handleCellFormat } from './utilities/handleFormatCell';
 import MenuDropDown from './utilities/menuDropDown';
+import VerticalMenuDropdown from './utilities/VerticalDropDownMenu';
 
 const CHECKBOX_LINE_HEIGHT = '36px';
 export const CheckCell: React.FC<any> = React.memo(
@@ -37,17 +38,28 @@ export const CheckCell: React.FC<any> = React.memo(
   )
 );
 export const ActionCell: React.FC<any> = React.memo(
-  ({ rowData, handleMenuActions, dataTheme, actionProps, tableBodyRef, rowIndex }) => {
+  ({ rowData, handleMenuActions, dataTheme, actionProps, tableBodyRef, rowIndex, dropType }) => {
     return (
       <div>
-        <MenuDropDown
-          tableBodyRef={tableBodyRef}
-          actionDropDown={actionProps}
-          rowData={rowData}
-          dataTheme={dataTheme}
-          rowIndex={rowIndex}
-          handleMenuActions={handleMenuActions}
-        />
+        {dropType == 'vertical' ? (
+          <VerticalMenuDropdown
+            tableBodyRef={tableBodyRef}
+            actionDropDown={actionProps}
+            rowData={rowData}
+            dataTheme={dataTheme}
+            rowIndex={rowIndex}
+            handleMenuActions={handleMenuActions}
+          />
+        ) : (
+          <MenuDropDown
+            tableBodyRef={tableBodyRef}
+            actionDropDown={actionProps}
+            rowData={rowData}
+            dataTheme={dataTheme}
+            rowIndex={rowIndex}
+            handleMenuActions={handleMenuActions}
+          />
+        )}
       </div>
     );
   }

package/src/qbsTable/QbsTable.tsx

@@ -102,7 +102,8 @@ const QbsTable: React.FC<QbsTableProps> = ({
   defaultRowView = true,
   fullWidthView = false,
   setTableFullView,
-  setRowViewToggle
+  setRowViewToggle,
+  dropType='horizondal'
 }) => {
   const [loading, setLoading] = useState(false);
   const [columns, setColumns] = useState(propColumn);
@@ -234,7 +235,6 @@ const QbsTable: React.FC<QbsTableProps> = ({
 
   // useEffect(() => {
   // }, [columns]);
-  console.log(viewMode);
   const handleClear = ([]) => {
     setCheckedKeys([]);
     handleChecked([]);
@@ -302,7 +302,6 @@ const QbsTable: React.FC<QbsTableProps> = ({
 
   const handleExpanded = useCallback(
     (rowData: any) => {
-      console.log(rowData);
       const keyValue = dataRowKey as string;
       const key = rowData[keyValue];
 
@@ -616,7 +615,6 @@ const QbsTable: React.FC<QbsTableProps> = ({
             key={tableKey + REFRESH_KEY}
             tableKey={tableKey}
             data={data}
-            refreshRow={REFRESH_KEY}
             tableBodyRef={tableBodyRef as React.RefObject<HTMLDivElement>}
             dataTheme={dataTheme}
             wordWrap={wordWrap}
@@ -790,6 +788,7 @@ const QbsTable: React.FC<QbsTableProps> = ({
                 </HeaderCell>
                 <ActionCell
                   tableBodyRef={tableBodyRef}
+                  dropType={dropType}
                   actionProps={actionProps}
                   className={`${classes.cellClass} ${classes.actionCellClass}`}
                   handleMenuActions={handleMenuActions}