qbs-react-grid 2.0.2 → 2.0.4

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/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,
@@ -52,7 +53,7 @@ var QbsTable = function QbsTable(_ref) {
     _ref$height = _ref.height,
     height = _ref$height === void 0 ? 630 : _ref$height,
     onExpandChange = _ref.onExpandChange,
-    wordWrap = _ref.wordWrap,
+    propsWordWrap = _ref.wordWrap,
     _ref$dataRowKey = _ref.dataRowKey,
     dataRowKey = _ref$dataRowKey === void 0 ? 'id' : _ref$dataRowKey,
     defaultExpandAllRows = _ref.defaultExpandAllRows,
@@ -106,7 +107,13 @@ 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,
+    propsViewMode = _ref.viewMode;
   var _useState = useState(false),
     loading = _useState[0],
     setLoading = _useState[1];
@@ -129,6 +136,13 @@ var QbsTable = function QbsTable(_ref) {
     setTableViewToggle = _useState5[1];
   var isMobile = useResponsiveStore();
   var tableBodyRef = useRef(null);
+  var wheelWrapperRef = useRef(null);
+  var _useState6 = useState(propsViewMode != null ? propsViewMode : 'expanded'),
+    viewMode = _useState6[0],
+    setViewMode = _useState6[1];
+  var _useState7 = useState(propsWordWrap != null ? propsWordWrap : false),
+    wordWrap = _useState7[0],
+    setWordWrap = _useState7[1];
   var handleSortColumn = useCallback(function (sortColumn, sortType) {
     setLoading(true);
     setTimeout(function () {
@@ -198,6 +212,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, {
@@ -217,13 +232,21 @@ var QbsTable = function QbsTable(_ref) {
       });
     }
   }, [wordWrap]);
+  useEffect(function () {
+    if (viewMode === 'expanded') {
+      setWordWrap('break-word');
+    } else {
+      setWordWrap(false);
+    }
+    REFRESH_KEY = REFRESH_KEY + 1;
+  }, [viewMode]);
   var onReorder = useCallback(function (columns) {
     setColumns(columns);
   }, []);
 
   // useEffect(() => {
   // }, [columns]);
-
+  console.log(viewMode);
   var handleClear = function handleClear(_ref2) {
     setCheckedKeys([]);
     handleChecked([]);
@@ -544,6 +567,19 @@ var QbsTable = function QbsTable(_ref) {
   },
   // ✅ 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 +587,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,
@@ -672,6 +712,8 @@ var QbsTable = function QbsTable(_ref) {
     onReorder: onReorder,
     isOpen: isOpen,
     tableHeight: height,
+    viewMode: viewMode,
+    setViewMode: setViewMode,
     setIsOpen: setIsOpen,
     handleResetColumns: handleResetColumns,
     handleColumnToggle: handleColumnToggle
@@ -688,6 +730,8 @@ var QbsTable = function QbsTable(_ref) {
     onToggle: handleToggle,
     tableHeight: height,
     onReorder: onReorder,
+    viewMode: viewMode,
+    setViewMode: setViewMode,
     isOpen: isOpen,
     setIsOpen: setIsOpen,
     handleResetColumns: handleResetColumns,

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,11 @@ export interface QbsTableProps {
     handleTableCardView?: (data: any) => React.ReactNode;
     isCustomTableCardView?: boolean;
     handleCustomCardLoader?: () => React.ReactNode;
+    hasMoreData?: boolean;
+    loadMoreData?: () => void;
+    infiniteScroll?: boolean;
+    infiniteLoading?: boolean;
+    viewMode?: string;
 }
 export interface QbsTableToolbarProps {
     title?: string;

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

@@ -9,6 +9,8 @@ interface ColumnToggleProps {
     handleColumnToggle?: (columns: QbsColumnProps[]) => void;
     handleResetColumns?: () => void;
     tableHeight?: number;
+    viewMode?: string;
+    setViewMode?: (value: string) => void;
 }
 declare const ColumnToggle: React.FC<ColumnToggleProps>;
 export default ColumnToggle;

package/es/qbsTable/utilities/ColumShowHide.js

@@ -9,7 +9,9 @@ var ColumnToggle = function ColumnToggle(_ref) {
     handleResetColumns = _ref.handleResetColumns,
     handleColumnToggle = _ref.handleColumnToggle,
     _ref$tableHeight = _ref.tableHeight,
-    tableHeight = _ref$tableHeight === void 0 ? 450 : _ref$tableHeight;
+    tableHeight = _ref$tableHeight === void 0 ? 450 : _ref$tableHeight,
+    viewMode = _ref.viewMode,
+    setViewMode = _ref.setViewMode;
   var _useState = useState(null),
     draggedItem = _useState[0],
     setDraggedItem = _useState[1];
@@ -215,6 +217,26 @@ var ColumnToggle = function ColumnToggle(_ref) {
     onClick: function onClick() {
       return handleColToggle();
     }
-  }, "Save"))))));
+  }, "Save"))), /*#__PURE__*/React.createElement("div", {
+    className: "qbs-table-popup-item"
+  }, /*#__PURE__*/React.createElement("label", {
+    className: "flex items-center gap-2"
+  }, /*#__PURE__*/React.createElement("input", {
+    type: "radio",
+    value: "compact",
+    checked: viewMode === 'compact',
+    onChange: function onChange() {
+      return setViewMode === null || setViewMode === void 0 ? void 0 : setViewMode('compact');
+    }
+  }), "Compact View"), /*#__PURE__*/React.createElement("label", {
+    className: "flex items-center gap-2"
+  }, /*#__PURE__*/React.createElement("input", {
+    type: "radio",
+    value: "expanded",
+    checked: viewMode === 'expanded',
+    onChange: function onChange() {
+      return setViewMode === null || setViewMode === void 0 ? void 0 : setViewMode('expanded');
+    }
+  }), "Default View")))));
 };
 export default ColumnToggle;

