qbs-react-grid 1.1.44 → 1.1.46

package/es/Table.d.ts

@@ -98,6 +98,7 @@ export interface TableProps<Row, Key> extends Omit<StandardProps, 'onScroll'> {
     dataTheme?: string;
     /** Tree table, the callback function in the expanded node */
     renderTreeToggle?: (expandButton: React.ReactNode, rowData?: Row, expanded?: boolean) => React.ReactNode;
+    tableKey?: string;
     /** Customize what you can do to expand a zone */
     renderRowExpanded?: (rowData?: Row) => React.ReactNode;
     /** Custom row element */

package/es/Table.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-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"],
+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"],
   _excluded2 = ["depth", "rowIndex"],
   _excluded3 = ["cellHeight"];
 import { getTranslateDOMPositionXY } from 'dom-lib/translateDOMPositionXY';
@@ -115,11 +115,13 @@ var Table = /*#__PURE__*/React.forwardRef(function (props, ref) {
     tableBodyHeight = props.tableBodyHeight,
     columns = props.columns,
     tableBodyRef = props.tableBodyRef,
+    tableKey = props.tableKey,
     rest = _objectWithoutPropertiesLoose(props, _excluded);
   var _useClassNames = useClassNames(classPrefix, typeof classPrefix !== 'undefined'),
     withClassPrefix = _useClassNames.withClassPrefix,
     mergeCls = _useClassNames.merge,
     prefix = _useClassNames.prefix;
+  var childTableRef = useRef(null);
 
   // Use `forceUpdate` to force the component to re-render after manipulating the DOM.
   var _useReducer = useReducer(function (x) {
@@ -283,6 +285,7 @@ var Table = /*#__PURE__*/React.forwardRef(function (props, ref) {
       minScrollY: minScrollY,
       minScrollX: minScrollX,
       scrollX: scrollX,
+      tableKey: tableKey,
       setScrollX: setScrollX,
       setScrollY: setScrollY,
       forceUpdatePosition: forceUpdatePosition,
@@ -293,12 +296,14 @@ var Table = /*#__PURE__*/React.forwardRef(function (props, ref) {
       onTouchEnd: onTouchEnd
     }),
     isScrolling = _useScrollListener.isScrolling,
+    isChildFocused = _useScrollListener.isChildFocused,
     onScrollHorizontal = _useScrollListener.onScrollHorizontal,
     onScrollVertical = _useScrollListener.onScrollVertical,
     onScrollBody = _useScrollListener.onScrollBody,
     onScrollTop = _useScrollListener.onScrollTop,
     onScrollLeft = _useScrollListener.onScrollLeft,
-    onScrollTo = _useScrollListener.onScrollTo;
+    onScrollTo = _useScrollListener.onScrollTo,
+    setIsChildFocused = _useScrollListener.setIsChildFocused;
   var _useCellDescriptor = useCellDescriptor({
       children: children,
       rtl: rtl,
@@ -363,6 +368,12 @@ var Table = /*#__PURE__*/React.forwardRef(function (props, ref) {
     width: widthProp || 'auto',
     height: getTableHeight()
   }, style);
+  var handleChildFocus = useCallback(function () {
+    setIsChildFocused(true);
+  }, []);
+  var handleChildBlur = useCallback(function () {
+    setIsChildFocused(false);
+  }, []);
   var renderRowExpanded = useCallback(function (rowData) {
     var _tableRef$current;
     var styles = {
@@ -371,8 +382,11 @@ var Table = /*#__PURE__*/React.forwardRef(function (props, ref) {
     };
     if (typeof renderRowExpandedProp === 'function') {
       return /*#__PURE__*/React.createElement("div", {
+        ref: childTableRef,
         className: prefix('row-expanded'),
-        style: styles
+        style: styles,
+        onMouseEnter: handleChildFocus,
+        onMouseLeave: handleChildBlur
       }, renderRowExpandedProp(rowData));
     }
     return null;
@@ -447,7 +461,9 @@ var Table = /*#__PURE__*/React.forwardRef(function (props, ref) {
     } else {
       rowNode = /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(CellGroup, null, mergeCells(cells)), shouldRenderExpandedRow && renderRowExpanded(rowData));
     }
-    return /*#__PURE__*/React.createElement(Row, _extends({}, restRowProps, {
+    return /*#__PURE__*/React.createElement(Row, _extends({
+      rowRef: childTableRef
+    }, restRowProps, {
       "data-depth": depth,
       style: _extends({}, rowStyles)
       // zIndexValue={shouldRenderExpandedRow ? 100 : props.zIndexValue}
@@ -593,7 +609,7 @@ var Table = /*#__PURE__*/React.forwardRef(function (props, ref) {
       return null;
     }
     var scrollbars = [];
-    if (hasHorizontalScrollbar) {
+    if (hasHorizontalScrollbar && !(tableKey === 'parent' && isChildFocused)) {
       scrollbars.push( /*#__PURE__*/React.createElement(Scrollbar, {
         key: "scrollbar",
         tableId: id,
@@ -606,7 +622,7 @@ var Table = /*#__PURE__*/React.forwardRef(function (props, ref) {
         ref: scrollbarXRef
       }));
     }
-    if (hasVerticalScrollbar) {
+    if (hasVerticalScrollbar && !(tableKey === 'parent' && isChildFocused)) {
       scrollbars.push( /*#__PURE__*/React.createElement(Scrollbar, {
         vertical: true,
         key: "vertical-scrollbar",

package/es/qbsTable/QbsTable.js

@@ -83,7 +83,9 @@ var QbsTable = function QbsTable(_ref) {
     customRowStatus = _ref.customRowStatus,
     searchPlaceholder = _ref.searchPlaceholder,
     _ref$rowExpandedHeigh = _ref.rowExpandedHeight,
-    rowExpandedHeight = _ref$rowExpandedHeigh === void 0 ? 517 : _ref$rowExpandedHeigh;
+    rowExpandedHeight = _ref$rowExpandedHeigh === void 0 ? 517 : _ref$rowExpandedHeigh,
+    renderSortIcon = _ref.renderSortIcon,
+    tableKey = _ref.tableKey;
   var _useState = useState(false),
     loading = _useState[0],
     setLoading = _useState[1];
@@ -347,7 +349,8 @@ var QbsTable = function QbsTable(_ref) {
           dataTheme: dataTheme,
           verticalAlign: 'middle',
           className: " " + classes.headerClass,
-          sortKey: child.sortKey
+          sortKey: child.sortKey,
+          renderSortIcon: renderSortIcon
         }, child.title), child.customCell || child.link ? /*#__PURE__*/React.createElement(CustomTableCell, {
           renderCell: child.renderCell,
           dataKey: child.field,
@@ -372,7 +375,8 @@ var QbsTable = function QbsTable(_ref) {
         dataTheme: dataTheme,
         verticalAlign: findGrouped() ? 'middle' : undefined,
         className: " " + classes.headerClass,
-        sortKey: sortKey
+        sortKey: sortKey,
+        renderSortIcon: renderSortIcon
       }, title), customCell || link ? /*#__PURE__*/React.createElement(CustomTableCell, {
         renderCell: renderCell,
         dataKey: field,
@@ -396,6 +400,8 @@ var QbsTable = function QbsTable(_ref) {
     className: "qbs-table-border-wrap"
   }, /*#__PURE__*/React.createElement(Table, {
     height: height,
+    key: tableKey,
+    tableKey: tableKey,
     data: data,
     tableBodyRef: tableBodyRef,
     dataTheme: dataTheme,
@@ -431,7 +437,8 @@ var QbsTable = function QbsTable(_ref) {
     fixed: "left"
   }, /*#__PURE__*/React.createElement(HeaderCell, {
     verticalAlign: findGrouped() ? 'middle' : undefined,
-    className: " " + classes.headerlClass
+    className: " " + classes.headerlClass,
+    renderSortIcon: renderSortIcon
   }, "#"), /*#__PURE__*/React.createElement(ExpandCell, {
     dataKey: dataRowKey,
     expandedRowKeys: expandedRowKeys,
@@ -446,6 +453,7 @@ var QbsTable = function QbsTable(_ref) {
     },
     verticalAlign: findGrouped() ? 'middle' : undefined,
     dataTheme: dataTheme,
+    renderSortIcon: renderSortIcon,
     className: "qbs-checkbox-border-none " + classes.headerlClass
   }, /*#__PURE__*/React.createElement("div", {
     style: {
@@ -483,7 +491,8 @@ var QbsTable = function QbsTable(_ref) {
     fixed: "left"
   }, /*#__PURE__*/React.createElement(HeaderCell, {
     verticalAlign: findGrouped() ? 'middle' : undefined,
-    className: " " + classes.headerlClass
+    className: " " + classes.headerlClass,
+    renderSortIcon: renderSortIcon
   }, ' '), /*#__PURE__*/React.createElement(CustomRowStatus, {
     getIcon: customRowStatus.getIcon,
     dataKey: customRowStatus.field,
@@ -497,7 +506,8 @@ var QbsTable = function QbsTable(_ref) {
   }, /*#__PURE__*/React.createElement(HeaderCell, {
     verticalAlign: findGrouped() ? 'middle' : undefined,
     className: " " + classes.headerlClass,
-    dataTheme: dataTheme
+    dataTheme: dataTheme,
+    renderSortIcon: renderSortIcon
   }, /*#__PURE__*/React.createElement(ColumToggle, {
     columns: columns,
     onToggle: handleToggle,
@@ -513,7 +523,8 @@ var QbsTable = function QbsTable(_ref) {
   }, /*#__PURE__*/React.createElement(HeaderCell, {
     verticalAlign: findGrouped() ? 'middle' : undefined,
     className: " " + classes.headerlClass,
-    dataTheme: dataTheme
+    dataTheme: dataTheme,
+    renderSortIcon: renderSortIcon
   }, !columnToggle ? /*#__PURE__*/React.createElement(SettingsIcon, null) : /*#__PURE__*/React.createElement(ColumToggle, {
     columns: columns,
     onToggle: handleToggle,

package/es/qbsTable/commontypes.d.ts

@@ -44,6 +44,7 @@ export interface ActionProps {
     hide?: (data: any, index?: number) => boolean;
 }
 export interface QbsTableProps {
+    tableKey?: string;
     isLoading?: boolean;
     columns: QbsColumnProps[];
     data: readonly any[];
@@ -110,6 +111,7 @@ export interface QbsTableProps {
         getPath?: (data: any) => string;
     };
     rowExpandedHeight?: number;
+    renderSortIcon?: (sortType?: 'desc' | 'asc') => React.ReactNode;
 }
 export interface QbsTableToolbarProps {
     title?: string;

package/es/utils/useScrollListener.d.ts

@@ -21,6 +21,7 @@ interface ScrollListenerProps {
     minScrollY: React.MutableRefObject<number>;
     minScrollX: React.MutableRefObject<number>;
     scrollX: React.MutableRefObject<number>;
+    tableKey?: string;
     setScrollX: (v: number) => void;
     setScrollY: (v: number) => void;
     virtualized?: boolean;
@@ -39,6 +40,7 @@ interface ScrollListenerProps {
  */
 declare const useScrollListener: (props: ScrollListenerProps) => {
     isScrolling: boolean;
+    isChildFocused: boolean;
     onScrollHorizontal: (delta: number) => void;
     onScrollVertical: (delta: number, event: any) => void;
     onScrollBody: (event: any) => void;
@@ -48,5 +50,6 @@ declare const useScrollListener: (props: ScrollListenerProps) => {
         x?: number;
         y?: number;
     }) => void;
+    setIsChildFocused: React.Dispatch<React.SetStateAction<boolean>>;
 };
 export default useScrollListener;

package/es/utils/useScrollListener.js

@@ -67,14 +67,18 @@ var useScrollListener = function useScrollListener(props) {
     getTableHeight = props.getTableHeight,
     contentHeight = props.contentHeight,
     headerHeight = props.headerHeight,
-    rtl = props.rtl;
+    rtl = props.rtl,
+    tableKey = props.tableKey;
   var wheelListener = useRef();
   var touchStartListener = useRef();
   var touchMoveListener = useRef();
   var touchEndListener = useRef();
   var _useState = useState(false),
-    isScrolling = _useState[0],
-    setScrolling = _useState[1];
+    isChildFocused = _useState[0],
+    setIsChildFocused = _useState[1];
+  var _useState2 = useState(false),
+    isScrolling = _useState2[0],
+    setScrolling = _useState2[1];
   var touchX = useRef(0);
   var touchY = useRef(0);
   var disableEventsTimeoutId = useRef(null);
@@ -86,13 +90,13 @@ var useScrollListener = function useScrollListener(props) {
   // The vertical starting value within the inertial sliding range.
   var momentumStartY = useRef(0);
   var shouldHandleWheelX = useCallback(function (delta) {
-    if (delta === 0 || disabledScroll || loading) {
+    if (delta === 0 || disabledScroll || loading || isChildFocused) {
       return false;
     }
     return true;
   }, [disabledScroll, loading]);
   var shouldHandleWheelY = useCallback(function (delta) {
-    if (delta === 0 || disabledScroll || loading || autoHeight) {
+    if (delta === 0 || disabledScroll || loading || autoHeight || isChildFocused) {
       return false;
     }
     if (typeof scrollY.current === 'number' && typeof minScrollY.current === 'number') {
@@ -116,9 +120,10 @@ var useScrollListener = function useScrollListener(props) {
    * @param momentumOptions The configuration of inertial scrolling is used for the touch event.
    */
   var handleWheel = useCallback(function (deltaX, deltaY, momentumOptions, event) {
-    if (!tableRef.current) {
+    if (!tableRef.current || tableKey === 'parent' && isChildFocused) {
       return;
     }
+    // setIsChildFocused(false);
     var nextScrollX = contentWidth.current <= tableWidth.current ? 0 : scrollX.current - deltaX;
     var nextScrollY = scrollY.current - deltaY;
     var y = Math.min(0, nextScrollY < minScrollY.current ? minScrollY.current : nextScrollY);
@@ -202,6 +207,7 @@ var useScrollListener = function useScrollListener(props) {
     if (!isTouching.current) {
       return;
     }
+    console.log('handleTouchMove');
     var _event$touches$2 = event.touches[0],
       pageX = _event$touches$2.pageX,
       pageY = _event$touches$2.pageY;
@@ -235,6 +241,7 @@ 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);
@@ -398,12 +405,14 @@ var useScrollListener = function useScrollListener(props) {
   }, [handleWheel]);
   return {
     isScrolling: isScrolling,
+    isChildFocused: isChildFocused,
     onScrollHorizontal: onScrollHorizontal,
     onScrollVertical: onScrollVertical,
     onScrollBody: onScrollBody,
     onScrollTop: onScrollTop,
     onScrollLeft: onScrollLeft,
-    onScrollTo: onScrollTo
+    onScrollTo: onScrollTo,
+    setIsChildFocused: setIsChildFocused
   };
 };
 export default useScrollListener;

package/lib/Table.d.ts

@@ -98,6 +98,7 @@ export interface TableProps<Row, Key> extends Omit<StandardProps, 'onScroll'> {
     dataTheme?: string;
     /** Tree table, the callback function in the expanded node */
     renderTreeToggle?: (expandButton: React.ReactNode, rowData?: Row, expanded?: boolean) => React.ReactNode;
+    tableKey?: string;
     /** Customize what you can do to expand a zone */
     renderRowExpanded?: (rowData?: Row) => React.ReactNode;
     /** Custom row element */

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"],
+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"],
   _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); }
@@ -122,11 +122,13 @@ var Table = /*#__PURE__*/_react["default"].forwardRef(function (props, ref) {
     tableBodyHeight = props.tableBodyHeight,
     columns = props.columns,
     tableBodyRef = props.tableBodyRef,
+    tableKey = props.tableKey,
     rest = (0, _objectWithoutPropertiesLoose2["default"])(props, _excluded);
   var _useClassNames = (0, _utils.useClassNames)(classPrefix, typeof classPrefix !== 'undefined'),
     withClassPrefix = _useClassNames.withClassPrefix,
     mergeCls = _useClassNames.merge,
     prefix = _useClassNames.prefix;
+  var childTableRef = (0, _react.useRef)(null);
 
   // Use `forceUpdate` to force the component to re-render after manipulating the DOM.
   var _useReducer = (0, _react.useReducer)(function (x) {
@@ -290,6 +292,7 @@ var Table = /*#__PURE__*/_react["default"].forwardRef(function (props, ref) {
       minScrollY: minScrollY,
       minScrollX: minScrollX,
       scrollX: scrollX,
+      tableKey: tableKey,
       setScrollX: setScrollX,
       setScrollY: setScrollY,
       forceUpdatePosition: forceUpdatePosition,
@@ -300,12 +303,14 @@ var Table = /*#__PURE__*/_react["default"].forwardRef(function (props, ref) {
       onTouchEnd: onTouchEnd
     }),
     isScrolling = _useScrollListener.isScrolling,
+    isChildFocused = _useScrollListener.isChildFocused,
     onScrollHorizontal = _useScrollListener.onScrollHorizontal,
     onScrollVertical = _useScrollListener.onScrollVertical,
     onScrollBody = _useScrollListener.onScrollBody,
     onScrollTop = _useScrollListener.onScrollTop,
     onScrollLeft = _useScrollListener.onScrollLeft,
-    onScrollTo = _useScrollListener.onScrollTo;
+    onScrollTo = _useScrollListener.onScrollTo,
+    setIsChildFocused = _useScrollListener.setIsChildFocused;
   var _useCellDescriptor = (0, _utils.useCellDescriptor)({
       children: children,
       rtl: rtl,
@@ -370,6 +375,12 @@ var Table = /*#__PURE__*/_react["default"].forwardRef(function (props, ref) {
     width: widthProp || 'auto',
     height: getTableHeight()
   }, style);
+  var handleChildFocus = (0, _react.useCallback)(function () {
+    setIsChildFocused(true);
+  }, []);
+  var handleChildBlur = (0, _react.useCallback)(function () {
+    setIsChildFocused(false);
+  }, []);
   var renderRowExpanded = (0, _react.useCallback)(function (rowData) {
     var _tableRef$current;
     var styles = {
@@ -378,8 +389,11 @@ var Table = /*#__PURE__*/_react["default"].forwardRef(function (props, ref) {
     };
     if (typeof renderRowExpandedProp === 'function') {
       return /*#__PURE__*/_react["default"].createElement("div", {
+        ref: childTableRef,
         className: prefix('row-expanded'),
-        style: styles
+        style: styles,
+        onMouseEnter: handleChildFocus,
+        onMouseLeave: handleChildBlur
       }, renderRowExpandedProp(rowData));
     }
     return null;
@@ -454,7 +468,9 @@ var Table = /*#__PURE__*/_react["default"].forwardRef(function (props, ref) {
     } else {
       rowNode = /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_CellGroup["default"], null, (0, _utils.mergeCells)(cells)), shouldRenderExpandedRow && renderRowExpanded(rowData));
     }
-    return /*#__PURE__*/_react["default"].createElement(_Row["default"], (0, _extends2["default"])({}, restRowProps, {
+    return /*#__PURE__*/_react["default"].createElement(_Row["default"], (0, _extends2["default"])({
+      rowRef: childTableRef
+    }, restRowProps, {
       "data-depth": depth,
       style: (0, _extends2["default"])({}, rowStyles)
       // zIndexValue={shouldRenderExpandedRow ? 100 : props.zIndexValue}
@@ -600,7 +616,7 @@ var Table = /*#__PURE__*/_react["default"].forwardRef(function (props, ref) {
       return null;
     }
     var scrollbars = [];
-    if (hasHorizontalScrollbar) {
+    if (hasHorizontalScrollbar && !(tableKey === 'parent' && isChildFocused)) {
       scrollbars.push( /*#__PURE__*/_react["default"].createElement(_Scrollbar["default"], {
         key: "scrollbar",
         tableId: id,
@@ -613,7 +629,7 @@ var Table = /*#__PURE__*/_react["default"].forwardRef(function (props, ref) {
         ref: scrollbarXRef
       }));
     }
-    if (hasVerticalScrollbar) {
+    if (hasVerticalScrollbar && !(tableKey === 'parent' && isChildFocused)) {
       scrollbars.push( /*#__PURE__*/_react["default"].createElement(_Scrollbar["default"], {
         vertical: true,
         key: "vertical-scrollbar",

package/lib/qbsTable/QbsTable.js

@@ -89,7 +89,9 @@ var QbsTable = function QbsTable(_ref) {
     customRowStatus = _ref.customRowStatus,
     searchPlaceholder = _ref.searchPlaceholder,
     _ref$rowExpandedHeigh = _ref.rowExpandedHeight,
-    rowExpandedHeight = _ref$rowExpandedHeigh === void 0 ? 517 : _ref$rowExpandedHeigh;
+    rowExpandedHeight = _ref$rowExpandedHeigh === void 0 ? 517 : _ref$rowExpandedHeigh,
+    renderSortIcon = _ref.renderSortIcon,
+    tableKey = _ref.tableKey;
   var _useState = (0, _react.useState)(false),
     loading = _useState[0],
     setLoading = _useState[1];
@@ -353,7 +355,8 @@ var QbsTable = function QbsTable(_ref) {
           dataTheme: dataTheme,
           verticalAlign: 'middle',
           className: " " + classes.headerClass,
-          sortKey: child.sortKey
+          sortKey: child.sortKey,
+          renderSortIcon: renderSortIcon
         }, child.title), child.customCell || child.link ? /*#__PURE__*/_react["default"].createElement(_CustomTableCell.CustomTableCell, {
           renderCell: child.renderCell,
           dataKey: child.field,
@@ -378,7 +381,8 @@ var QbsTable = function QbsTable(_ref) {
         dataTheme: dataTheme,
         verticalAlign: findGrouped() ? 'middle' : undefined,
         className: " " + classes.headerClass,
-        sortKey: sortKey
+        sortKey: sortKey,
+        renderSortIcon: renderSortIcon
       }, title), customCell || link ? /*#__PURE__*/_react["default"].createElement(_CustomTableCell.CustomTableCell, {
         renderCell: renderCell,
         dataKey: field,
@@ -402,6 +406,8 @@ var QbsTable = function QbsTable(_ref) {
     className: "qbs-table-border-wrap"
   }, /*#__PURE__*/_react["default"].createElement(_Table["default"], {
     height: height,
+    key: tableKey,
+    tableKey: tableKey,
     data: data,
     tableBodyRef: tableBodyRef,
     dataTheme: dataTheme,
@@ -437,7 +443,8 @@ var QbsTable = function QbsTable(_ref) {
     fixed: "left"
   }, /*#__PURE__*/_react["default"].createElement(_HeaderCell["default"], {
     verticalAlign: findGrouped() ? 'middle' : undefined,
-    className: " " + classes.headerlClass
+    className: " " + classes.headerlClass,
+    renderSortIcon: renderSortIcon
   }, "#"), /*#__PURE__*/_react["default"].createElement(_CustomTableCell.ExpandCell, {
     dataKey: dataRowKey,
     expandedRowKeys: expandedRowKeys,
@@ -452,6 +459,7 @@ var QbsTable = function QbsTable(_ref) {
     },
     verticalAlign: findGrouped() ? 'middle' : undefined,
     dataTheme: dataTheme,
+    renderSortIcon: renderSortIcon,
     className: "qbs-checkbox-border-none " + classes.headerlClass
   }, /*#__PURE__*/_react["default"].createElement("div", {
     style: {
@@ -489,7 +497,8 @@ var QbsTable = function QbsTable(_ref) {
     fixed: "left"
   }, /*#__PURE__*/_react["default"].createElement(_HeaderCell["default"], {
     verticalAlign: findGrouped() ? 'middle' : undefined,
-    className: " " + classes.headerlClass
+    className: " " + classes.headerlClass,
+    renderSortIcon: renderSortIcon
   }, ' '), /*#__PURE__*/_react["default"].createElement(_CustomTableCell.CustomRowStatus, {
     getIcon: customRowStatus.getIcon,
     dataKey: customRowStatus.field,
@@ -503,7 +512,8 @@ var QbsTable = function QbsTable(_ref) {
   }, /*#__PURE__*/_react["default"].createElement(_HeaderCell["default"], {
     verticalAlign: findGrouped() ? 'middle' : undefined,
     className: " " + classes.headerlClass,
-    dataTheme: dataTheme
+    dataTheme: dataTheme,
+    renderSortIcon: renderSortIcon
   }, /*#__PURE__*/_react["default"].createElement(_ColumShowHide["default"], {
     columns: columns,
     onToggle: handleToggle,
@@ -519,7 +529,8 @@ var QbsTable = function QbsTable(_ref) {
   }, /*#__PURE__*/_react["default"].createElement(_HeaderCell["default"], {
     verticalAlign: findGrouped() ? 'middle' : undefined,
     className: " " + classes.headerlClass,
-    dataTheme: dataTheme
+    dataTheme: dataTheme,
+    renderSortIcon: renderSortIcon
   }, !columnToggle ? /*#__PURE__*/_react["default"].createElement(_icons.SettingsIcon, null) : /*#__PURE__*/_react["default"].createElement(_ColumShowHide["default"], {
     columns: columns,
     onToggle: handleToggle,

package/lib/qbsTable/commontypes.d.ts

@@ -44,6 +44,7 @@ export interface ActionProps {
     hide?: (data: any, index?: number) => boolean;
 }
 export interface QbsTableProps {
+    tableKey?: string;
     isLoading?: boolean;
     columns: QbsColumnProps[];
     data: readonly any[];
@@ -110,6 +111,7 @@ export interface QbsTableProps {
         getPath?: (data: any) => string;
     };
     rowExpandedHeight?: number;
+    renderSortIcon?: (sortType?: 'desc' | 'asc') => React.ReactNode;
 }
 export interface QbsTableToolbarProps {
     title?: string;

package/lib/utils/useScrollListener.d.ts

@@ -21,6 +21,7 @@ interface ScrollListenerProps {
     minScrollY: React.MutableRefObject<number>;
     minScrollX: React.MutableRefObject<number>;
     scrollX: React.MutableRefObject<number>;
+    tableKey?: string;
     setScrollX: (v: number) => void;
     setScrollY: (v: number) => void;
     virtualized?: boolean;
@@ -39,6 +40,7 @@ interface ScrollListenerProps {
  */
 declare const useScrollListener: (props: ScrollListenerProps) => {
     isScrolling: boolean;
+    isChildFocused: boolean;
     onScrollHorizontal: (delta: number) => void;
     onScrollVertical: (delta: number, event: any) => void;
     onScrollBody: (event: any) => void;
@@ -48,5 +50,6 @@ declare const useScrollListener: (props: ScrollListenerProps) => {
         x?: number;
         y?: number;
     }) => void;
+    setIsChildFocused: React.Dispatch<React.SetStateAction<boolean>>;
 };
 export default useScrollListener;

package/lib/utils/useScrollListener.js

@@ -71,14 +71,18 @@ var useScrollListener = function useScrollListener(props) {
     getTableHeight = props.getTableHeight,
     contentHeight = props.contentHeight,
     headerHeight = props.headerHeight,
-    rtl = props.rtl;
+    rtl = props.rtl,
+    tableKey = props.tableKey;
   var wheelListener = (0, _react.useRef)();
   var touchStartListener = (0, _react.useRef)();
   var touchMoveListener = (0, _react.useRef)();
   var touchEndListener = (0, _react.useRef)();
   var _useState = (0, _react.useState)(false),
-    isScrolling = _useState[0],
-    setScrolling = _useState[1];
+    isChildFocused = _useState[0],
+    setIsChildFocused = _useState[1];
+  var _useState2 = (0, _react.useState)(false),
+    isScrolling = _useState2[0],
+    setScrolling = _useState2[1];
   var touchX = (0, _react.useRef)(0);
   var touchY = (0, _react.useRef)(0);
   var disableEventsTimeoutId = (0, _react.useRef)(null);
@@ -90,13 +94,13 @@ var useScrollListener = function useScrollListener(props) {
   // The vertical starting value within the inertial sliding range.
   var momentumStartY = (0, _react.useRef)(0);
   var shouldHandleWheelX = (0, _react.useCallback)(function (delta) {
-    if (delta === 0 || disabledScroll || loading) {
+    if (delta === 0 || disabledScroll || loading || isChildFocused) {
       return false;
     }
     return true;
   }, [disabledScroll, loading]);
   var shouldHandleWheelY = (0, _react.useCallback)(function (delta) {
-    if (delta === 0 || disabledScroll || loading || autoHeight) {
+    if (delta === 0 || disabledScroll || loading || autoHeight || isChildFocused) {
       return false;
     }
     if (typeof scrollY.current === 'number' && typeof minScrollY.current === 'number') {
@@ -120,9 +124,10 @@ var useScrollListener = function useScrollListener(props) {
    * @param momentumOptions The configuration of inertial scrolling is used for the touch event.
    */
   var handleWheel = (0, _react.useCallback)(function (deltaX, deltaY, momentumOptions, event) {
-    if (!tableRef.current) {
+    if (!tableRef.current || tableKey === 'parent' && isChildFocused) {
       return;
     }
+    // setIsChildFocused(false);
     var nextScrollX = contentWidth.current <= tableWidth.current ? 0 : scrollX.current - deltaX;
     var nextScrollY = scrollY.current - deltaY;
     var y = Math.min(0, nextScrollY < minScrollY.current ? minScrollY.current : nextScrollY);
@@ -206,6 +211,7 @@ var useScrollListener = function useScrollListener(props) {
     if (!isTouching.current) {
       return;
     }
+    console.log('handleTouchMove');
     var _event$touches$2 = event.touches[0],
       pageX = _event$touches$2.pageX,
       pageY = _event$touches$2.pageY;
@@ -239,6 +245,7 @@ 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);
@@ -402,12 +409,14 @@ var useScrollListener = function useScrollListener(props) {
   }, [handleWheel]);
   return {
     isScrolling: isScrolling,
+    isChildFocused: isChildFocused,
     onScrollHorizontal: onScrollHorizontal,
     onScrollVertical: onScrollVertical,
     onScrollBody: onScrollBody,
     onScrollTop: onScrollTop,
     onScrollLeft: onScrollLeft,
-    onScrollTo: onScrollTo
+    onScrollTo: onScrollTo,
+    setIsChildFocused: setIsChildFocused
   };
 };
 var _default = useScrollListener;

package/package.json

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

package/src/Row.tsx

@@ -49,6 +49,7 @@ const Row = React.forwardRef((props: RowProps, ref: React.Ref<HTMLDivElement>) =
   };
   const INDEX = index as number;
   translateDOMPositionXY?.(styles as CSSStyleDeclaration, 0, top);
+
   return (
     <div
       role="row"

package/src/Table.tsx

@@ -223,7 +223,7 @@ export interface TableProps<Row, Key> extends Omit<StandardProps, 'onScroll'> {
     rowData?: Row,
     expanded?: boolean
   ) => React.ReactNode;
-
+  tableKey?: string;
   /** Customize what you can do to expand a zone */
   renderRowExpanded?: (rowData?: Row) => React.ReactNode;
 
@@ -339,6 +339,7 @@ const Table = React.forwardRef(<Row extends RowDataType, Key>(props: TableProps<
     tableBodyHeight,
     columns,
     tableBodyRef,
+    tableKey,
     ...rest
   } = props;
 
@@ -347,6 +348,7 @@ const Table = React.forwardRef(<Row extends RowDataType, Key>(props: TableProps<
     merge: mergeCls,
     prefix
   } = useClassNames(classPrefix, typeof classPrefix !== 'undefined');
+  const childTableRef = useRef<HTMLDivElement>(null);
 
   // Use `forceUpdate` to force the component to re-render after manipulating the DOM.
   const [, forceUpdate] = useReducer(x => x + 1, 0);
@@ -494,12 +496,14 @@ const Table = React.forwardRef(<Row extends RowDataType, Key>(props: TableProps<
 
   const {
     isScrolling,
+    isChildFocused,
     onScrollHorizontal,
     onScrollVertical,
     onScrollBody,
     onScrollTop,
     onScrollLeft,
-    onScrollTo
+    onScrollTo,
+    setIsChildFocused
   } = useScrollListener({
     rtl,
     data: dataProp,
@@ -521,6 +525,7 @@ const Table = React.forwardRef(<Row extends RowDataType, Key>(props: TableProps<
     minScrollY,
     minScrollX,
     scrollX,
+    tableKey,
     setScrollX,
     setScrollY,
     forceUpdatePosition,
@@ -605,13 +610,27 @@ const Table = React.forwardRef(<Row extends RowDataType, Key>(props: TableProps<
     ...style
   };
 
+  const handleChildFocus = useCallback(() => {
+    setIsChildFocused(true);
+  }, []);
+
+  const handleChildBlur = useCallback(() => {
+    setIsChildFocused(false);
+  }, []);
+
   const renderRowExpanded = useCallback(
     (rowData?: Row) => {
       const styles = { height: rowExpandedHeight, maxWidth: tableRef?.current?.clientWidth };
 
       if (typeof renderRowExpandedProp === 'function') {
         return (
-          <div className={prefix('row-expanded')} style={styles}>
+          <div
+            ref={childTableRef}
+            className={prefix('row-expanded')}
+            style={styles}
+            onMouseEnter={handleChildFocus}
+            onMouseLeave={handleChildBlur}
+          >
             {renderRowExpandedProp(rowData)}
           </div>
         );
@@ -729,6 +748,7 @@ const Table = React.forwardRef(<Row extends RowDataType, Key>(props: TableProps<
     }
     return (
       <Row
+        rowRef={childTableRef}
         {...restRowProps}
         data-depth={depth}
         style={{
@@ -926,7 +946,7 @@ const Table = React.forwardRef(<Row extends RowDataType, Key>(props: TableProps<
 
     const scrollbars: React.ReactNode[] = [];
 
-    if (hasHorizontalScrollbar) {
+    if (hasHorizontalScrollbar && !(tableKey === 'parent' && isChildFocused)) {
       scrollbars.push(
         <Scrollbar
           key="scrollbar"
@@ -940,7 +960,7 @@ const Table = React.forwardRef(<Row extends RowDataType, Key>(props: TableProps<
       );
     }
 
-    if (hasVerticalScrollbar) {
+    if (hasVerticalScrollbar && !(tableKey === 'parent' && isChildFocused)) {
       scrollbars.push(
         <Scrollbar
           vertical

package/src/qbsTable/QbsTable.tsx

@@ -74,7 +74,9 @@ const QbsTable: React.FC<QbsTableProps> = ({
   tableBodyHeight,
   customRowStatus,
   searchPlaceholder,
-  rowExpandedHeight=517,
+  rowExpandedHeight = 517,
+  renderSortIcon,
+  tableKey
 }) => {
   const [loading, setLoading] = useState(false);
   const [columns, setColumns] = useState(propColumn);
@@ -83,7 +85,6 @@ const QbsTable: React.FC<QbsTableProps> = ({
   const [isOpen, setIsOpen] = useState(false);
   const prevColumns = useRef<any | null>();
   const tableBodyRef = useRef<HTMLDivElement>(null);
-
   const handleSortColumn = useCallback(
     (sortColumn: any, sortType: any) => {
       setLoading(true);
@@ -355,6 +356,7 @@ const QbsTable: React.FC<QbsTableProps> = ({
                             verticalAlign={'middle'}
                             className={` ${classes.headerClass}`}
                             sortKey={child.sortKey}
+                            renderSortIcon={renderSortIcon}
                           >
                             {child.title}
                           </HeaderCell>
@@ -393,6 +395,7 @@ const QbsTable: React.FC<QbsTableProps> = ({
                       verticalAlign={findGrouped() ? 'middle' : undefined}
                       className={` ${classes.headerClass}`}
                       sortKey={sortKey}
+                      renderSortIcon={renderSortIcon}
                     >
                       {title}
                     </HeaderCell>
@@ -430,6 +433,8 @@ const QbsTable: React.FC<QbsTableProps> = ({
       <div className="qbs-table-border-wrap">
         <Table
           height={height}
+          key={tableKey}
+          tableKey={tableKey}
           data={data}
           tableBodyRef={tableBodyRef}
           dataTheme={dataTheme}
@@ -463,6 +468,7 @@ const QbsTable: React.FC<QbsTableProps> = ({
               <HeaderCell
                 verticalAlign={findGrouped() ? 'middle' : undefined}
                 className={` ${classes.headerlClass}`}
+                renderSortIcon={renderSortIcon}
               >
                 #
               </HeaderCell>
@@ -479,6 +485,7 @@ const QbsTable: React.FC<QbsTableProps> = ({
                 style={{ padding: 0 }}
                 verticalAlign={findGrouped() ? 'middle' : undefined}
                 dataTheme={dataTheme}
+                renderSortIcon={renderSortIcon}
                 className={`qbs-checkbox-border-none ${classes.headerlClass}`}
               >
                 <div
@@ -522,6 +529,7 @@ const QbsTable: React.FC<QbsTableProps> = ({
               <HeaderCell
                 verticalAlign={findGrouped() ? 'middle' : undefined}
                 className={` ${classes.headerlClass}`}
+                renderSortIcon={renderSortIcon}
               >
                 {' '}
               </HeaderCell>
@@ -543,6 +551,7 @@ const QbsTable: React.FC<QbsTableProps> = ({
                   verticalAlign={findGrouped() ? 'middle' : undefined}
                   className={` ${classes.headerlClass}`}
                   dataTheme={dataTheme}
+                  renderSortIcon={renderSortIcon}
                 >
                   <ColumToggle
                     columns={columns}
@@ -564,6 +573,7 @@ const QbsTable: React.FC<QbsTableProps> = ({
                 verticalAlign={findGrouped() ? 'middle' : undefined}
                 className={` ${classes.headerlClass}`}
                 dataTheme={dataTheme}
+                renderSortIcon={renderSortIcon}
               >
                 {!columnToggle ? (
                   <SettingsIcon />

package/src/qbsTable/commontypes.ts

@@ -49,6 +49,8 @@ export interface ActionProps {
 }
 
 export interface QbsTableProps {
+  tableKey?: string;
+
   isLoading?: boolean;
   columns: QbsColumnProps[];
   data: readonly any[];
@@ -113,6 +115,7 @@ export interface QbsTableProps {
     getPath?: (data: any) => string;
   };
   rowExpandedHeight?: number;
+  renderSortIcon?: (sortType?: 'desc' | 'asc') => React.ReactNode;
 }
 
 export interface QbsTableToolbarProps {

package/src/utils/useScrollListener.ts

@@ -40,6 +40,7 @@ interface ScrollListenerProps {
   minScrollY: React.MutableRefObject<number>;
   minScrollX: React.MutableRefObject<number>;
   scrollX: React.MutableRefObject<number>;
+  tableKey?: string;
   setScrollX: (v: number) => void;
   setScrollY: (v: number) => void;
   virtualized?: boolean;
@@ -104,13 +105,15 @@ const useScrollListener = (props: ScrollListenerProps) => {
     getTableHeight,
     contentHeight,
     headerHeight,
-    rtl
+    rtl,
+    tableKey
   } = props;
 
   const wheelListener = useRef<ListenerCallback>();
   const touchStartListener = useRef<ListenerCallback>();
   const touchMoveListener = useRef<ListenerCallback>();
   const touchEndListener = useRef<ListenerCallback>();
+  const [isChildFocused, setIsChildFocused] = useState(false);
 
   const [isScrolling, setScrolling] = useState(false);
   const touchX = useRef(0);
@@ -126,7 +129,7 @@ const useScrollListener = (props: ScrollListenerProps) => {
 
   const shouldHandleWheelX = useCallback(
     (delta: number) => {
-      if (delta === 0 || disabledScroll || loading) {
+      if (delta === 0 || disabledScroll || loading || isChildFocused) {
         return false;
       }
 
@@ -137,7 +140,7 @@ const useScrollListener = (props: ScrollListenerProps) => {
 
   const shouldHandleWheelY = useCallback(
     (delta: number) => {
-      if (delta === 0 || disabledScroll || loading || autoHeight) {
+      if (delta === 0 || disabledScroll || loading || autoHeight || isChildFocused) {
         return false;
       }
 
@@ -171,10 +174,10 @@ const useScrollListener = (props: ScrollListenerProps) => {
       momentumOptions?: { duration: number; bezier: string },
       event?: React.MouseEvent
     ) => {
-      if (!tableRef.current) {
+      if (!tableRef.current || (tableKey === 'parent' && isChildFocused)) {
         return;
       }
-
+      // setIsChildFocused(false);
       const nextScrollX = contentWidth.current <= tableWidth.current ? 0 : scrollX.current - deltaX;
       const nextScrollY = scrollY.current - deltaY;
 
@@ -294,6 +297,8 @@ const useScrollListener = (props: ScrollListenerProps) => {
       if (!isTouching.current) {
         return;
       }
+      console.log('handleTouchMove');
+
       const { pageX, pageY } = event.touches[0];
       const deltaX = touchX.current - pageX;
       const deltaY = autoHeight ? 0 : touchY.current - pageY;
@@ -333,6 +338,7 @@ const useScrollListener = (props: ScrollListenerProps) => {
       if (!isTouching.current) {
         return;
       }
+      console.log('handleTouchEnd');
       isTouching.current = false;
       const touchDuration = new Date().getTime() - momentumStartTime.current;
       const absDeltaY = Math.abs(scrollY.current - momentumStartY.current);
@@ -521,12 +527,14 @@ const useScrollListener = (props: ScrollListenerProps) => {
 
   return {
     isScrolling,
+    isChildFocused,
     onScrollHorizontal,
     onScrollVertical,
     onScrollBody,
     onScrollTop,
     onScrollLeft,
-    onScrollTo
+    onScrollTo,
+    setIsChildFocused
   };
 };