qbs-react-grid 2.2.17 → 2.2.19

package/src/Table.tsx

@@ -224,6 +224,7 @@ export interface TableProps<Row, Key> extends Omit<StandardProps, 'onScroll'> {
     expanded?: boolean
   ) => React.ReactNode;
   tableKey?: string;
+  infiniteLoading?: boolean;
   /** Customize what you can do to expand a zone */
   renderRowExpanded?: (rowData?: Row) => React.ReactNode;
 
@@ -259,13 +260,16 @@ export interface TableProps<Row, Key> extends Omit<StandardProps, 'onScroll'> {
 
   /** Callback for the `touchend` event. */
   onTouchEnd?: (event: React.TouchEvent) => void;
-
+  handleInfiniteScroll?: (value: number) => void;
   /**
    * Callback after table data update.
    * @deprecated use `shouldUpdateScroll` instead
    **/
   onDataUpdated?: (nextData: Row[], scrollTo: (coord: { x: number; y: number }) => void) => void;
   tableBodyRef: React.RefObject<HTMLDivElement>;
+
+  wheelWrapperRef: React.RefObject<HTMLDivElement | null>;
+
   bodyRef?: (ref: HTMLElement) => void;
 }
 
@@ -302,8 +306,7 @@ const Table = React.forwardRef(<Row extends RowDataType, Key>(props: TableProps<
       loading: 'Loading...'
     },
     showHeader = true,
-    pagination = true,
-    paginationProps = {},
+
     sortColumn,
     rowHeight = ROW_HEIGHT,
     sortType: sortTypeProp,
@@ -335,21 +338,21 @@ const Table = React.forwardRef(<Row extends RowDataType, Key>(props: TableProps<
     onTouchStart,
     onTouchMove,
     onTouchEnd,
-    dataTheme,
     tableBodyHeight,
     columns,
     tableBodyRef,
     tableKey,
+    handleInfiniteScroll,
+    infiniteLoading,
+    wheelWrapperRef,
     ...rest
   } = props;
-
   const {
     withClassPrefix,
     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);
   const [expandedRowKeys, setExpandedRowKeys] = useControlled(
@@ -408,7 +411,6 @@ const Table = React.forwardRef(<Row extends RowDataType, Key>(props: TableProps<
   const affixHeaderWrapperRef = useRef<HTMLDivElement>(null);
   const headerWrapperRef = useRef<HTMLDivElement>(null);
   // const tableBodyRef = useRef<HTMLDivElement>(null);
-  const wheelWrapperRef = useRef<HTMLDivElement>(null);
   const scrollbarXRef = useRef<ScrollbarInstance>(null);
   const scrollbarYRef = useRef<ScrollbarInstance>(null);
 
@@ -533,7 +535,8 @@ const Table = React.forwardRef(<Row extends RowDataType, Key>(props: TableProps<
     onScroll,
     onTouchStart,
     onTouchMove,
-    onTouchEnd
+    onTouchEnd,
+    handleInfiniteScroll
   });
 
   const { headerCells, bodyCells, allColumnsWidth, hasCustomTreeCol } = useCellDescriptor({
@@ -953,7 +956,9 @@ const Table = React.forwardRef(<Row extends RowDataType, Key>(props: TableProps<
           tableId={id}
           style={{ width: tableWidth.current }}
           length={tableWidth.current}
-          onScroll={onScrollHorizontal}
+          onScroll={delta => {
+            onScrollHorizontal(delta);
+          }}
           scrollLength={contentWidth.current}
           ref={scrollbarXRef}
         />
@@ -1132,13 +1137,21 @@ const Table = React.forwardRef(<Row extends RowDataType, Key>(props: TableProps<
         role="rowgroup"
         className={prefix('body-row-wrapper')}
         style={bodyStyles}
-        onScroll={onScrollBody}
+        onScroll={e => {
+          onScrollBody?.(e); // existing handler
+        }}
       >
         {!loading && (
           <div style={wheelStyles} className={prefix('body-wheel-area')} ref={wheelWrapperRef}>
             {topHideHeight ? <Row style={topRowStyles} className="virtualized" /> : null}
             {visibleRows.current}
             {bottomHideHeight ? <Row style={bottomRowStyles} className="virtualized" /> : null}
+
+            {infiniteLoading && (
+              <div style={{ padding: 12, textAlign: 'center' }}>
+                <span>Loading more rows…</span>
+              </div>
+            )}
           </div>
         )}
 

package/src/customSelect.tsx

@@ -1,88 +1,88 @@
-import React, { FC, useState, useEffect, useRef } from 'react';
-
-type CustomSelectProps = {
-  options: number[];
-  selectedValue: number;
-  onChange: (value: number) => void;
-};
-
-const CustomSelect: FC<CustomSelectProps> = ({ options, selectedValue, onChange }) => {
-  const [isOpen, setIsOpen] = useState(false);
-  const [dropdownPosition, setDropdownPosition] = useState('bottom');
-  const ref = useRef<HTMLDivElement>(null);
-  const inputRef = useRef<HTMLDivElement>(null);
-
-  const adjustDropdownPosition = () => {
-    if (inputRef.current) {
-      const inputBoxRect = inputRef.current.getBoundingClientRect();
-      const viewportHeight = window.innerHeight;
-
-      const spaceAbove = inputBoxRect.top;
-      const spaceBelow = viewportHeight - inputBoxRect.bottom;
-
-      if (spaceAbove > spaceBelow) {
-        setDropdownPosition('top');
-      } else {
-        setDropdownPosition('bottom');
-      }
-    }
-  };
-
-  const handleToggle = () => {
-    setIsOpen(prevIsOpen => !prevIsOpen);
-  };
-
-  const handleSelect = (value: number) => {
-    onChange(value);
-    setIsOpen(false);
-  };
-
-  const handleClickOutside = (event: MouseEvent) => {
-    if (ref.current && !ref.current.contains(event.target as Node)) {
-      setIsOpen(false);
-    }
-  };
-
-  useEffect(() => {
-    if (isOpen) {
-      adjustDropdownPosition();
-      window.addEventListener('resize', adjustDropdownPosition);
-    } else {
-      window.removeEventListener('resize', adjustDropdownPosition);
-    }
-
-    return () => {
-      window.removeEventListener('resize', adjustDropdownPosition);
-    };
-  }, [isOpen]);
-
-  useEffect(() => {
-    document.addEventListener('mousedown', handleClickOutside);
-    return () => {
-      document.removeEventListener('mousedown', handleClickOutside);
-    };
-  }, []);
-
-  return (
-    <div className="custom-select" ref={ref}>
-      <div className="custom-select-trigger" onClick={handleToggle} ref={inputRef}>
-        {selectedValue}
-      </div>
-      {isOpen && (
-        <ul className={`custom-select-options ${dropdownPosition}`}>
-          {options.map(option => (
-            <li
-              key={option}
-              className={`custom-select-option ${option === selectedValue ? 'selected' : ''}`}
-              onClick={() => handleSelect(option)}
-            >
-              {option}
-            </li>
-          ))}
-        </ul>
-      )}
-    </div>
-  );
-};
-
-export default CustomSelect;
+import React, { FC, useState, useEffect, useRef } from 'react';
+
+type CustomSelectProps = {
+  options: number[];
+  selectedValue: number;
+  onChange: (value: number) => void;
+};
+
+const CustomSelect: FC<CustomSelectProps> = ({ options, selectedValue, onChange }) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const [dropdownPosition, setDropdownPosition] = useState('bottom');
+  const ref = useRef<HTMLDivElement>(null);
+  const inputRef = useRef<HTMLDivElement>(null);
+
+  const adjustDropdownPosition = () => {
+    if (inputRef.current) {
+      const inputBoxRect = inputRef.current.getBoundingClientRect();
+      const viewportHeight = window.innerHeight;
+
+      const spaceAbove = inputBoxRect.top;
+      const spaceBelow = viewportHeight - inputBoxRect.bottom;
+
+      if (spaceAbove > spaceBelow) {
+        setDropdownPosition('top');
+      } else {
+        setDropdownPosition('bottom');
+      }
+    }
+  };
+
+  const handleToggle = () => {
+    setIsOpen(prevIsOpen => !prevIsOpen);
+  };
+
+  const handleSelect = (value: number) => {
+    onChange(value);
+    setIsOpen(false);
+  };
+
+  const handleClickOutside = (event: MouseEvent) => {
+    if (ref.current && !ref.current.contains(event.target as Node)) {
+      setIsOpen(false);
+    }
+  };
+
+  useEffect(() => {
+    if (isOpen) {
+      adjustDropdownPosition();
+      window.addEventListener('resize', adjustDropdownPosition);
+    } else {
+      window.removeEventListener('resize', adjustDropdownPosition);
+    }
+
+    return () => {
+      window.removeEventListener('resize', adjustDropdownPosition);
+    };
+  }, [isOpen]);
+
+  useEffect(() => {
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, []);
+
+  return (
+    <div className="custom-select" ref={ref}>
+      <div className="custom-select-trigger" onClick={handleToggle} ref={inputRef}>
+        {selectedValue}
+      </div>
+      {isOpen && (
+        <ul className={`custom-select-options ${dropdownPosition}`}>
+          {options.map(option => (
+            <li
+              key={option}
+              className={`custom-select-option ${option === selectedValue ? 'selected' : ''}`}
+              onClick={() => handleSelect(option)}
+            >
+              {option}
+            </li>
+          ))}
+        </ul>
+      )}
+    </div>
+  );
+};
+
+export default CustomSelect;

package/src/index.ts

@@ -15,7 +15,9 @@ export type { QbsTableProps } from './qbsTable/commontypes';
 export type { QbsTableLabels } from './qbsTable/labels';
 export {
   mergeQbsTableLabels,
+  mergeLabels,
   defaultQbsTableLabels,
+  DEFAULT_QBS_TABLE_LABELS,
   formatSelectedItems,
 } from './qbsTable/labels';
 export type {

package/src/less/pagination.less

@@ -5,8 +5,8 @@
   min-height: 40px;
   align-items: center;
   border-radius: 0 0 4px 4px;
-  border-top: 1px solid #d6d8dc;
-  background: #fff;
+  border-top: 1px solid var(--base-gray-border, #d6d8dc);
+  background: var(--table-bg, #fff);
   &-header {
     border-bottom: 1px solid #eee;
     position: absolute;
@@ -27,8 +27,8 @@
     font-weight: 500;
     line-height: 20px;
     border-radius: 6px;
-    border: 1px solid #d6d8dc;
-    background: #fff;
+    border: 1px solid var(--base-gray-border, #d6d8dc);
+    background: var(--gray-light-1, #fff);
   }
   .qbs-table-icon-container {
     padding: 0;
@@ -109,7 +109,7 @@
     font-style: normal;
     font-weight: 500;
     line-height: 20px;
-    color: #313131;
+    color: var(--gray-dark-3, #313131);
   }
 }
 
@@ -125,7 +125,7 @@
 .custom-select-trigger {
   padding: 2px 8px;
   cursor: pointer;
-  border: 1px solid #d6d8dc;
+  border: 1px solid var(--base-gray-border, #d6d8dc);
   border-radius: 4px;
   min-width: 65px;
   position: relative;
@@ -140,7 +140,7 @@
   list-style: none;
   margin: 2px 0 0;
   padding: 0;
-  background: #fff;
+  background: var(--gray-light-1, #fff);
   border-radius: 8px;
   box-shadow: 0 8px 20px 0 #00000026;
 }
@@ -158,7 +158,7 @@ ul.custom-select-options.top {
 
 .custom-select-option:hover,
 .custom-select-option.selected {
-  background-color: #f0f0f0;
+  background-color: var(--table-row-hover-bg, #f0f0f0);
 }
 
 .custom-select-trigger:before {
@@ -167,7 +167,7 @@ ul.custom-select-options.top {
   right: 10px;
   top: 6px;
   font-weight: bold;
-  border: solid black;
+  border: solid var(--gray-dark-3, black);
   border-width: 0 1px 1px 0;
   display: inline-block;
   padding: 3px;

package/src/qbsTable/QbsTable.tsx

@@ -6,6 +6,7 @@ import ColumnGroup from '../ColumnGroup';
 import HeaderCell from '../HeaderCell';
 import Pagination from '../Pagination';
 import Table from '../Table';
+import isRTL from '../utils/isRTL';
 import useResponsiveStore from '../utils/useResponsiveStore';
 import { QbsColumnProps, QbsTableProps } from './commontypes';
 import { mergeQbsTableLabels } from './labels';
@@ -31,6 +32,7 @@ import '../../dist/css/qbs-react-grid.css';
 
 const CHECKBOX_LINE_HEIGHT = '36px';
 const COLUMN_WIDTH = 250;
+let REFRESH_KEY = 0;
 const QbsTable: React.FC<QbsTableProps> = ({
   handleColumnSort,
   data,
@@ -52,7 +54,7 @@ const QbsTable: React.FC<QbsTableProps> = ({
   minHeight,
   height = 630,
   onExpandChange,
-  wordWrap,
+  wordWrap: propsWordWrap,
   dataRowKey = 'id',
   defaultExpandAllRows,
   handleRowExpanded,
@@ -60,6 +62,7 @@ const QbsTable: React.FC<QbsTableProps> = ({
   rowExpand = false,
   actionProps = [],
   theme,
+  rtl: rtlProp,
   handleMenuActions,
   onRowClick,
   expandedRowKeys,
@@ -93,33 +96,42 @@ const QbsTable: React.FC<QbsTableProps> = ({
   isCustomTableCardView = false,
   handleTableCardView,
   handleCustomCardLoader,
-  dropType,
-  labels: labelsProp,
-  rtl = false,
+  hasMoreData,
+  loadMoreData,
+  infiniteLoading,
+  infiniteScroll = false,
   rowViewToggle = false,
   defaultRowView = true,
   fullWidthView = false,
   setTableFullView,
   setRowViewToggle,
-  isFullScreen = false,
+  dropType = 'horizondal',
   rowHeight,
+  isFullScreen,
   showHeader = true,
+  labels: labelsProp
 }) => {
   const labels = useMemo(() => mergeQbsTableLabels(labelsProp), [labelsProp]);
-  const effectiveWordWrap = useMemo(() => {
-    if (!rowViewToggle) return wordWrap;
-    return defaultRowView ? false : 'break-word';
-  }, [rowViewToggle, defaultRowView, wordWrap]);
+  const [rowViewRefreshKey, setRowViewRefreshKey] = useState(0);
   const [loading, setLoading] = useState(false);
   const [columns, setColumns] = useState(propColumn);
   const [checkedKeys, setCheckedKeys] = useState<(number | string)[]>([]);
-  const dataTheme = useMemo(() => localStorage.getItem('theme') ?? theme, [theme]);
+  const dataTheme = useMemo(
+    () => theme ?? (typeof localStorage !== 'undefined' ? localStorage.getItem('theme') : null) ?? 'light',
+    [theme]
+  );
+  const rtl = rtlProp ?? isRTL();
   const [isOpen, setIsOpen] = useState(false);
   const prevColumns = useRef<any | null>(null);
   const [tableViewToggle, setTableViewToggle] = useState(tableView);
   const isMobile = useResponsiveStore();
   const tableBodyRef = useRef<HTMLDivElement>(null);
-  const [rowViewRefreshKey, setRowViewRefreshKey] = useState(0);
+  const wheelWrapperRef = useRef<HTMLDivElement>(null);
+  const [wordWrap, setWordWrap] = useState(propsWordWrap ?? false);
+  const effectiveWordWrap = useMemo(() => {
+    if (!rowViewToggle) return wordWrap;
+    return defaultRowView ? false : 'break-word';
+  }, [rowViewToggle, defaultRowView, wordWrap]);
 
   useEffect(() => {
     if (rowViewToggle) {
@@ -178,16 +190,6 @@ const QbsTable: React.FC<QbsTableProps> = ({
     [checkedKeys]
   );
 
-  const rowKeyField = dataRowKey ?? 'id';
-  const getRowClassName = useCallback(
-    (rowData: Record<string, unknown>) => {
-      if (!selection) return '';
-      const key = rowData?.[rowKeyField] as string | number | undefined;
-      return key !== undefined && checkedKeys?.includes(key) ? 'qbs-table-row-checked' : '';
-    },
-    [selection, checkedKeys, rowKeyField]
-  );
-
   const handleToggle = useCallback(
     (columnName: string) => {
       let lastVisibleColumn: any = null;
@@ -223,6 +225,7 @@ const QbsTable: React.FC<QbsTableProps> = ({
 
   const handleColumnWidth = useCallback((newWidth?: number, dataKey?: any) => {
     if (newWidth === undefined || dataKey === undefined) return;
+    REFRESH_KEY = REFRESH_KEY + 1;
     setColumns(prevColumns =>
       prevColumns.map(column =>
         column.field === dataKey ? { ...column, colWidth: newWidth } : column
@@ -239,6 +242,14 @@ const QbsTable: React.FC<QbsTableProps> = ({
       );
     }
   }, [wordWrap]);
+  useEffect(() => {
+    if (!defaultRowView) {
+      setWordWrap('break-word');
+    } else {
+      setWordWrap(false);
+    }
+    REFRESH_KEY = REFRESH_KEY + 1;
+  }, [defaultRowView]);
 
   const onReorder = useCallback((columns: QbsColumnProps[]) => {
     setColumns(columns);
@@ -246,7 +257,6 @@ const QbsTable: React.FC<QbsTableProps> = ({
 
   // useEffect(() => {
   // }, [columns]);
-
   const handleClear = ([]) => {
     setCheckedKeys([]);
     handleChecked([]);
@@ -277,18 +287,31 @@ const QbsTable: React.FC<QbsTableProps> = ({
     setTableViewToggle: setTableViewToggle,
     tableViewToggle: tableViewToggle,
     enableTableToggle: enableTableToggle,
-    rowViewToggle,
-    defaultRowView,
-    fullWidthView,
-    setTableFullView,
-    setRowViewToggle,
-    isFullScreen,
+    rowViewToggle: rowViewToggle,
+    defaultRowView: defaultRowView,
+    fullWidthView: fullWidthView,
+    setTableFullView: setTableFullView,
+    setRowViewToggle: setRowViewToggle,
+    isFullScreen: isFullScreen,
     labels,
     rtl,
   };
-  const themeToggle = useMemo(() => document.getElementById('themeToggle') as HTMLInputElement, []);
 
   useEffect(() => {
+    if (!dataTheme || typeof document === 'undefined') return;
+
+    document.body.setAttribute('data-theme', dataTheme === 'dark' ? 'dark' : 'light');
+    document.documentElement.dataset.theme = dataTheme;
+  }, [dataTheme]);
+
+  const themeToggle = useMemo(
+    () => (typeof document !== 'undefined' ? document.getElementById('themeToggle') : null),
+    []
+  ) as HTMLInputElement | null;
+
+  useEffect(() => {
+    if (theme || typeof document === 'undefined') return;
+
     const handleThemeToggle = () => {
       if (themeToggle?.checked) {
         document.body.setAttribute('data-theme', 'dark');
@@ -313,11 +336,10 @@ const QbsTable: React.FC<QbsTableProps> = ({
       themeToggle?.removeEventListener('change', handleThemeToggle);
       document.removeEventListener('DOMContentLoaded', handleDOMContentLoaded);
     };
-  }, [themeToggle]);
+  }, [theme, themeToggle]);
 
   const handleExpanded = useCallback(
     (rowData: any) => {
-      console.log(rowData);
       const keyValue = dataRowKey as string;
       const key = rowData[keyValue];
 
@@ -607,8 +629,25 @@ const QbsTable: React.FC<QbsTableProps> = ({
     [columns, dataTheme]
   );
 
+  const handleInfiniteScroll = (scroll: number) => {
+    if (!infiniteScroll) return;
+    const wrapper = wheelWrapperRef.current;
+    if (!wrapper || !hasMoreData || infiniteLoading) return;
+
+    const { scrollTop, clientHeight } = wrapper;
+    const scrollHeight = Math.abs(scroll) + (height - headerHeight);
+    // Trigger fetch when user scrolls within 100px of bottom
+    if (scrollTop + clientHeight >= scrollHeight - 70) {
+      loadMoreData?.(); // fetch next page here
+    }
+  };
+
   return (
-    <div className={`qbs-table ${classes.tableContainerClass}`} data-theme={dataTheme}>
+    <div
+      className={`qbs-table ${classes.tableContainerClass}`}
+      data-theme={dataTheme}
+      dir={rtl ? 'rtl' : 'ltr'}
+    >
       {toolbar && <ToolBar {...toolbarProps} />}
       <div className="qbs-table-border-wrap">
         {tableViewToggle ? (
@@ -616,16 +655,20 @@ const QbsTable: React.FC<QbsTableProps> = ({
             height={autoHeight ? undefined : height}
             key={`${tableKey}-${rowViewRefreshKey}`}
             tableKey={tableKey}
-            rtl={rtl}
             data={data}
+            rtl={rtl}
             tableBodyRef={tableBodyRef as React.RefObject<HTMLDivElement>}
             dataTheme={dataTheme}
             wordWrap={effectiveWordWrap}
+            wheelWrapperRef={wheelWrapperRef}
+            rowHeight={rowHeight}
             autoHeight={autoHeight}
+            handleInfiniteScroll={handleInfiniteScroll}
             sortColumn={sortColumn}
             style={{ position: 'relative' }}
             sortType={sortType}
             onSortColumn={handleSortColumn}
+            infiniteLoading={infiniteLoading}
             onRowClick={onRowClick}
             tableBodyHeight={tableBodyHeight}
             cellBordered={cellBordered}
@@ -634,13 +677,12 @@ const QbsTable: React.FC<QbsTableProps> = ({
               renderEmpty ? (
                 renderEmpty(info)
               ) : (
-                <NoData title={emptyTitle ?? 'No Data Found'} subtitle={emptySubTitle} />
+                <NoData title={emptyTitle ?? labels.noDataFound} subtitle={emptySubTitle} />
               )
             }
             columns={columns}
             minHeight={minHeight}
             headerHeight={headerHeight}
-            rowHeight={rowHeight}
             rowExpandedHeight={rowExpandedHeight}
             loading={isLoading ?? loading}
             showHeader={showHeader}
@@ -648,7 +690,6 @@ const QbsTable: React.FC<QbsTableProps> = ({
             expandedRowKeys={expandedRowKeys}
             onExpandChange={onExpandChange}
             rowKey={dataRowKey ?? 'id'}
-            rowClassName={selection ? getRowClassName : undefined}
             defaultExpandAllRows={defaultExpandAllRows}
             shouldUpdateScroll={shouldUpdateScroll}
             renderRowExpanded={rowData => {
@@ -790,11 +831,12 @@ const QbsTable: React.FC<QbsTableProps> = ({
                 </HeaderCell>
                 <ActionCell
                   tableBodyRef={tableBodyRef}
+                  dropType={dropType}
+                  wheelWrapperRef={wheelWrapperRef}
                   actionProps={actionProps}
                   className={`${classes.cellClass} ${classes.actionCellClass}`}
                   handleMenuActions={handleMenuActions}
                   dataTheme={dataTheme}
-                  dropType={dropType}
                 />
               </Column>
             )}
@@ -816,7 +858,7 @@ const QbsTable: React.FC<QbsTableProps> = ({
           >
             {(data?.length === 0 || !data) && !isLoading && (
               <div className="flex flex-col gap-2 p-2 mt-6 card-empty-container">
-                <NoData title={emptyTitle ?? 'No Data Found'} subtitle={emptySubTitle} />
+                <NoData title={emptyTitle ?? labels.noDataFound} subtitle={emptySubTitle} />
               </div>
             )}
             {isLoading ? (
@@ -843,6 +885,7 @@ const QbsTable: React.FC<QbsTableProps> = ({
                       columns={columns}
                       tableBodyRef={tableBodyRef}
                       actionProps={actionProps}
+                      labels={labels}
                     />
                   )}
                 </div>
@@ -851,7 +894,9 @@ const QbsTable: React.FC<QbsTableProps> = ({
           </div>
         )}
         <div>
-          {pagination && data?.length > 0 && <Pagination paginationProps={paginationProps} />}
+          {pagination && data?.length > 0 && (
+            <Pagination paginationProps={paginationProps} labels={labels} dataTheme={dataTheme} />
+          )}
         </div>
       </div>
     </div>

package/src/qbsTable/TableCardList.tsx

@@ -106,6 +106,7 @@ const QbsTable: React.FC<QbsTableProps> = ({
   const [isOpen, setIsOpen] = useState(false);
   const prevColumns = useRef<any | null>(null);
   const tableBodyRef = useRef<HTMLDivElement>(null);
+  const wheelWrapperRef = useRef<HTMLDivElement>(null);
   const handleSortColumn = useCallback(
     (sortColumn: any, sortType: any) => {
       setLoading(true);
@@ -481,6 +482,7 @@ const QbsTable: React.FC<QbsTableProps> = ({
           rtl={rtl}
           data={data}
           tableBodyRef={tableBodyRef as React.RefObject<HTMLDivElement>}
+          wheelWrapperRef={wheelWrapperRef}
           dataTheme={dataTheme}
           wordWrap={effectiveWordWrap}
           autoHeight={autoHeight}