package/es/utils/useCellDescriptor.js

@@ -151,7 +151,6 @@ var useCellDescriptor = function useCellDescriptor(props) {
       if (treeCol) {
         hasCustomTreeCol = true;
       }
-      console.log(columns);
       if ((columnChildren === null || columnChildren === void 0 ? void 0 : columnChildren.length) !== 2) {
         throw new Error("Component <HeaderCell> and <Cell> is required, column index: " + index + " ");
       }

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/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,
@@ -58,7 +59,7 @@ var QbsTable = function QbsTable(_ref) {
     _ref$height = _ref.height,
     height = _ref$height === void 0 ? 630 : _ref$height,
     onExpandChange = _ref.onExpandChange,
-    wordWrap = _ref.wordWrap,
+    propsWordWrap = _ref.wordWrap,
     _ref$dataRowKey = _ref.dataRowKey,
     dataRowKey = _ref$dataRowKey === void 0 ? 'id' : _ref$dataRowKey,
     defaultExpandAllRows = _ref.defaultExpandAllRows,
@@ -112,7 +113,13 @@ 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,
+    propsViewMode = _ref.viewMode;
   var _useState = (0, _react.useState)(false),
     loading = _useState[0],
     setLoading = _useState[1];
@@ -135,6 +142,13 @@ 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 _useState6 = (0, _react.useState)(propsViewMode != null ? propsViewMode : 'expanded'),
+    viewMode = _useState6[0],
+    setViewMode = _useState6[1];
+  var _useState7 = (0, _react.useState)(propsWordWrap != null ? propsWordWrap : false),
+    wordWrap = _useState7[0],
+    setWordWrap = _useState7[1];
   var handleSortColumn = (0, _react.useCallback)(function (sortColumn, sortType) {
     setLoading(true);
     setTimeout(function () {
@@ -204,6 +218,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, {
@@ -223,13 +238,21 @@ var QbsTable = function QbsTable(_ref) {
       });
     }
   }, [wordWrap]);
+  (0, _react.useEffect)(function () {
+    if (viewMode === 'expanded') {
+      setWordWrap('break-word');
+    } else {
+      setWordWrap(false);
+    }
+    REFRESH_KEY = REFRESH_KEY + 1;
+  }, [viewMode]);
   var onReorder = (0, _react.useCallback)(function (columns) {
     setColumns(columns);
   }, []);
 
   // useEffect(() => {
   // }, [columns]);
-
+  console.log(viewMode);
   var handleClear = function handleClear(_ref2) {
     setCheckedKeys([]);
     handleChecked([]);
@@ -550,6 +573,19 @@ var QbsTable = function QbsTable(_ref) {
   },
   // ✅ 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 +593,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,
@@ -678,6 +718,8 @@ var QbsTable = function QbsTable(_ref) {
     onReorder: onReorder,
     isOpen: isOpen,
     tableHeight: height,
+    viewMode: viewMode,
+    setViewMode: setViewMode,
     setIsOpen: setIsOpen,
     handleResetColumns: handleResetColumns,
     handleColumnToggle: handleColumnToggle
@@ -694,6 +736,8 @@ var QbsTable = function QbsTable(_ref) {
     onToggle: handleToggle,
     tableHeight: height,
     onReorder: onReorder,
+    viewMode: viewMode,
+    setViewMode: setViewMode,
     isOpen: isOpen,
     setIsOpen: setIsOpen,
     handleResetColumns: handleResetColumns,

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,11 @@ export interface QbsTableProps {
     handleTableCardView?: (data: any) => React.ReactNode;
     isCustomTableCardView?: boolean;
     handleCustomCardLoader?: () => React.ReactNode;
+    hasMoreData?: boolean;
+    loadMoreData?: () => void;
+    infiniteScroll?: boolean;
+    infiniteLoading?: boolean;
+    viewMode?: string;
 }
 export interface QbsTableToolbarProps {
     title?: string;

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

@@ -9,6 +9,8 @@ interface ColumnToggleProps {
     handleColumnToggle?: (columns: QbsColumnProps[]) => void;
     handleResetColumns?: () => void;
     tableHeight?: number;
+    viewMode?: string;
+    setViewMode?: (value: string) => void;
 }
 declare const ColumnToggle: React.FC<ColumnToggleProps>;
 export default ColumnToggle;

package/lib/qbsTable/utilities/ColumShowHide.js

@@ -15,7 +15,9 @@ var ColumnToggle = function ColumnToggle(_ref) {
     handleResetColumns = _ref.handleResetColumns,
     handleColumnToggle = _ref.handleColumnToggle,
     _ref$tableHeight = _ref.tableHeight,
-    tableHeight = _ref$tableHeight === void 0 ? 450 : _ref$tableHeight;
+    tableHeight = _ref$tableHeight === void 0 ? 450 : _ref$tableHeight,
+    viewMode = _ref.viewMode,
+    setViewMode = _ref.setViewMode;
   var _useState = (0, _react.useState)(null),
     draggedItem = _useState[0],
     setDraggedItem = _useState[1];
@@ -221,7 +223,27 @@ var ColumnToggle = function ColumnToggle(_ref) {
     onClick: function onClick() {
       return handleColToggle();
     }
-  }, "Save"))))));
+  }, "Save"))), /*#__PURE__*/_react["default"].createElement("div", {
+    className: "qbs-table-popup-item"
+  }, /*#__PURE__*/_react["default"].createElement("label", {
+    className: "flex items-center gap-2"
+  }, /*#__PURE__*/_react["default"].createElement("input", {
+    type: "radio",
+    value: "compact",
+    checked: viewMode === 'compact',
+    onChange: function onChange() {
+      return setViewMode === null || setViewMode === void 0 ? void 0 : setViewMode('compact');
+    }
+  }), "Compact View"), /*#__PURE__*/_react["default"].createElement("label", {
+    className: "flex items-center gap-2"
+  }, /*#__PURE__*/_react["default"].createElement("input", {
+    type: "radio",
+    value: "expanded",
+    checked: viewMode === 'expanded',
+    onChange: function onChange() {
+      return setViewMode === null || setViewMode === void 0 ? void 0 : setViewMode('expanded');
+    }
+  }), "Default View")))));
 };
 var _default = ColumnToggle;
 exports["default"] = _default;

