qbs-react-grid 1.1.15 → 1.1.17

package/lib/Row.d.ts

@@ -9,6 +9,9 @@ export interface RowProps extends StandardProps {
     rowRef?: any;
     rowSpan?: number;
     index?: number;
+    dataLength?: number;
+    handleParentCallBack?: (index: number) => void;
+    zIndexValue?: number;
 }
 declare const Row: React.ForwardRefExoticComponent<RowProps & React.RefAttributes<HTMLDivElement>>;
 export default Row;

package/lib/Row.js

@@ -9,7 +9,7 @@ var _react = _interopRequireWildcard(require("react"));
 var _utils = require("./utils");
 var _TableContext = _interopRequireDefault(require("./TableContext"));
 var _constants = require("./constants");
-var _excluded = ["classPrefix", "height", "headerHeight", "className", "width", "top", "style", "isHeaderRow", "rowRef", "children", "rowSpan", "index"];
+var _excluded = ["classPrefix", "height", "headerHeight", "className", "width", "top", "style", "isHeaderRow", "rowRef", "children", "rowSpan", "index", "dataLength", "handleParentCallBack", "zIndexValue"];
 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 Row = /*#__PURE__*/_react["default"].forwardRef(function (props, ref) {
@@ -28,6 +28,9 @@ var Row = /*#__PURE__*/_react["default"].forwardRef(function (props, ref) {
     children = props.children,
     rowSpan = props.rowSpan,
     index = props.index,
+    dataLength = props.dataLength,
+    handleParentCallBack = props.handleParentCallBack,
+    zIndexValue = props.zIndexValue,
     rest = (0, _objectWithoutPropertiesLoose2["default"])(props, _excluded);
   var _useContext = (0, _react.useContext)(_TableContext["default"]),
     translateDOMPositionXY = _useContext.translateDOMPositionXY;
@@ -43,15 +46,17 @@ var Row = /*#__PURE__*/_react["default"].forwardRef(function (props, ref) {
     height: isHeaderRow ? headerHeight : height
   }, style);
   var INDEX = index;
-  var styleIndex = 200 - INDEX;
   translateDOMPositionXY === null || translateDOMPositionXY === void 0 ? void 0 : translateDOMPositionXY(styles, 0, top);
   return /*#__PURE__*/_react["default"].createElement("div", (0, _extends2["default"])({
     role: "row"
   }, rest, {
     ref: (0, _utils.mergeRefs)(rowRef, ref),
+    onMouseEnter: function onMouseEnter() {
+      return handleParentCallBack === null || handleParentCallBack === void 0 ? void 0 : handleParentCallBack(INDEX);
+    },
     className: classes,
     style: (0, _extends2["default"])({}, styles, {
-      zIndex: styleIndex
+      zIndex: zIndexValue
     })
   }), children);
 });

package/lib/Table.d.ts

@@ -36,6 +36,7 @@ export interface TableProps<Row, Key> extends Omit<StandardProps, 'onScroll'> {
     height?: number;
     /** The minimum height of the table. The height is maintained even when the content is not stretched. */
     minHeight?: number;
+    columns?: any;
     /** The row of the table has a mouseover effect */
     hover?: boolean;
     /** The height of the table header */

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"],
+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"],
   _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); }
@@ -120,6 +120,7 @@ var Table = /*#__PURE__*/_react["default"].forwardRef(function (props, ref) {
     onTouchEnd = props.onTouchEnd,
     dataTheme = props.dataTheme,
     tableBodyHeight = props.tableBodyHeight,
+    columns = props.columns,
     rest = (0, _objectWithoutPropertiesLoose2["default"])(props, _excluded);
   var _useClassNames = (0, _utils.useClassNames)(classPrefix, typeof classPrefix !== 'undefined'),
     withClassPrefix = _useClassNames.withClassPrefix,
@@ -366,7 +367,7 @@ var Table = /*#__PURE__*/_react["default"].forwardRef(function (props, ref) {
   }));
   var styles = (0, _extends2["default"])({
     width: widthProp || 'auto',
-    height: tableBodyHeight != null ? tableBodyHeight : getTableHeight()
+    height: getTableHeight()
   }, style);
   var renderRowExpanded = (0, _react.useCallback)(function (rowData) {
     var styles = {
@@ -620,6 +621,16 @@ var Table = /*#__PURE__*/_react["default"].forwardRef(function (props, ref) {
     }
     return scrollbars;
   };
+  var _useState2 = (0, _react.useState)(Array(data === null || data === void 0 ? void 0 : data.length).fill(1)),
+    rowZIndices = _useState2[0],
+    setRowZIndices = _useState2[1];
+  var handleParentCallBack = function handleParentCallBack(index) {
+    setRowZIndices(function (currentZIndices) {
+      return currentZIndices.map(function (_, idx) {
+        return idx === index ? 10 : 1;
+      });
+    });
+  };
   var renderTableBody = function renderTableBody(bodyCells, rowWidth) {
     var _visibleRows$current;
     var height = getTableHeight();
@@ -678,7 +689,10 @@ var Table = /*#__PURE__*/_react["default"].forwardRef(function (props, ref) {
             depth: _rowData[_constants.TREE_DEPTH],
             height: nextRowHeight,
             cellHeight: cellHeight,
-            index: index
+            index: index,
+            dataLength: data === null || data === void 0 ? void 0 : data.length,
+            handleParentCallBack: handleParentCallBack,
+            zIndexValue: rowZIndices[index]
           };
           _top += nextRowHeight;
           if (virtualized && !wordWrap) {
@@ -729,9 +743,9 @@ var Table = /*#__PURE__*/_react["default"].forwardRef(function (props, ref) {
     }
     var wheelStyles = {
       position: 'absolute',
-      height: contentHeight,
-      minHeight: tableBodyHeight,
-      maxHeight: tableBodyHeight,
+      // height: contentHeight,
+      minHeight: contentHeight,
+      // maxHeight: tableBodyHeight,
       pointerEvents: isScrolling ? 'none' : undefined
     };
     var topRowStyles = {

package/lib/less/qbs-table.less

@@ -504,3 +504,27 @@
   vertical-align: center !important;
   display: table-cell;
 }
+.row-status:hover .row-status-tooltip {
+  display: block;
+}
+.row-status-tooltip {
+  display: none;
+  // bottom: 40px;
+  position: fixed;
+  width: auto;
+  height: auto;
+  max-width: 300px;
+  max-height: 200px;
+  padding: 10px;
+  border-radius: 8px;
+  border: 1px solid #d6d8dc;
+  background: #fff;
+  box-shadow: 0px 2px 4px 0px rgba(58, 58, 58, 0.15);
+}
+.row-status-tooltip.bottom-position {
+  top: 100%;
+}
+
+.row-status-tooltip.top-position {
+  bottom: 100%;
+}

package/lib/qbsTable/CustomTableCell.d.ts

@@ -3,3 +3,4 @@ export declare const CheckCell: React.FC<any>;
 export declare const ActionCell: React.FC<any>;
 export declare const ExpandCell: React.FC<any>;
 export declare const CustomTableCell: React.FC<any>;
+export declare const CustomRowStatus: React.FC<any>;

package/lib/qbsTable/CustomTableCell.js

@@ -2,17 +2,20 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 exports.__esModule = true;
-exports.ExpandCell = exports.CustomTableCell = exports.CheckCell = exports.ActionCell = void 0;
+exports.ExpandCell = exports.CustomTableCell = exports.CustomRowStatus = exports.CheckCell = exports.ActionCell = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 var _Cell = _interopRequireDefault(require("../Cell"));
 var _handleFormatCell = require("./utilities/handleFormatCell");
 var _menuDropDown = _interopRequireDefault(require("./utilities/menuDropDown"));
 var _reactRouterDom = require("react-router-dom");
 var _excluded = ["rowData", "onChange", "checkedKeys", "dataKey", "dataTheme"],
   _excluded2 = ["rowData", "dataKey", "expandedRowKeys", "onChange"],
-  _excluded3 = ["rowData", "renderCell", "toolTip", "dataKey", "onChange", "rowClick", "type", "path", "link"];
+  _excluded3 = ["rowData", "renderCell", "toolTip", "dataKey", "onChange", "rowClick", "type", "path", "link"],
+  _excluded4 = ["rowData", "toolTip", "dataKey", "onChange", "rowClick", "getIcon", "path", "link"];
+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 CHECKBOX_LINE_HEIGHT = '36px';
 var CheckCell = /*#__PURE__*/_react["default"].memo(function (_ref) {
   var rowData = _ref.rowData,
@@ -104,4 +107,73 @@ var CustomTableCell = /*#__PURE__*/_react["default"].memo(function (_ref4) {
     className: "qbs-table-row-link"
   }, 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;
+exports.CustomTableCell = CustomTableCell;
+var CustomRowStatus = /*#__PURE__*/_react["default"].memo(function (_ref5) {
+  var _path2;
+  var rowData = _ref5.rowData,
+    toolTip = _ref5.toolTip,
+    dataKey = _ref5.dataKey,
+    onChange = _ref5.onChange,
+    rowClick = _ref5.rowClick,
+    getIcon = _ref5.getIcon,
+    path = _ref5.path,
+    link = _ref5.link,
+    props = (0, _objectWithoutPropertiesLoose2["default"])(_ref5, _excluded4);
+  var _useState = (0, _react.useState)('bottom-position'),
+    dropdownPosition = _useState[0],
+    setDropdownPosition = _useState[1];
+  var dropRef = (0, _react.useRef)(null);
+  var menuButtonRef = (0, _react.useRef)(null);
+  var adjustDropdownPosition = function adjustDropdownPosition() {
+    if (menuButtonRef.current && dropRef.current) {
+      var _menuButtonRef$curren;
+      var inputBoxRect = (_menuButtonRef$curren = menuButtonRef.current) === null || _menuButtonRef$curren === void 0 ? void 0 : _menuButtonRef$curren.getBoundingClientRect();
+      var viewportHeight = window.innerHeight;
+      var spaceAbove = inputBoxRect.top;
+      var spaceBelow = viewportHeight - inputBoxRect.bottom;
+      if (spaceAbove > spaceBelow) {
+        setDropdownPosition('top-position');
+      } else {
+        setDropdownPosition('bottom-position');
+      }
+    }
+  };
+  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_Cell["default"], (0, _extends2["default"])({}, props, {
+    dataKey: dataKey,
+    style: {
+      padding: 0,
+      display: 'flex',
+      justifyContent: 'center',
+      alignItems: 'center'
+    },
+    onMouseEnter: function onMouseEnter() {
+      return adjustDropdownPosition();
+    }
+  }), /*#__PURE__*/_react["default"].createElement("div", {
+    className: "row-status"
+  }, !path ? /*#__PURE__*/_react["default"].createElement("span", {
+    ref: menuButtonRef,
+    style: {
+      height: 24,
+      width: 24,
+      display: 'flex'
+    },
+    onClick: function onClick() {
+      return rowClick === null || rowClick === void 0 ? void 0 : rowClick(rowData);
+    }
+  }, getIcon === null || getIcon === void 0 ? void 0 : getIcon(rowData)) : /*#__PURE__*/_react["default"].createElement(_reactRouterDom.Link, {
+    style: {
+      height: 24,
+      width: 24
+    },
+    to: (_path2 = path === null || path === void 0 ? void 0 : path(rowData)) != null ? _path2 : '',
+    className: "qbs-table-row-link"
+  }, getIcon === null || getIcon === void 0 ? void 0 : getIcon(rowData)), /*#__PURE__*/_react["default"].createElement("div", {
+    ref: dropRef,
+    className: "row-status-tooltip " + dropdownPosition,
+    style: {
+      position: 'fixed'
+    }
+  }, toolTip))));
+});
+exports.CustomRowStatus = CustomRowStatus;

package/lib/qbsTable/QbsTable.js

@@ -23,6 +23,7 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 var CHECKBOX_LINE_HEIGHT = '36px';
 var COLUMN_WIDTH = 250;
 var QbsTable = function QbsTable(_ref) {
+  var _Object$keys;
   var handleColumnSort = _ref.handleColumnSort,
     data = _ref.data,
     propColumn = _ref.columns,
@@ -82,7 +83,8 @@ var QbsTable = function QbsTable(_ref) {
     selectedRows = _ref.selectedRows,
     _ref$headerHeight = _ref.headerHeight,
     headerHeight = _ref$headerHeight === void 0 ? 40 : _ref$headerHeight,
-    tableBodyHeight = _ref.tableBodyHeight;
+    tableBodyHeight = _ref.tableBodyHeight,
+    customRowStatus = _ref.customRowStatus;
   var _useState = (0, _react.useState)(false),
     loading = _useState[0],
     setLoading = _useState[1];
@@ -394,12 +396,16 @@ var QbsTable = function QbsTable(_ref) {
     dataTheme: dataTheme,
     wordWrap: wordWrap,
     sortColumn: sortColumn,
+    style: {
+      position: 'relative'
+    },
     sortType: sortType,
     onSortColumn: handleSortColumn,
     onRowClick: onRowClick,
     tableBodyHeight: tableBodyHeight,
     cellBordered: cellBordered,
     bordered: bordered,
+    columns: columns,
     minHeight: minHeight,
     headerHeight: headerHeight,
     loading: isLoading != null ? isLoading : loading,
@@ -465,6 +471,20 @@ var QbsTable = function QbsTable(_ref) {
     className: "" + classes.tableCheckBoxClass,
     onChange: handleCheck,
     dataTheme: dataTheme
+  })), customRowStatus && ((_Object$keys = Object.keys(customRowStatus)) === null || _Object$keys === void 0 ? void 0 : _Object$keys.length) > 0 && /*#__PURE__*/_react["default"].createElement(_Column["default"], {
+    width: 50,
+    align: "center",
+    fixed: "left"
+  }, /*#__PURE__*/_react["default"].createElement(_HeaderCell["default"], {
+    verticalAlign: findGrouped() ? 'middle' : undefined,
+    className: " " + classes.headerlClass
+  }, ' '), /*#__PURE__*/_react["default"].createElement(_CustomTableCell.CustomRowStatus, {
+    getIcon: customRowStatus.getIcon,
+    dataKey: customRowStatus.field,
+    rowClick: customRowStatus.onClick,
+    path: customRowStatus.getPath,
+    link: customRowStatus.link,
+    toolTip: customRowStatus.toolTip
   })), columnsRendered, !actionProps || (actionProps === null || actionProps === void 0 ? void 0 : actionProps.length) === 0 && columnToggle && /*#__PURE__*/_react["default"].createElement(_Column["default"], {
     width: 40,
     fixed: "right"

package/lib/qbsTable/commontypes.d.ts

@@ -98,6 +98,15 @@ export interface QbsTableProps {
     handleResetColumns?: () => void;
     headerHeight?: number;
     tableBodyHeight?: string;
+    customRowStatus?: {
+        getIcon?: (data: any) => ReactElement;
+        onClick?: (rowData: any) => void;
+        hidden?: boolean;
+        toolTip?: string | ReactElement;
+        link?: boolean;
+        field?: boolean;
+        getPath?: (data: any) => string;
+    };
 }
 export interface QbsTableToolbarProps {
     title?: string;

package/lib/qbsTable/utilities/ToolTip.js

@@ -8,25 +8,37 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 var TooltipComponent = function TooltipComponent(_ref) {
   var title = _ref.title,
     children = _ref.children;
-  var _useState = (0, _react.useState)(0),
-    scrollY = _useState[0],
-    setScrollY = _useState[1];
-  var _useState2 = (0, _react.useState)(true),
-    isScrollingUp = _useState2[0],
-    setIsScrollingUp = _useState2[1];
-  var handleScroll = function handleScroll() {
-    setIsScrollingUp(window.scrollY < scrollY);
-    setScrollY(window.scrollY);
+  var _useState = (0, _react.useState)('bottom-position'),
+    dropdownPosition = _useState[0],
+    setDropdownPosition = _useState[1];
+  var dropRef = (0, _react.useRef)(null);
+  var menuButtonRef = (0, _react.useRef)(null);
+  var adjustDropdownPosition = function adjustDropdownPosition() {
+    if (menuButtonRef.current && dropRef.current) {
+      var _menuButtonRef$curren;
+      var inputBoxRect = (_menuButtonRef$curren = menuButtonRef.current) === null || _menuButtonRef$curren === void 0 ? void 0 : _menuButtonRef$curren.getBoundingClientRect();
+      var viewportHeight = window.innerHeight;
+      var spaceAbove = inputBoxRect.top;
+      var spaceBelow = viewportHeight - inputBoxRect.bottom;
+      if (spaceAbove > spaceBelow) {
+        setDropdownPosition('top-position');
+      } else {
+        setDropdownPosition('bottom-position');
+      }
+    }
   };
-  (0, _react.useEffect)(function () {
-    window.addEventListener('scroll', handleScroll);
-    return function () {
-      window.removeEventListener('scroll', handleScroll);
-    };
-  }, [scrollY]);
   return /*#__PURE__*/_react["default"].createElement("div", {
-    className: "qbs-table-tooltip " + (!isScrollingUp ? 'up' : 'down')
-  }, /*#__PURE__*/_react["default"].createElement("span", null, children), /*#__PURE__*/_react["default"].createElement("span", {
+    className: "qbs-table-tooltip " + (dropdownPosition == 'bottom-position' ? 'down' : 'up') + " "
+  }, /*#__PURE__*/_react["default"].createElement("span", {
+    ref: menuButtonRef,
+    style: {
+      display: 'flex'
+    },
+    onMouseEnter: function onMouseEnter() {
+      return adjustDropdownPosition();
+    }
+  }, children), /*#__PURE__*/_react["default"].createElement("span", {
+    ref: dropRef,
     className: "tooltiptext"
   }, title));
 };

package/package.json

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

package/src/Row.tsx

@@ -13,6 +13,9 @@ export interface RowProps extends StandardProps {
   rowRef?: any;
   rowSpan?: number;
   index?: number;
+  dataLength?: number;
+  handleParentCallBack?: (index: number) => void;
+  zIndexValue?: number;
 }
 
 const Row = React.forwardRef((props: RowProps, ref: React.Ref<HTMLDivElement>) => {
@@ -29,6 +32,9 @@ const Row = React.forwardRef((props: RowProps, ref: React.Ref<HTMLDivElement>) =
     children,
     rowSpan,
     index,
+    dataLength,
+    handleParentCallBack,
+    zIndexValue,
     ...rest
   } = props;
 
@@ -42,7 +48,6 @@ const Row = React.forwardRef((props: RowProps, ref: React.Ref<HTMLDivElement>) =
     ...style
   };
   const INDEX = index as number;
-  const styleIndex = 200 - INDEX;
   translateDOMPositionXY?.(styles as CSSStyleDeclaration, 0, top);
 
   return (
@@ -50,8 +55,9 @@ const Row = React.forwardRef((props: RowProps, ref: React.Ref<HTMLDivElement>) =
       role="row"
       {...rest}
       ref={mergeRefs(rowRef, ref)}
+      onMouseEnter={() => handleParentCallBack?.(INDEX)}
       className={classes}
-      style={{ ...styles, zIndex: styleIndex }}
+      style={{ ...styles, zIndex: zIndexValue }}
     >
       {children}
     </div>

package/src/Table.tsx

@@ -6,14 +6,40 @@ import PropTypes from 'prop-types';
 import React, { useCallback, 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 {
   StandardProps,
@@ -101,6 +127,7 @@ export interface TableProps<Row, Key> extends Omit<StandardProps, 'onScroll'> {
   /** The minimum height of the table. The height is maintained even when the content is not stretched. */
   minHeight?: number;
 
+  columns?: any;
   /** The row of the table has a mouseover effect */
   hover?: boolean;
 
@@ -307,6 +334,7 @@ const Table = React.forwardRef(<Row extends RowDataType, Key>(props: TableProps<
     onTouchEnd,
     dataTheme,
     tableBodyHeight,
+    columns,
     ...rest
   } = props;
 
@@ -567,7 +595,9 @@ const Table = React.forwardRef(<Row extends RowDataType, Key>(props: TableProps<
 
   const styles = {
     width: widthProp || 'auto',
-    height: tableBodyHeight ?? getTableHeight(),
+    height: getTableHeight(),
+    // height: tableBodyHeight ?? getTableHeight(),
+
     ...style
   };
 
@@ -694,7 +724,6 @@ const Table = React.forwardRef(<Row extends RowDataType, Key>(props: TableProps<
         </>
       );
     }
-
     return (
       <Row {...restRowProps} data-depth={depth} style={rowStyles}>
         {renderRowProp ? renderRowProp(rowNode, rowData) : rowNode}
@@ -915,7 +944,11 @@ const Table = React.forwardRef(<Row extends RowDataType, Key>(props: TableProps<
 
     return scrollbars;
   };
+  const [rowZIndices, setRowZIndices] = useState(Array(data?.length).fill(1));
 
+  const handleParentCallBack = (index: number) => {
+    setRowZIndices(currentZIndices => currentZIndices.map((_, idx) => (idx === index ? 10 : 1)));
+  };
   const renderTableBody = (bodyCells: any[], rowWidth: number) => {
     const height = getTableHeight();
     const bodyHeight = height - headerHeight;
@@ -985,7 +1018,10 @@ const Table = React.forwardRef(<Row extends RowDataType, Key>(props: TableProps<
             depth: rowData[TREE_DEPTH],
             height: nextRowHeight,
             cellHeight,
-            index: index
+            index: index,
+            dataLength: data?.length,
+            handleParentCallBack: handleParentCallBack,
+            zIndexValue: rowZIndices[index]
           };
 
           top += nextRowHeight;
@@ -1045,9 +1081,9 @@ const Table = React.forwardRef(<Row extends RowDataType, Key>(props: TableProps<
 
     const wheelStyles: React.CSSProperties = {
       position: 'absolute',
-      height: contentHeight,
-      minHeight: tableBodyHeight,
-      maxHeight: tableBodyHeight,
+      // height: contentHeight,
+      minHeight: contentHeight,
+      // maxHeight: tableBodyHeight,
       pointerEvents: isScrolling ? 'none' : undefined
     };
     const topRowStyles = { height: topHideHeight };

package/src/less/qbs-table.less

@@ -504,3 +504,27 @@
   vertical-align: center !important;
   display: table-cell;
 }
+.row-status:hover .row-status-tooltip {
+  display: block;
+}
+.row-status-tooltip {
+  display: none;
+  // bottom: 40px;
+  position: fixed;
+  width: auto;
+  height: auto;
+  max-width: 300px;
+  max-height: 200px;
+  padding: 10px;
+  border-radius: 8px;
+  border: 1px solid #d6d8dc;
+  background: #fff;
+  box-shadow: 0px 2px 4px 0px rgba(58, 58, 58, 0.15);
+}
+.row-status-tooltip.bottom-position {
+  top: 100%;
+}
+
+.row-status-tooltip.top-position {
+  bottom: 100%;
+}

package/src/qbsTable/CustomTableCell.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState, useRef } from 'react';
 
 import Cell from '../Cell';
 import { handleCellFormat } from './utilities/handleFormatCell';
@@ -81,3 +81,62 @@ export const CustomTableCell: React.FC<any> = React.memo(
     );
   }
 );
+export const CustomRowStatus: React.FC<any> = React.memo(
+  ({ rowData, toolTip, dataKey, onChange, rowClick, getIcon, path, link, ...props }) => {
+    const [dropdownPosition, setDropdownPosition] = useState('bottom-position');
+    const dropRef = useRef(null);
+    const menuButtonRef = useRef<HTMLElement>(null);
+    const adjustDropdownPosition = () => {
+      if (menuButtonRef.current && dropRef.current) {
+        const inputBoxRect = menuButtonRef.current?.getBoundingClientRect();
+        const viewportHeight = window.innerHeight;
+
+        const spaceAbove = inputBoxRect.top;
+        const spaceBelow = viewportHeight - inputBoxRect.bottom;
+        if (spaceAbove > spaceBelow) {
+          setDropdownPosition('top-position');
+        } else {
+          setDropdownPosition('bottom-position');
+        }
+      }
+    };
+
+    return (
+      <>
+        <Cell
+          {...props}
+          dataKey={dataKey}
+          style={{ padding: 0, display: 'flex', justifyContent: 'center', alignItems: 'center' }}
+          onMouseEnter={() => adjustDropdownPosition()}
+        >
+          <div className="row-status">
+            {!path ? (
+              <span
+                ref={menuButtonRef}
+                style={{ height: 24, width: 24, display: 'flex' }}
+                onClick={() => rowClick?.(rowData)}
+              >
+                {getIcon?.(rowData)}
+              </span>
+            ) : (
+              <Link
+                style={{ height: 24, width: 24 }}
+                to={path?.(rowData) ?? ''}
+                className="qbs-table-row-link"
+              >
+                {getIcon?.(rowData)}
+              </Link>
+            )}
+            <div
+              ref={dropRef}
+              className={`row-status-tooltip ${dropdownPosition}`}
+              style={{ position: 'fixed' }}
+            >
+              {toolTip}
+            </div>
+          </div>
+        </Cell>
+      </>
+    );
+  }
+);