qbs-react-grid 2.0.1 → 2.0.3

package/es/Table.d.ts

@@ -96,9 +96,12 @@ export interface TableProps<Row, Key> extends Omit<StandardProps, 'onScroll'> {
     virtualized?: boolean;
     /**Theme Change */
     dataTheme?: string;
+    /** Refresh Row */
+    refreshRow?: number;
     /** Tree table, the callback function in the expanded node */
     renderTreeToggle?: (expandButton: React.ReactNode, rowData?: Row, expanded?: boolean) => React.ReactNode;
     tableKey?: string;
+    infiniteLoading?: boolean;
     /** Customize what you can do to expand a zone */
     renderRowExpanded?: (rowData?: Row) => React.ReactNode;
     /** Custom row element */
@@ -123,6 +126,7 @@ export interface TableProps<Row, Key> extends Omit<StandardProps, 'onScroll'> {
     onTouchMove?: (event: React.TouchEvent) => void;
     /** Callback for the `touchend` event. */
     onTouchEnd?: (event: React.TouchEvent) => void;
+    handleInfiniteScroll?: (value: number) => void;
     /**
      * Callback after table data update.
      * @deprecated use `shouldUpdateScroll` instead
@@ -132,6 +136,7 @@ export interface TableProps<Row, Key> extends Omit<StandardProps, 'onScroll'> {
         y: number;
     }) => void) => void;
     tableBodyRef: React.RefObject<HTMLDivElement>;
+    wheelWrapperRef: React.RefObject<HTMLDivElement | null>;
     bodyRef?: (ref: HTMLElement) => void;
 }
 export interface TableInstance<Row, Key> extends React.FunctionComponent<TableProps<Row, Key>> {

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", "tableKey"],
+var _excluded = ["affixHeader", "children", "classPrefix", "className", "data", "defaultSortType", "width", "expandedRowKeys", "defaultExpandAllRows", "defaultExpandedRowKeys", "style", "id", "isTree", "hover", "bordered", "cellBordered", "wordWrap", "loading", "locale", "showHeader", "pagination", "paginationProps", "sortColumn", "rowHeight", "sortType", "headerHeight", "minHeight", "height", "autoHeight", "fillHeight", "rtl", "translate3d", "rowKey", "virtualized", "rowClassName", "rowExpandedHeight", "disabledScroll", "affixHorizontalScrollbar", "loadAnimation", "shouldUpdateScroll", "renderRow", "renderRowExpanded", "renderLoading", "renderEmpty", "onSortColumn", "onScroll", "renderTreeToggle", "onRowClick", "onRowContextMenu", "onExpandChange", "onTouchStart", "onTouchMove", "onTouchEnd", "dataTheme", "tableBodyHeight", "columns", "tableBodyRef", "tableKey", "handleInfiniteScroll", "infiniteLoading", "wheelWrapperRef"],
   _excluded2 = ["depth", "rowIndex"],
   _excluded3 = ["cellHeight"];
 import { getTranslateDOMPositionXY } from 'dom-lib/translateDOMPositionXY';
@@ -116,13 +116,15 @@ var Table = /*#__PURE__*/React.forwardRef(function (props, ref) {
     columns = props.columns,
     tableBodyRef = props.tableBodyRef,
     tableKey = props.tableKey,
+    handleInfiniteScroll = props.handleInfiniteScroll,
+    infiniteLoading = props.infiniteLoading,
+    wheelWrapperRef = props.wheelWrapperRef,
     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) {
       return x + 1;
@@ -181,7 +183,6 @@ var Table = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var affixHeaderWrapperRef = useRef(null);
   var headerWrapperRef = useRef(null);
   // const tableBodyRef = useRef<HTMLDivElement>(null);
-  var wheelWrapperRef = useRef(null);
   var scrollbarXRef = useRef(null);
   var scrollbarYRef = useRef(null);
   var handleTableResizeChange = function handleTableResizeChange(_prevSize, event) {
@@ -293,7 +294,8 @@ var Table = /*#__PURE__*/React.forwardRef(function (props, ref) {
       onScroll: onScroll,
       onTouchStart: onTouchStart,
       onTouchMove: onTouchMove,
-      onTouchEnd: onTouchEnd
+      onTouchEnd: onTouchEnd,
+      handleInfiniteScroll: handleInfiniteScroll
     }),
     isScrolling = _useScrollListener.isScrolling,
     isChildFocused = _useScrollListener.isChildFocused,
@@ -617,7 +619,9 @@ var Table = /*#__PURE__*/React.forwardRef(function (props, ref) {
           width: tableWidth.current
         },
         length: tableWidth.current,
-        onScroll: onScrollHorizontal,
+        onScroll: function onScroll(delta) {
+          onScrollHorizontal(delta), console.log('onScrollHorizontal', delta);
+        },
         scrollLength: contentWidth.current,
         ref: scrollbarXRef
       }));
@@ -781,7 +785,9 @@ var Table = /*#__PURE__*/React.forwardRef(function (props, ref) {
       role: "rowgroup",
       className: prefix('body-row-wrapper'),
       style: bodyStyles,
-      onScroll: onScrollBody
+      onScroll: function onScroll(e) {
+        onScrollBody === null || onScrollBody === void 0 ? void 0 : onScrollBody(e); // existing handler
+      }
     }, !loading && /*#__PURE__*/React.createElement("div", {
       style: wheelStyles,
       className: prefix('body-wheel-area'),
@@ -792,7 +798,12 @@ var Table = /*#__PURE__*/React.forwardRef(function (props, ref) {
     }) : null, visibleRows.current, bottomHideHeight ? /*#__PURE__*/React.createElement(Row, {
       style: bottomRowStyles,
       className: "virtualized"
-    }) : null), /*#__PURE__*/React.createElement(EmptyMessage, {
+    }) : null, infiniteLoading && /*#__PURE__*/React.createElement("div", {
+      style: {
+        padding: 12,
+        textAlign: 'center'
+      }
+    }, /*#__PURE__*/React.createElement("span", null, "Loading more rows\u2026"))), /*#__PURE__*/React.createElement(EmptyMessage, {
       locale: locale,
       renderEmpty: renderEmpty,
       addPrefix: prefix,

package/es/qbsTable/CustomTableCell.js

@@ -112,7 +112,7 @@ export var CustomTableCell = /*#__PURE__*/React.memo(function (_ref4) {
     path = _ref4.path,
     link = _ref4.link,
     props = _objectWithoutPropertiesLoose(_ref4, _excluded3);
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Cell, _extends({}, props, {
+  return /*#__PURE__*/React.createElement(Cell, _extends({}, props, {
     dataKey: dataKey
   }), link && !path && !(hideLink !== null && hideLink !== void 0 && hideLink(rowData)) ? /*#__PURE__*/React.createElement("a", {
     onClick: function onClick() {
@@ -122,7 +122,7 @@ export var CustomTableCell = /*#__PURE__*/React.memo(function (_ref4) {
   }, renderCell ? (_renderCell = renderCell(rowData)) === null || _renderCell === void 0 ? void 0 : _renderCell.cell : handleCellFormat(rowData[dataKey], type)) : path && !(hideLink !== null && hideLink !== void 0 && hideLink(rowData)) ? /*#__PURE__*/React.createElement(Link, {
     to: (_path = path === null || path === void 0 ? void 0 : path(rowData)) != null ? _path : '',
     className: "qbs-table-row-link"
-  }, renderCell ? (_renderCell2 = renderCell(rowData)) === null || _renderCell2 === void 0 ? void 0 : _renderCell2.cell : handleCellFormat(rowData[dataKey], type)) : /*#__PURE__*/React.createElement(React.Fragment, null, renderCell ? (_renderCell3 = renderCell(rowData)) === null || _renderCell3 === void 0 ? void 0 : _renderCell3.cell : handleCellFormat(rowData[dataKey], type))));
+  }, renderCell ? (_renderCell2 = renderCell(rowData)) === null || _renderCell2 === void 0 ? void 0 : _renderCell2.cell : handleCellFormat(rowData[dataKey], type)) : renderCell ? (_renderCell3 = renderCell(rowData)) === null || _renderCell3 === void 0 ? void 0 : _renderCell3.cell : handleCellFormat(rowData[dataKey], type));
 });
 export var CustomRowStatus = /*#__PURE__*/React.memo(function (_ref5) {
   var _path2;
@@ -154,7 +154,7 @@ export var CustomRowStatus = /*#__PURE__*/React.memo(function (_ref5) {
       }
     }
   };
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Cell, _extends({}, props, {
+  return /*#__PURE__*/React.createElement(Cell, _extends({}, props, {
     dataKey: dataKey,
     style: {
       padding: 0,
@@ -190,5 +190,5 @@ export var CustomRowStatus = /*#__PURE__*/React.memo(function (_ref5) {
     style: {
       position: 'fixed'
     }
-  }, getToolTip === null || getToolTip === void 0 ? void 0 : getToolTip(rowData)))));
+  }, getToolTip === null || getToolTip === void 0 ? void 0 : getToolTip(rowData))));
 });

package/es/qbsTable/QbsTable.js

@@ -22,6 +22,7 @@ import { SettingsIcon } from './utilities/icons';
 import '../../dist/css/qbs-react-grid.css';
 var CHECKBOX_LINE_HEIGHT = '36px';
 var COLUMN_WIDTH = 250;
+var REFRESH_KEY = 0;
 var QbsTable = function QbsTable(_ref) {
   var _Object$keys;
   var handleColumnSort = _ref.handleColumnSort,
@@ -106,7 +107,12 @@ var QbsTable = function QbsTable(_ref) {
     _ref$isCustomTableCar = _ref.isCustomTableCardView,
     isCustomTableCardView = _ref$isCustomTableCar === void 0 ? false : _ref$isCustomTableCar,
     handleTableCardView = _ref.handleTableCardView,
-    handleCustomCardLoader = _ref.handleCustomCardLoader;
+    handleCustomCardLoader = _ref.handleCustomCardLoader,
+    hasMoreData = _ref.hasMoreData,
+    loadMoreData = _ref.loadMoreData,
+    infiniteLoading = _ref.infiniteLoading,
+    _ref$infiniteScroll = _ref.infiniteScroll,
+    infiniteScroll = _ref$infiniteScroll === void 0 ? false : _ref$infiniteScroll;
   var _useState = useState(false),
     loading = _useState[0],
     setLoading = _useState[1];
@@ -129,6 +135,7 @@ var QbsTable = function QbsTable(_ref) {
     setTableViewToggle = _useState5[1];
   var isMobile = useResponsiveStore();
   var tableBodyRef = useRef(null);
+  var wheelWrapperRef = useRef(null);
   var handleSortColumn = useCallback(function (sortColumn, sortType) {
     setLoading(true);
     setTimeout(function () {
@@ -198,6 +205,7 @@ var QbsTable = function QbsTable(_ref) {
   }, [columns]);
   var handleColumnWidth = useCallback(function (newWidth, dataKey) {
     if (newWidth === undefined || dataKey === undefined) return;
+    REFRESH_KEY = REFRESH_KEY + 1;
     setColumns(function (prevColumns) {
       return prevColumns.map(function (column) {
         return column.field === dataKey ? _extends({}, column, {
@@ -538,12 +546,25 @@ var QbsTable = function QbsTable(_ref) {
         dataKey: field,
         dataTheme: dataTheme,
         className: " " + classes.cellClass
-      })) : /*#__PURE__*/React.createElement(React.Fragment, null);
+      })) : null;
     } // ✅ Fix: Return `null` instead of `false`
     ).filter(Boolean);
   },
-  // ✅ Fix: Remove `undefined` and `false` elements
+  // ✅ Fix: Type assertion to ReactElement[]
   [columns, dataTheme]);
+  var handleInfiniteScroll = function handleInfiniteScroll(scroll) {
+    if (!infiniteScroll) return;
+    var wrapper = wheelWrapperRef.current;
+    if (!wrapper || !hasMoreData || infiniteLoading) return;
+    var scrollTop = wrapper.scrollTop,
+      clientHeight = wrapper.clientHeight;
+    var scrollHeight = Math.abs(scroll) + (height - headerHeight);
+
+    // Trigger fetch when user scrolls within 100px of bottom
+    if (scrollTop + clientHeight >= scrollHeight - 70) {
+      loadMoreData === null || loadMoreData === void 0 ? void 0 : loadMoreData(); // fetch next page here
+    }
+  };
   return /*#__PURE__*/React.createElement("div", {
     className: "qbs-table " + classes.tableContainerClass,
     "data-theme": dataTheme
@@ -551,19 +572,23 @@ var QbsTable = function QbsTable(_ref) {
     className: "qbs-table-border-wrap"
   }, tableViewToggle ? /*#__PURE__*/React.createElement(Table, {
     height: autoHeight ? undefined : height,
-    key: tableKey,
+    key: tableKey + REFRESH_KEY,
     tableKey: tableKey,
     data: data,
+    refreshRow: REFRESH_KEY,
     tableBodyRef: tableBodyRef,
     dataTheme: dataTheme,
     wordWrap: wordWrap,
+    wheelWrapperRef: wheelWrapperRef,
     autoHeight: autoHeight,
+    handleInfiniteScroll: handleInfiniteScroll,
     sortColumn: sortColumn,
     style: {
       position: 'relative'
     },
     sortType: sortType,
     onSortColumn: handleSortColumn,
+    infiniteLoading: infiniteLoading,
     onRowClick: onRowClick,
     tableBodyHeight: tableBodyHeight,
     cellBordered: cellBordered,

package/es/qbsTable/TableCardList.js

@@ -110,6 +110,7 @@ var QbsTable = function QbsTable(_ref) {
     setIsOpen = _useState4[1];
   var prevColumns = useRef(null);
   var tableBodyRef = useRef(null);
+  var wheelWrapperRef = useRef(null);
   var handleSortColumn = useCallback(function (sortColumn, sortType) {
     setLoading(true);
     setTimeout(function () {
@@ -418,6 +419,7 @@ var QbsTable = function QbsTable(_ref) {
     wordWrap: wordWrap,
     autoHeight: autoHeight,
     sortColumn: sortColumn,
+    wheelWrapperRef: wheelWrapperRef,
     style: {
       position: 'relative'
     },

package/es/qbsTable/commontypes.d.ts

@@ -127,6 +127,10 @@ export interface QbsTableProps {
     handleTableCardView?: (data: any) => React.ReactNode;
     isCustomTableCardView?: boolean;
     handleCustomCardLoader?: () => React.ReactNode;
+    hasMoreData?: boolean;
+    loadMoreData?: () => void;
+    infiniteScroll?: boolean;
+    infiniteLoading?: boolean;
 }
 export interface QbsTableToolbarProps {
     title?: string;

package/es/utils/useScrollListener.d.ts

@@ -31,6 +31,7 @@ interface ScrollListenerProps {
     onTouchStart?: (event: React.TouchEvent) => void;
     onTouchMove?: (event: React.TouchEvent) => void;
     onTouchEnd?: (event: React.TouchEvent) => void;
+    handleInfiniteScroll?: (value: number) => void;
 }
 /**
  * Add scroll, touch, and wheel monitoring events to the table,

package/es/utils/useScrollListener.js

@@ -68,7 +68,8 @@ var useScrollListener = function useScrollListener(props) {
     contentHeight = props.contentHeight,
     headerHeight = props.headerHeight,
     rtl = props.rtl,
-    tableKey = props.tableKey;
+    tableKey = props.tableKey,
+    handleInfiniteScroll = props.handleInfiniteScroll;
   var wheelListener = useRef(null);
   var touchStartListener = useRef(null);
   var touchMoveListener = useRef(null);
@@ -130,6 +131,10 @@ var useScrollListener = function useScrollListener(props) {
     var x = Math.min(0, nextScrollX < minScrollX.current ? minScrollX.current : nextScrollX);
     setScrollX(x);
     setScrollY(y);
+    console.log(scrollY.current, contentHeight.current, nextScrollY, minScrollY.current, 'scrolllistner');
+    if (typeof handleInfiniteScroll === 'function' && deltaY !== 0 && !loading && Math.abs(y) + getTableHeight() >= contentHeight.current - 12) {
+      handleInfiniteScroll(scrollY.current);
+    }
     onScroll === null || onScroll === void 0 ? void 0 : onScroll(Math.abs(x), Math.abs(y));
     if (virtualized) {
       // Add a state to the table during virtualized scrolling.
@@ -207,7 +212,6 @@ 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;

package/lib/Table.d.ts

@@ -96,9 +96,12 @@ export interface TableProps<Row, Key> extends Omit<StandardProps, 'onScroll'> {
     virtualized?: boolean;
     /**Theme Change */
     dataTheme?: string;
+    /** Refresh Row */
+    refreshRow?: number;
     /** Tree table, the callback function in the expanded node */
     renderTreeToggle?: (expandButton: React.ReactNode, rowData?: Row, expanded?: boolean) => React.ReactNode;
     tableKey?: string;
+    infiniteLoading?: boolean;
     /** Customize what you can do to expand a zone */
     renderRowExpanded?: (rowData?: Row) => React.ReactNode;
     /** Custom row element */
@@ -123,6 +126,7 @@ export interface TableProps<Row, Key> extends Omit<StandardProps, 'onScroll'> {
     onTouchMove?: (event: React.TouchEvent) => void;
     /** Callback for the `touchend` event. */
     onTouchEnd?: (event: React.TouchEvent) => void;
+    handleInfiniteScroll?: (value: number) => void;
     /**
      * Callback after table data update.
      * @deprecated use `shouldUpdateScroll` instead
@@ -132,6 +136,7 @@ export interface TableProps<Row, Key> extends Omit<StandardProps, 'onScroll'> {
         y: number;
     }) => void) => void;
     tableBodyRef: React.RefObject<HTMLDivElement>;
+    wheelWrapperRef: React.RefObject<HTMLDivElement | null>;
     bodyRef?: (ref: HTMLElement) => void;
 }
 export interface TableInstance<Row, Key> extends React.FunctionComponent<TableProps<Row, Key>> {

package/lib/Table.js

@@ -20,7 +20,7 @@ var _Row = _interopRequireDefault(require("./Row"));
 var _Scrollbar = _interopRequireDefault(require("./Scrollbar"));
 var _TableContext = _interopRequireDefault(require("./TableContext"));
 var _utils = require("./utils");
-var _excluded = ["affixHeader", "children", "classPrefix", "className", "data", "defaultSortType", "width", "expandedRowKeys", "defaultExpandAllRows", "defaultExpandedRowKeys", "style", "id", "isTree", "hover", "bordered", "cellBordered", "wordWrap", "loading", "locale", "showHeader", "pagination", "paginationProps", "sortColumn", "rowHeight", "sortType", "headerHeight", "minHeight", "height", "autoHeight", "fillHeight", "rtl", "translate3d", "rowKey", "virtualized", "rowClassName", "rowExpandedHeight", "disabledScroll", "affixHorizontalScrollbar", "loadAnimation", "shouldUpdateScroll", "renderRow", "renderRowExpanded", "renderLoading", "renderEmpty", "onSortColumn", "onScroll", "renderTreeToggle", "onRowClick", "onRowContextMenu", "onExpandChange", "onTouchStart", "onTouchMove", "onTouchEnd", "dataTheme", "tableBodyHeight", "columns", "tableBodyRef", "tableKey"],
+var _excluded = ["affixHeader", "children", "classPrefix", "className", "data", "defaultSortType", "width", "expandedRowKeys", "defaultExpandAllRows", "defaultExpandedRowKeys", "style", "id", "isTree", "hover", "bordered", "cellBordered", "wordWrap", "loading", "locale", "showHeader", "pagination", "paginationProps", "sortColumn", "rowHeight", "sortType", "headerHeight", "minHeight", "height", "autoHeight", "fillHeight", "rtl", "translate3d", "rowKey", "virtualized", "rowClassName", "rowExpandedHeight", "disabledScroll", "affixHorizontalScrollbar", "loadAnimation", "shouldUpdateScroll", "renderRow", "renderRowExpanded", "renderLoading", "renderEmpty", "onSortColumn", "onScroll", "renderTreeToggle", "onRowClick", "onRowContextMenu", "onExpandChange", "onTouchStart", "onTouchMove", "onTouchEnd", "dataTheme", "tableBodyHeight", "columns", "tableBodyRef", "tableKey", "handleInfiniteScroll", "infiniteLoading", "wheelWrapperRef"],
   _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); }
@@ -123,13 +123,15 @@ var Table = /*#__PURE__*/_react["default"].forwardRef(function (props, ref) {
     columns = props.columns,
     tableBodyRef = props.tableBodyRef,
     tableKey = props.tableKey,
+    handleInfiniteScroll = props.handleInfiniteScroll,
+    infiniteLoading = props.infiniteLoading,
+    wheelWrapperRef = props.wheelWrapperRef,
     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) {
       return x + 1;
@@ -188,7 +190,6 @@ var Table = /*#__PURE__*/_react["default"].forwardRef(function (props, ref) {
   var affixHeaderWrapperRef = (0, _react.useRef)(null);
   var headerWrapperRef = (0, _react.useRef)(null);
   // const tableBodyRef = useRef<HTMLDivElement>(null);
-  var wheelWrapperRef = (0, _react.useRef)(null);
   var scrollbarXRef = (0, _react.useRef)(null);
   var scrollbarYRef = (0, _react.useRef)(null);
   var handleTableResizeChange = function handleTableResizeChange(_prevSize, event) {
@@ -300,7 +301,8 @@ var Table = /*#__PURE__*/_react["default"].forwardRef(function (props, ref) {
       onScroll: onScroll,
       onTouchStart: onTouchStart,
       onTouchMove: onTouchMove,
-      onTouchEnd: onTouchEnd
+      onTouchEnd: onTouchEnd,
+      handleInfiniteScroll: handleInfiniteScroll
     }),
     isScrolling = _useScrollListener.isScrolling,
     isChildFocused = _useScrollListener.isChildFocused,
@@ -624,7 +626,9 @@ var Table = /*#__PURE__*/_react["default"].forwardRef(function (props, ref) {
           width: tableWidth.current
         },
         length: tableWidth.current,
-        onScroll: onScrollHorizontal,
+        onScroll: function onScroll(delta) {
+          onScrollHorizontal(delta), console.log('onScrollHorizontal', delta);
+        },
         scrollLength: contentWidth.current,
         ref: scrollbarXRef
       }));
@@ -788,7 +792,9 @@ var Table = /*#__PURE__*/_react["default"].forwardRef(function (props, ref) {
       role: "rowgroup",
       className: prefix('body-row-wrapper'),
       style: bodyStyles,
-      onScroll: onScrollBody
+      onScroll: function onScroll(e) {
+        onScrollBody === null || onScrollBody === void 0 ? void 0 : onScrollBody(e); // existing handler
+      }
     }, !loading && /*#__PURE__*/_react["default"].createElement("div", {
       style: wheelStyles,
       className: prefix('body-wheel-area'),
@@ -799,7 +805,12 @@ var Table = /*#__PURE__*/_react["default"].forwardRef(function (props, ref) {
     }) : null, visibleRows.current, bottomHideHeight ? /*#__PURE__*/_react["default"].createElement(_Row["default"], {
       style: bottomRowStyles,
       className: "virtualized"
-    }) : null), /*#__PURE__*/_react["default"].createElement(_EmptyMessage["default"], {
+    }) : null, infiniteLoading && /*#__PURE__*/_react["default"].createElement("div", {
+      style: {
+        padding: 12,
+        textAlign: 'center'
+      }
+    }, /*#__PURE__*/_react["default"].createElement("span", null, "Loading more rows\u2026"))), /*#__PURE__*/_react["default"].createElement(_EmptyMessage["default"], {
       locale: locale,
       renderEmpty: renderEmpty,
       addPrefix: prefix,

package/lib/qbsTable/CustomTableCell.js

@@ -122,7 +122,7 @@ var CustomTableCell = /*#__PURE__*/_react["default"].memo(function (_ref4) {
     path = _ref4.path,
     link = _ref4.link,
     props = (0, _objectWithoutPropertiesLoose2["default"])(_ref4, _excluded3);
-  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_Cell["default"], (0, _extends2["default"])({}, props, {
+  return /*#__PURE__*/_react["default"].createElement(_Cell["default"], (0, _extends2["default"])({}, props, {
     dataKey: dataKey
   }), link && !path && !(hideLink !== null && hideLink !== void 0 && hideLink(rowData)) ? /*#__PURE__*/_react["default"].createElement("a", {
     onClick: function onClick() {
@@ -132,7 +132,7 @@ var CustomTableCell = /*#__PURE__*/_react["default"].memo(function (_ref4) {
   }, renderCell ? (_renderCell = renderCell(rowData)) === null || _renderCell === void 0 ? void 0 : _renderCell.cell : (0, _handleFormatCell.handleCellFormat)(rowData[dataKey], type)) : path && !(hideLink !== null && hideLink !== void 0 && hideLink(rowData)) ? /*#__PURE__*/_react["default"].createElement(_reactRouterDom.Link, {
     to: (_path = path === null || path === void 0 ? void 0 : path(rowData)) != null ? _path : '',
     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))));
+  }, renderCell ? (_renderCell2 = renderCell(rowData)) === null || _renderCell2 === void 0 ? void 0 : _renderCell2.cell : (0, _handleFormatCell.handleCellFormat)(rowData[dataKey], type)) : renderCell ? (_renderCell3 = renderCell(rowData)) === null || _renderCell3 === void 0 ? void 0 : _renderCell3.cell : (0, _handleFormatCell.handleCellFormat)(rowData[dataKey], type));
 });
 exports.CustomTableCell = CustomTableCell;
 var CustomRowStatus = /*#__PURE__*/_react["default"].memo(function (_ref5) {
@@ -165,7 +165,7 @@ var CustomRowStatus = /*#__PURE__*/_react["default"].memo(function (_ref5) {
       }
     }
   };
-  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_Cell["default"], (0, _extends2["default"])({}, props, {
+  return /*#__PURE__*/_react["default"].createElement(_Cell["default"], (0, _extends2["default"])({}, props, {
     dataKey: dataKey,
     style: {
       padding: 0,
@@ -201,6 +201,6 @@ var CustomRowStatus = /*#__PURE__*/_react["default"].memo(function (_ref5) {
     style: {
       position: 'fixed'
     }
-  }, getToolTip === null || getToolTip === void 0 ? void 0 : getToolTip(rowData)))));
+  }, getToolTip === null || getToolTip === void 0 ? void 0 : getToolTip(rowData))));
 });
 exports.CustomRowStatus = CustomRowStatus;

package/lib/qbsTable/QbsTable.js

@@ -28,6 +28,7 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 
 var CHECKBOX_LINE_HEIGHT = '36px';
 var COLUMN_WIDTH = 250;
+var REFRESH_KEY = 0;
 var QbsTable = function QbsTable(_ref) {
   var _Object$keys;
   var handleColumnSort = _ref.handleColumnSort,
@@ -112,7 +113,12 @@ var QbsTable = function QbsTable(_ref) {
     _ref$isCustomTableCar = _ref.isCustomTableCardView,
     isCustomTableCardView = _ref$isCustomTableCar === void 0 ? false : _ref$isCustomTableCar,
     handleTableCardView = _ref.handleTableCardView,
-    handleCustomCardLoader = _ref.handleCustomCardLoader;
+    handleCustomCardLoader = _ref.handleCustomCardLoader,
+    hasMoreData = _ref.hasMoreData,
+    loadMoreData = _ref.loadMoreData,
+    infiniteLoading = _ref.infiniteLoading,
+    _ref$infiniteScroll = _ref.infiniteScroll,
+    infiniteScroll = _ref$infiniteScroll === void 0 ? false : _ref$infiniteScroll;
   var _useState = (0, _react.useState)(false),
     loading = _useState[0],
     setLoading = _useState[1];
@@ -135,6 +141,7 @@ var QbsTable = function QbsTable(_ref) {
     setTableViewToggle = _useState5[1];
   var isMobile = (0, _useResponsiveStore["default"])();
   var tableBodyRef = (0, _react.useRef)(null);
+  var wheelWrapperRef = (0, _react.useRef)(null);
   var handleSortColumn = (0, _react.useCallback)(function (sortColumn, sortType) {
     setLoading(true);
     setTimeout(function () {
@@ -204,6 +211,7 @@ var QbsTable = function QbsTable(_ref) {
   }, [columns]);
   var handleColumnWidth = (0, _react.useCallback)(function (newWidth, dataKey) {
     if (newWidth === undefined || dataKey === undefined) return;
+    REFRESH_KEY = REFRESH_KEY + 1;
     setColumns(function (prevColumns) {
       return prevColumns.map(function (column) {
         return column.field === dataKey ? (0, _extends2["default"])({}, column, {
@@ -544,12 +552,25 @@ var QbsTable = function QbsTable(_ref) {
         dataKey: field,
         dataTheme: dataTheme,
         className: " " + classes.cellClass
-      })) : /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null);
+      })) : null;
     } // ✅ Fix: Return `null` instead of `false`
     ).filter(Boolean);
   },
-  // ✅ Fix: Remove `undefined` and `false` elements
+  // ✅ Fix: Type assertion to ReactElement[]
   [columns, dataTheme]);
+  var handleInfiniteScroll = function handleInfiniteScroll(scroll) {
+    if (!infiniteScroll) return;
+    var wrapper = wheelWrapperRef.current;
+    if (!wrapper || !hasMoreData || infiniteLoading) return;
+    var scrollTop = wrapper.scrollTop,
+      clientHeight = wrapper.clientHeight;
+    var scrollHeight = Math.abs(scroll) + (height - headerHeight);
+
+    // Trigger fetch when user scrolls within 100px of bottom
+    if (scrollTop + clientHeight >= scrollHeight - 70) {
+      loadMoreData === null || loadMoreData === void 0 ? void 0 : loadMoreData(); // fetch next page here
+    }
+  };
   return /*#__PURE__*/_react["default"].createElement("div", {
     className: "qbs-table " + classes.tableContainerClass,
     "data-theme": dataTheme
@@ -557,19 +578,23 @@ var QbsTable = function QbsTable(_ref) {
     className: "qbs-table-border-wrap"
   }, tableViewToggle ? /*#__PURE__*/_react["default"].createElement(_Table["default"], {
     height: autoHeight ? undefined : height,
-    key: tableKey,
+    key: tableKey + REFRESH_KEY,
     tableKey: tableKey,
     data: data,
+    refreshRow: REFRESH_KEY,
     tableBodyRef: tableBodyRef,
     dataTheme: dataTheme,
     wordWrap: wordWrap,
+    wheelWrapperRef: wheelWrapperRef,
     autoHeight: autoHeight,
+    handleInfiniteScroll: handleInfiniteScroll,
     sortColumn: sortColumn,
     style: {
       position: 'relative'
     },
     sortType: sortType,
     onSortColumn: handleSortColumn,
+    infiniteLoading: infiniteLoading,
     onRowClick: onRowClick,
     tableBodyHeight: tableBodyHeight,
     cellBordered: cellBordered,

package/lib/qbsTable/TableCardList.js

@@ -116,6 +116,7 @@ var QbsTable = function QbsTable(_ref) {
     setIsOpen = _useState4[1];
   var prevColumns = (0, _react.useRef)(null);
   var tableBodyRef = (0, _react.useRef)(null);
+  var wheelWrapperRef = (0, _react.useRef)(null);
   var handleSortColumn = (0, _react.useCallback)(function (sortColumn, sortType) {
     setLoading(true);
     setTimeout(function () {
@@ -424,6 +425,7 @@ var QbsTable = function QbsTable(_ref) {
     wordWrap: wordWrap,
     autoHeight: autoHeight,
     sortColumn: sortColumn,
+    wheelWrapperRef: wheelWrapperRef,
     style: {
       position: 'relative'
     },

package/lib/qbsTable/commontypes.d.ts

@@ -127,6 +127,10 @@ export interface QbsTableProps {
     handleTableCardView?: (data: any) => React.ReactNode;
     isCustomTableCardView?: boolean;
     handleCustomCardLoader?: () => React.ReactNode;
+    hasMoreData?: boolean;
+    loadMoreData?: () => void;
+    infiniteScroll?: boolean;
+    infiniteLoading?: boolean;
 }
 export interface QbsTableToolbarProps {
     title?: string;

package/lib/utils/useScrollListener.d.ts

@@ -31,6 +31,7 @@ interface ScrollListenerProps {
     onTouchStart?: (event: React.TouchEvent) => void;
     onTouchMove?: (event: React.TouchEvent) => void;
     onTouchEnd?: (event: React.TouchEvent) => void;
+    handleInfiniteScroll?: (value: number) => void;
 }
 /**
  * Add scroll, touch, and wheel monitoring events to the table,

package/lib/utils/useScrollListener.js

@@ -72,7 +72,8 @@ var useScrollListener = function useScrollListener(props) {
     contentHeight = props.contentHeight,
     headerHeight = props.headerHeight,
     rtl = props.rtl,
-    tableKey = props.tableKey;
+    tableKey = props.tableKey,
+    handleInfiniteScroll = props.handleInfiniteScroll;
   var wheelListener = (0, _react.useRef)(null);
   var touchStartListener = (0, _react.useRef)(null);
   var touchMoveListener = (0, _react.useRef)(null);
@@ -134,6 +135,10 @@ var useScrollListener = function useScrollListener(props) {
     var x = Math.min(0, nextScrollX < minScrollX.current ? minScrollX.current : nextScrollX);
     setScrollX(x);
     setScrollY(y);
+    console.log(scrollY.current, contentHeight.current, nextScrollY, minScrollY.current, 'scrolllistner');
+    if (typeof handleInfiniteScroll === 'function' && deltaY !== 0 && !loading && Math.abs(y) + getTableHeight() >= contentHeight.current - 12) {
+      handleInfiniteScroll(scrollY.current);
+    }
     onScroll === null || onScroll === void 0 ? void 0 : onScroll(Math.abs(x), Math.abs(y));
     if (virtualized) {
       // Add a state to the table during virtualized scrolling.
@@ -211,7 +216,6 @@ 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;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "qbs-react-grid",
-  "version": "2.0.1",
+  "version": "2.0.3",
   "description": "A React table component",
   "main": "lib/index.js",
   "typings": "lib/index.d.ts",
@@ -72,7 +72,7 @@
     "@commitlint/cli": "^13.1.0",
     "@commitlint/config-conventional": "^13.1.0",
     "@faker-js/faker": "^7.6.0",
-    "@testing-library/react": "^13.4.0",
+    "@testing-library/react": "^16.2.0",
     "@types/lodash": "^4.14.165",
     "@types/prop-types": "^15.7.1",
     "@types/react": "^19.0.11",

package/src/HeaderCell.tsx

@@ -97,7 +97,6 @@ const HeaderCell = React.forwardRef((props: HeaderCellProps, ref: React.Ref<HTML
       onSortColumn?.(sortKey ?? dataKey);
     }
   }, [dataKey, onSortColumn, sortable, sortKey]);
-
   const handleColumnResizeStart = useCallback(() => {
     onColumnResizeStart?.(columnWidth, left, !!fixed);
   }, [columnWidth, fixed, left, onColumnResizeStart]);

package/src/Table.tsx

@@ -216,7 +216,8 @@ export interface TableProps<Row, Key> extends Omit<StandardProps, 'onScroll'> {
 
   /**Theme Change */
   dataTheme?: string;
-
+  /** Refresh Row */
+  refreshRow?: number;
   /** Tree table, the callback function in the expanded node */
   renderTreeToggle?: (
     expandButton: React.ReactNode,
@@ -224,6 +225,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 +261,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;
 }
 
@@ -340,6 +345,9 @@ const Table = React.forwardRef(<Row extends RowDataType, Key>(props: TableProps<
     columns,
     tableBodyRef,
     tableKey,
+    handleInfiniteScroll,
+    infiniteLoading,
+    wheelWrapperRef,
     ...rest
   } = props;
 
@@ -349,7 +357,6 @@ const Table = React.forwardRef(<Row extends RowDataType, Key>(props: TableProps<
     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 +415,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 +539,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 +960,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), console.log('onScrollHorizontal', delta);
+          }}
           scrollLength={contentWidth.current}
           ref={scrollbarXRef}
         />
@@ -1132,13 +1141,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/qbsTable/CustomTableCell.tsx

@@ -110,21 +110,21 @@ export const CustomTableCell: React.FC<any> = React.memo(
     ...props
   }) => {
     return (
-      <>
-        <Cell {...props} dataKey={dataKey}>
-          {link && !path && !hideLink?.(rowData) ? (
-            <a onClick={() => rowClick?.(rowData)} className="qbs-table-row-link">
-              {renderCell ? renderCell(rowData)?.cell : handleCellFormat(rowData[dataKey], type)}
-            </a>
-          ) : path && !hideLink?.(rowData) ? (
-            <Link to={path?.(rowData) ?? ''} className="qbs-table-row-link">
-              {renderCell ? renderCell(rowData)?.cell : handleCellFormat(rowData[dataKey], type)}
-            </Link>
-          ) : (
-            <>{renderCell ? renderCell(rowData)?.cell : handleCellFormat(rowData[dataKey], type)}</>
-          )}
-        </Cell>
-      </>
+      <Cell {...props} dataKey={dataKey}>
+        {link && !path && !hideLink?.(rowData) ? (
+          <a onClick={() => rowClick?.(rowData)} className="qbs-table-row-link">
+            {renderCell ? renderCell(rowData)?.cell : handleCellFormat(rowData[dataKey], type)}
+          </a>
+        ) : path && !hideLink?.(rowData) ? (
+          <Link to={path?.(rowData) ?? ''} className="qbs-table-row-link">
+            {renderCell ? renderCell(rowData)?.cell : handleCellFormat(rowData[dataKey], type)}
+          </Link>
+        ) : renderCell ? (
+          renderCell(rowData)?.cell
+        ) : (
+          handleCellFormat(rowData[dataKey], type)
+        )}
+      </Cell>
     );
   }
 );
@@ -149,41 +149,39 @@ export const CustomRowStatus: React.FC<any> = React.memo(
     };
 
     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' }}
+      <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)}
             >
-              {getToolTip?.(rowData)}
-            </div>
+              {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' }}
+          >
+            {getToolTip?.(rowData)}
           </div>
-        </Cell>
-      </>
+        </div>
+      </Cell>
     );
   }
 );

package/src/qbsTable/QbsTable.tsx

@@ -30,6 +30,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,
@@ -91,7 +92,11 @@ const QbsTable: React.FC<QbsTableProps> = ({
   childDetailHeading = '',
   isCustomTableCardView = false,
   handleTableCardView,
-  handleCustomCardLoader
+  handleCustomCardLoader,
+  hasMoreData,
+  loadMoreData,
+  infiniteLoading,
+  infiniteScroll = false
 }) => {
   const [loading, setLoading] = useState(false);
   const [columns, setColumns] = useState(propColumn);
@@ -102,6 +107,8 @@ const QbsTable: React.FC<QbsTableProps> = ({
   const [tableViewToggle, setTableViewToggle] = useState(tableView);
   const isMobile = useResponsiveStore();
   const tableBodyRef = useRef<HTMLDivElement>(null);
+  const wheelWrapperRef = useRef<HTMLDivElement>(null);
+
   const handleSortColumn = useCallback(
     (sortColumn: any, sortType: any) => {
       setLoading(true);
@@ -188,6 +195,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
@@ -558,14 +566,26 @@ const QbsTable: React.FC<QbsTableProps> = ({
                   )}
                 </Column>
               )
-            ) : (
-              <></>
-            ) // ✅ Fix: Return `null` instead of `false`
+            ) : null // ✅ Fix: Return `null` instead of `false`
         )
-        .filter(Boolean), // ✅ Fix: Remove `undefined` and `false` elements
+        .filter(Boolean) as React.ReactElement[], // ✅ Fix: Type assertion to ReactElement[]
     [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}>
       {toolbar && <ToolBar {...toolbarProps} />}
@@ -573,17 +593,21 @@ const QbsTable: React.FC<QbsTableProps> = ({
         {tableViewToggle ? (
           <Table
             height={autoHeight ? undefined : height}
-            key={tableKey}
+            key={tableKey + REFRESH_KEY}
             tableKey={tableKey}
             data={data}
+            refreshRow={REFRESH_KEY}
             tableBodyRef={tableBodyRef as React.RefObject<HTMLDivElement>}
             dataTheme={dataTheme}
             wordWrap={wordWrap}
+            wheelWrapperRef={wheelWrapperRef}
             autoHeight={autoHeight}
+            handleInfiniteScroll={handleInfiniteScroll}
             sortColumn={sortColumn}
             style={{ position: 'relative' }}
             sortType={sortType}
             onSortColumn={handleSortColumn}
+            infiniteLoading={infiniteLoading}
             onRowClick={onRowClick}
             tableBodyHeight={tableBodyHeight}
             cellBordered={cellBordered}

package/src/qbsTable/TableCardList.tsx

@@ -90,6 +90,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);
@@ -450,6 +451,7 @@ const QbsTable: React.FC<QbsTableProps> = ({
           wordWrap={wordWrap}
           autoHeight={autoHeight}
           sortColumn={sortColumn}
+          wheelWrapperRef={wheelWrapperRef}
           style={{ position: 'relative' }}
           sortType={sortType}
           onSortColumn={handleSortColumn}

package/src/qbsTable/commontypes.ts

@@ -130,6 +130,10 @@ export interface QbsTableProps {
   handleTableCardView?: (data: any) => React.ReactNode;
   isCustomTableCardView?: boolean;
   handleCustomCardLoader?: () => React.ReactNode;
+  hasMoreData?: boolean
+  loadMoreData?: ()=> void
+  infiniteScroll?: boolean
+  infiniteLoading?:boolean
 }
 
 export interface QbsTableToolbarProps {

package/src/utils/useCellDescriptor.ts

@@ -202,7 +202,6 @@ const useCellDescriptor = <Row extends RowDataType>(
       const columnProps = getColumnProps(column);
 
       const { width, resizable, flexGrow, minWidth, onResize, treeCol } = columnProps;
-
       if (treeCol) {
         hasCustomTreeCol = true;
       }

package/src/utils/useScrollListener.ts

@@ -4,6 +4,7 @@ import scrollLeft from 'dom-lib/scrollLeft';
 import scrollTop from 'dom-lib/scrollTop';
 import WheelHandler from 'dom-lib/WheelHandler';
 import React, { useCallback, useEffect, useRef, useState } from 'react';
+
 import type { ListenerCallback, RowDataType } from '../@types/common';
 import { BEZIER, SCROLLBAR_WIDTH, TRANSITION_DURATION } from '../constants';
 import type { ScrollbarInstance } from '../Scrollbar';
@@ -50,6 +51,7 @@ interface ScrollListenerProps {
   onTouchStart?: (event: React.TouchEvent) => void;
   onTouchMove?: (event: React.TouchEvent) => void;
   onTouchEnd?: (event: React.TouchEvent) => void;
+  handleInfiniteScroll?: (value: number) => void;
 }
 
 /**
@@ -106,7 +108,8 @@ const useScrollListener = (props: ScrollListenerProps) => {
     contentHeight,
     headerHeight,
     rtl,
-    tableKey
+    tableKey,
+    handleInfiniteScroll
   } = props;
 
   const wheelListener = useRef<ListenerCallback>(null);
@@ -186,6 +189,21 @@ const useScrollListener = (props: ScrollListenerProps) => {
 
       setScrollX(x);
       setScrollY(y);
+      console.log(
+        scrollY.current,
+        contentHeight.current,
+        nextScrollY,
+        minScrollY.current,
+        'scrolllistner'
+      );
+      if (
+        typeof handleInfiniteScroll === 'function' &&
+        deltaY !== 0 &&
+        !loading &&
+        Math.abs(y) + getTableHeight() >= contentHeight.current - 12
+      ) {
+        handleInfiniteScroll(scrollY.current);
+      }
 
       onScroll?.(Math.abs(x), Math.abs(y));
 
@@ -297,7 +315,6 @@ const useScrollListener = (props: ScrollListenerProps) => {
       if (!isTouching.current) {
         return;
       }
-      console.log('handleTouchMove');
 
       const { pageX, pageY } = event.touches[0];
       const deltaX = touchX.current - pageX;