package/lib/utils/useCellDescriptor.js

@@ -158,7 +158,6 @@ var useCellDescriptor = function useCellDescriptor(props) {
       if (treeCol) {
         hasCustomTreeCol = true;
       }
-      console.log(columns);
       if ((columnChildren === null || columnChildren === void 0 ? void 0 : columnChildren.length) !== 2) {
         throw new Error("Component <HeaderCell> and <Cell> is required, column index: " + index + " ");
       }

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.2",
+  "version": "2.0.4",
   "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/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,
@@ -51,7 +52,7 @@ const QbsTable: React.FC<QbsTableProps> = ({
   minHeight,
   height = 630,
   onExpandChange,
-  wordWrap,
+  wordWrap: propsWordWrap,
   dataRowKey = 'id',
   defaultExpandAllRows,
   handleRowExpanded,
@@ -91,7 +92,12 @@ const QbsTable: React.FC<QbsTableProps> = ({
   childDetailHeading = '',
   isCustomTableCardView = false,
   handleTableCardView,
-  handleCustomCardLoader
+  handleCustomCardLoader,
+  hasMoreData,
+  loadMoreData,
+  infiniteLoading,
+  infiniteScroll = false,
+  viewMode: propsViewMode
 }) => {
   const [loading, setLoading] = useState(false);
   const [columns, setColumns] = useState(propColumn);
@@ -102,6 +108,9 @@ const QbsTable: React.FC<QbsTableProps> = ({
   const [tableViewToggle, setTableViewToggle] = useState(tableView);
   const isMobile = useResponsiveStore();
   const tableBodyRef = useRef<HTMLDivElement>(null);
+  const wheelWrapperRef = useRef<HTMLDivElement>(null);
+  const [viewMode, setViewMode] = useState(propsViewMode ?? 'expanded');
+  const [wordWrap, setWordWrap] = useState(propsWordWrap ?? false);
   const handleSortColumn = useCallback(
     (sortColumn: any, sortType: any) => {
       setLoading(true);
@@ -188,6 +197,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
@@ -204,14 +214,21 @@ const QbsTable: React.FC<QbsTableProps> = ({
       );
     }
   }, [wordWrap]);
-
+  useEffect(() => {
+    if (viewMode === 'expanded') {
+      setWordWrap('break-word');
+    } else {
+      setWordWrap(false);
+    }
+    REFRESH_KEY = REFRESH_KEY + 1;
+  }, [viewMode]);
   const onReorder = useCallback((columns: QbsColumnProps[]) => {
     setColumns(columns);
   }, []);
 
   // useEffect(() => {
   // }, [columns]);
-
+  console.log(viewMode);
   const handleClear = ([]) => {
     setCheckedKeys([]);
     handleChecked([]);
@@ -564,6 +581,20 @@ 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}>
       {toolbar && <ToolBar {...toolbarProps} />}
@@ -571,17 +602,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}
@@ -707,6 +742,8 @@ const QbsTable: React.FC<QbsTableProps> = ({
                       onReorder={onReorder}
                       isOpen={isOpen}
                       tableHeight={height}
+                      viewMode={viewMode}
+                      setViewMode={setViewMode}
                       setIsOpen={setIsOpen}
                       handleResetColumns={handleResetColumns}
                       handleColumnToggle={handleColumnToggle}
@@ -731,6 +768,8 @@ const QbsTable: React.FC<QbsTableProps> = ({
                       onToggle={handleToggle}
                       tableHeight={height}
                       onReorder={onReorder}
+                      viewMode={viewMode}
+                      setViewMode={setViewMode}
                       isOpen={isOpen}
                       setIsOpen={setIsOpen}
                       handleResetColumns={handleResetColumns}

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,12 @@ export interface QbsTableProps {
   handleTableCardView?: (data: any) => React.ReactNode;
   isCustomTableCardView?: boolean;
   handleCustomCardLoader?: () => React.ReactNode;
+  hasMoreData?: boolean
+  loadMoreData?: ()=> void
+  infiniteScroll?: boolean
+  infiniteLoading?:boolean
+  viewMode?:string
+
 }
 
 export interface QbsTableToolbarProps {

package/src/qbsTable/utilities/ColumShowHide.tsx

@@ -12,6 +12,8 @@ interface ColumnToggleProps {
   handleColumnToggle?: (columns: QbsColumnProps[]) => void;
   handleResetColumns?: () => void;
   tableHeight?: number;
+  viewMode?: string;
+  setViewMode?: (value: string) => void;
 }
 
 const ColumnToggle: React.FC<ColumnToggleProps> = ({
@@ -22,7 +24,9 @@ const ColumnToggle: React.FC<ColumnToggleProps> = ({
   setIsOpen,
   handleResetColumns,
   handleColumnToggle,
-  tableHeight = 450
+  tableHeight = 450,
+  viewMode,
+  setViewMode
 }) => {
   const [draggedItem, setDraggedItem] = useState<number | null>(null);
   const popupRef = useRef<HTMLDivElement | null>(null);
@@ -239,6 +243,27 @@ const ColumnToggle: React.FC<ColumnToggleProps> = ({
                 </div>
               </>
             )}
+            <div className="qbs-table-popup-item">
+              <label className="flex items-center gap-2">
+                <input
+                  type="radio"
+                  value="compact"
+                  checked={viewMode === 'compact'}
+                  onChange={() => setViewMode?.('compact')}
+                />
+                Compact View
+              </label>
+
+              <label className="flex items-center gap-2">
+                <input
+                  type="radio"
+                  value="expanded"
+                  checked={viewMode === 'expanded'}
+                  onChange={() => setViewMode?.('expanded')}
+                />
+                Default View
+              </label>
+            </div>
           </div>
         </div>
       )}

package/src/utils/useCellDescriptor.ts

@@ -205,7 +205,6 @@ const useCellDescriptor = <Row extends RowDataType>(
       if (treeCol) {
         hasCustomTreeCol = true;
       }
-      console.log(columns);
 
       if (columnChildren?.length !== 2) {
         throw new Error(`Component <HeaderCell> and <Cell> is required, column index: ${index} `);

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;