qbs-react-grid 2.2.16 → 2.2.18

package/es/Pagination.js

@@ -1,5 +1,6 @@
 import React, { useEffect, useState } from 'react';
 import CustomSelect from './customSelect';
+import { mergeLabels } from './qbsTable/labels';
 import { getRowDisplayRange } from './qbsTable/utilities/tablecalc';
 
 // Import the custom select component
@@ -35,7 +36,10 @@ var PageIndex = function PageIndex(_ref) {
   return /*#__PURE__*/React.createElement(React.Fragment, null, renderPageNumbers());
 };
 var Pagination = function Pagination(_ref2) {
-  var paginationProps = _ref2.paginationProps;
+  var paginationProps = _ref2.paginationProps,
+    labelsProp = _ref2.labels,
+    dataTheme = _ref2.dataTheme;
+  var labels = mergeLabels(labelsProp);
   var _paginationProps$drop = paginationProps.dropOptions,
     dropOptions = _paginationProps$drop === void 0 ? [10, 20, 50, 100, 200] : _paginationProps$drop,
     _paginationProps$curr = paginationProps.currentPage,
@@ -76,13 +80,14 @@ var Pagination = function Pagination(_ref2) {
   };
   return /*#__PURE__*/React.createElement("div", {
     className: "qbs-table-custom-pagination",
+    "data-theme": dataTheme,
     style: {
       display: 'flex',
       justifyContent: 'space-between'
     }
   }, /*#__PURE__*/React.createElement("div", {
     className: "rows-count"
-  }, getRowDisplayRange(total, rowsPerPageState, currentPage)), /*#__PURE__*/React.createElement("div", {
+  }, getRowDisplayRange(total, rowsPerPageState, currentPage, labels.showingRange)), /*#__PURE__*/React.createElement("div", {
     className: "qbs-table-pagination-right-block"
   }, /*#__PURE__*/React.createElement("button", {
     className: "qbs-table-icon-container",
@@ -161,7 +166,7 @@ var Pagination = function Pagination(_ref2) {
     className: "qbs-table-pagination-flexBox"
   }, /*#__PURE__*/React.createElement("span", {
     className: "qbs-table-pagination-text"
-  }, "Items per page"), /*#__PURE__*/React.createElement(CustomSelect, {
+  }, labels.itemsPerPage), /*#__PURE__*/React.createElement(CustomSelect, {
     options: dropData,
     selectedValue: rowsPerPageState,
     onChange: handleRowsPerPage

package/es/Table.d.ts

@@ -99,6 +99,7 @@ export interface TableProps<Row, Key> extends Omit<StandardProps, 'onScroll'> {
     /** 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 +124,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 +134,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", "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", "tableBodyHeight", "columns", "tableBodyRef", "tableKey", "handleInfiniteScroll", "infiniteLoading", "wheelWrapperRef"],
   _excluded2 = ["depth", "rowIndex"],
   _excluded3 = ["cellHeight"];
 import { getTranslateDOMPositionXY } from 'dom-lib/translateDOMPositionXY';
@@ -70,10 +70,6 @@ var Table = /*#__PURE__*/React.forwardRef(function (props, ref) {
     } : _props$locale,
     _props$showHeader = props.showHeader,
     showHeader = _props$showHeader === void 0 ? true : _props$showHeader,
-    _props$pagination = props.pagination,
-    pagination = _props$pagination === void 0 ? true : _props$pagination,
-    _props$paginationProp = props.paginationProps,
-    paginationProps = _props$paginationProp === void 0 ? {} : _props$paginationProp,
     sortColumn = props.sortColumn,
     _props$rowHeight = props.rowHeight,
     rowHeight = _props$rowHeight === void 0 ? ROW_HEIGHT : _props$rowHeight,
@@ -111,18 +107,19 @@ var Table = /*#__PURE__*/React.forwardRef(function (props, ref) {
     onTouchStart = props.onTouchStart,
     onTouchMove = props.onTouchMove,
     onTouchEnd = props.onTouchEnd,
-    dataTheme = props.dataTheme,
     tableBodyHeight = props.tableBodyHeight,
     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 +178,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 +289,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 +614,9 @@ var Table = /*#__PURE__*/React.forwardRef(function (props, ref) {
           width: tableWidth.current
         },
         length: tableWidth.current,
-        onScroll: onScrollHorizontal,
+        onScroll: function onScroll(delta) {
+          onScrollHorizontal(delta);
+        },
         scrollLength: contentWidth.current,
         ref: scrollbarXRef
       }));
@@ -781,7 +780,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 +793,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/index.d.ts

@@ -13,5 +13,5 @@ export type { HeaderCellProps } from './HeaderCell';
 export type { ColumnGroupProps } from './ColumnGroup';
 export type { QbsTableProps } from './qbsTable/commontypes';
 export type { QbsTableLabels } from './qbsTable/labels';
-export { mergeQbsTableLabels, defaultQbsTableLabels, formatSelectedItems, } from './qbsTable/labels';
+export { mergeQbsTableLabels, mergeLabels, defaultQbsTableLabels, DEFAULT_QBS_TABLE_LABELS, formatSelectedItems, } from './qbsTable/labels';
 export type { StandardProps, SortType, RowDataType, RowKeyType, TableSizeChangeEventName } from './@types/common';

package/es/index.js

@@ -5,4 +5,4 @@ export { default as Cell } from './Cell';
 export { default as HeaderCell } from './HeaderCell';
 export { default as ColumnGroup } from './ColumnGroup';
 export { default as Pagination } from './Pagination';
-export { mergeQbsTableLabels, defaultQbsTableLabels, formatSelectedItems } from './qbsTable/labels';
+export { mergeQbsTableLabels, mergeLabels, defaultQbsTableLabels, DEFAULT_QBS_TABLE_LABELS, formatSelectedItems } from './qbsTable/labels';

package/es/less/pagination.less

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

package/es/less/qbs-table.less

@@ -644,8 +644,7 @@
 }
 
 .qbs-table-column-popup--rtl .qbs-table-container .qbs-table-checkbox {
-  flex: 0 0 28px;
-  min-width: 28px;
+  margin-left: 12px;
 }
 
 .qbs-table-reset-link {

package/es/qbsTable/QbsTable.js

@@ -6,6 +6,7 @@ import ColumnGroup from '../ColumnGroup';
 import HeaderCell from '../HeaderCell';
 import Pagination from '../Pagination';
 import Table from '../Table';
+import isRTL from '../utils/isRTL';
 import useResponsiveStore from '../utils/useResponsiveStore';
 import { mergeQbsTableLabels } from './labels';
 import { ActionCell, CheckCell, CustomRowStatus, CustomTableCell, ExpandCell } from './CustomTableCell';
@@ -23,6 +24,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,
@@ -53,7 +55,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,
@@ -65,6 +67,7 @@ var QbsTable = function QbsTable(_ref) {
     _ref$actionProps = _ref.actionProps,
     actionProps = _ref$actionProps === void 0 ? [] : _ref$actionProps,
     theme = _ref.theme,
+    rtlProp = _ref.rtl,
     handleMenuActions = _ref.handleMenuActions,
     onRowClick = _ref.onRowClick,
     expandedRowKeys = _ref.expandedRowKeys,
@@ -108,10 +111,11 @@ var QbsTable = function QbsTable(_ref) {
     isCustomTableCardView = _ref$isCustomTableCar === void 0 ? false : _ref$isCustomTableCar,
     handleTableCardView = _ref.handleTableCardView,
     handleCustomCardLoader = _ref.handleCustomCardLoader,
-    dropType = _ref.dropType,
-    labelsProp = _ref.labels,
-    _ref$rtl = _ref.rtl,
-    rtl = _ref$rtl === void 0 ? false : _ref$rtl,
+    hasMoreData = _ref.hasMoreData,
+    loadMoreData = _ref.loadMoreData,
+    infiniteLoading = _ref.infiniteLoading,
+    _ref$infiniteScroll = _ref.infiniteScroll,
+    infiniteScroll = _ref$infiniteScroll === void 0 ? false : _ref$infiniteScroll,
     _ref$rowViewToggle = _ref.rowViewToggle,
     rowViewToggle = _ref$rowViewToggle === void 0 ? false : _ref$rowViewToggle,
     _ref$defaultRowView = _ref.defaultRowView,
@@ -120,43 +124,50 @@ var QbsTable = function QbsTable(_ref) {
     fullWidthView = _ref$fullWidthView === void 0 ? false : _ref$fullWidthView,
     setTableFullView = _ref.setTableFullView,
     setRowViewToggle = _ref.setRowViewToggle,
-    _ref$isFullScreen = _ref.isFullScreen,
-    isFullScreen = _ref$isFullScreen === void 0 ? false : _ref$isFullScreen,
+    _ref$dropType = _ref.dropType,
+    dropType = _ref$dropType === void 0 ? 'horizondal' : _ref$dropType,
     rowHeight = _ref.rowHeight,
+    isFullScreen = _ref.isFullScreen,
     _ref$showHeader = _ref.showHeader,
-    showHeader = _ref$showHeader === void 0 ? true : _ref$showHeader;
+    showHeader = _ref$showHeader === void 0 ? true : _ref$showHeader,
+    labelsProp = _ref.labels;
   var labels = useMemo(function () {
     return mergeQbsTableLabels(labelsProp);
   }, [labelsProp]);
-  var effectiveWordWrap = useMemo(function () {
-    if (!rowViewToggle) return wordWrap;
-    return defaultRowView ? false : 'break-word';
-  }, [rowViewToggle, defaultRowView, wordWrap]);
-  var _useState = useState(false),
-    loading = _useState[0],
-    setLoading = _useState[1];
-  var _useState2 = useState(propColumn),
-    columns = _useState2[0],
-    setColumns = _useState2[1];
-  var _useState3 = useState([]),
-    checkedKeys = _useState3[0],
-    setCheckedKeys = _useState3[1];
+  var _useState = useState(0),
+    rowViewRefreshKey = _useState[0],
+    setRowViewRefreshKey = _useState[1];
+  var _useState2 = useState(false),
+    loading = _useState2[0],
+    setLoading = _useState2[1];
+  var _useState3 = useState(propColumn),
+    columns = _useState3[0],
+    setColumns = _useState3[1];
+  var _useState4 = useState([]),
+    checkedKeys = _useState4[0],
+    setCheckedKeys = _useState4[1];
   var dataTheme = useMemo(function () {
-    var _localStorage$getItem;
-    return (_localStorage$getItem = localStorage.getItem('theme')) != null ? _localStorage$getItem : theme;
+    var _ref2;
+    return (_ref2 = theme != null ? theme : typeof localStorage !== 'undefined' ? localStorage.getItem('theme') : null) != null ? _ref2 : 'light';
   }, [theme]);
-  var _useState4 = useState(false),
-    isOpen = _useState4[0],
-    setIsOpen = _useState4[1];
+  var rtl = rtlProp != null ? rtlProp : isRTL();
+  var _useState5 = useState(false),
+    isOpen = _useState5[0],
+    setIsOpen = _useState5[1];
   var prevColumns = useRef(null);
-  var _useState5 = useState(tableView),
-    tableViewToggle = _useState5[0],
-    setTableViewToggle = _useState5[1];
+  var _useState6 = useState(tableView),
+    tableViewToggle = _useState6[0],
+    setTableViewToggle = _useState6[1];
   var isMobile = useResponsiveStore();
   var tableBodyRef = useRef(null);
-  var _useState6 = useState(0),
-    rowViewRefreshKey = _useState6[0],
-    setRowViewRefreshKey = _useState6[1];
+  var wheelWrapperRef = useRef(null);
+  var _useState7 = useState(propsWordWrap != null ? propsWordWrap : false),
+    wordWrap = _useState7[0],
+    setWordWrap = _useState7[1];
+  var effectiveWordWrap = useMemo(function () {
+    if (!rowViewToggle) return wordWrap;
+    return defaultRowView ? false : 'break-word';
+  }, [rowViewToggle, defaultRowView, wordWrap]);
   useEffect(function () {
     if (rowViewToggle) {
       setRowViewRefreshKey(function (key) {
@@ -203,12 +214,6 @@ var QbsTable = function QbsTable(_ref) {
       handleChecked(updatedKeys);
     }
   }, [checkedKeys]);
-  var rowKeyField = dataRowKey != null ? dataRowKey : 'id';
-  var getRowClassName = useCallback(function (rowData) {
-    if (!selection) return '';
-    var key = rowData === null || rowData === void 0 ? void 0 : rowData[rowKeyField];
-    return key !== undefined && checkedKeys !== null && checkedKeys !== void 0 && checkedKeys.includes(key) ? 'qbs-table-row-checked' : '';
-  }, [selection, checkedKeys, rowKeyField]);
   var handleToggle = useCallback(function (columnName) {
     var lastVisibleColumn = null;
     var visibleCount = 0;
@@ -239,6 +244,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, {
@@ -258,14 +264,21 @@ var QbsTable = function QbsTable(_ref) {
       });
     }
   }, [wordWrap]);
+  useEffect(function () {
+    if (!defaultRowView) {
+      setWordWrap('break-word');
+    } else {
+      setWordWrap(false);
+    }
+    REFRESH_KEY = REFRESH_KEY + 1;
+  }, [defaultRowView]);
   var onReorder = useCallback(function (columns) {
     setColumns(columns);
   }, []);
 
   // useEffect(() => {
   // }, [columns]);
-
-  var handleClear = function handleClear(_ref2) {
+  var handleClear = function handleClear(_ref3) {
     setCheckedKeys([]);
     handleChecked([]);
   };
@@ -304,10 +317,16 @@ var QbsTable = function QbsTable(_ref) {
     labels: labels,
     rtl: rtl
   };
+  useEffect(function () {
+    if (!dataTheme || typeof document === 'undefined') return;
+    document.body.setAttribute('data-theme', dataTheme === 'dark' ? 'dark' : 'light');
+    document.documentElement.dataset.theme = dataTheme;
+  }, [dataTheme]);
   var themeToggle = useMemo(function () {
-    return document.getElementById('themeToggle');
+    return typeof document !== 'undefined' ? document.getElementById('themeToggle') : null;
   }, []);
   useEffect(function () {
+    if (theme || typeof document === 'undefined') return;
     var handleThemeToggle = function handleThemeToggle() {
       if (themeToggle !== null && themeToggle !== void 0 && themeToggle.checked) {
         document.body.setAttribute('data-theme', 'dark');
@@ -329,9 +348,8 @@ var QbsTable = function QbsTable(_ref) {
       themeToggle === null || themeToggle === void 0 ? void 0 : themeToggle.removeEventListener('change', handleThemeToggle);
       document.removeEventListener('DOMContentLoaded', handleDOMContentLoaded);
     };
-  }, [themeToggle]);
+  }, [theme, themeToggle]);
   var handleExpanded = useCallback(function (rowData) {
-    console.log(rowData);
     var keyValue = dataRowKey;
     var key = rowData[keyValue];
     var nextExpandedRowKeys = new Set(expandedRowKeys);
@@ -506,26 +524,26 @@ var QbsTable = function QbsTable(_ref) {
   //   [columns, dataTheme]
   // );
   var columnsRendered = useMemo(function () {
-    return (columns != null ? columns : []).map(function (_ref3) {
-      var title = _ref3.title,
-        field = _ref3.field,
-        resizable = _ref3.resizable,
-        sortable = _ref3.sortable,
-        colWidth = _ref3.colWidth,
-        align = _ref3.align,
-        grouped = _ref3.grouped,
-        groupHeader = _ref3.groupHeader,
-        fixed = _ref3.fixed,
-        children = _ref3.children,
-        customCell = _ref3.customCell,
-        renderCell = _ref3.renderCell,
-        isVisible = _ref3.isVisible,
-        link = _ref3.link,
-        getPath = _ref3.getPath,
-        rowClick = _ref3.rowClick,
-        sortKey = _ref3.sortKey,
-        type = _ref3.type,
-        hideLink = _ref3.hideLink;
+    return (columns != null ? columns : []).map(function (_ref4) {
+      var title = _ref4.title,
+        field = _ref4.field,
+        resizable = _ref4.resizable,
+        sortable = _ref4.sortable,
+        colWidth = _ref4.colWidth,
+        align = _ref4.align,
+        grouped = _ref4.grouped,
+        groupHeader = _ref4.groupHeader,
+        fixed = _ref4.fixed,
+        children = _ref4.children,
+        customCell = _ref4.customCell,
+        renderCell = _ref4.renderCell,
+        isVisible = _ref4.isVisible,
+        link = _ref4.link,
+        getPath = _ref4.getPath,
+        rowClick = _ref4.rowClick,
+        sortKey = _ref4.sortKey,
+        type = _ref4.type,
+        hideLink = _ref4.hideLink;
       return isVisible ? grouped ? /*#__PURE__*/React.createElement(ColumnGroup, {
         header: groupHeader,
         fixed: fixed,
@@ -593,41 +611,57 @@ 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
+    "data-theme": dataTheme,
+    dir: rtl ? 'rtl' : 'ltr'
   }, toolbar && /*#__PURE__*/React.createElement(ToolBar, toolbarProps), /*#__PURE__*/React.createElement("div", {
     className: "qbs-table-border-wrap"
   }, tableViewToggle ? /*#__PURE__*/React.createElement(Table, {
     height: autoHeight ? undefined : height,
     key: tableKey + "-" + rowViewRefreshKey,
     tableKey: tableKey,
-    rtl: rtl,
     data: data,
+    rtl: rtl,
     tableBodyRef: tableBodyRef,
     dataTheme: dataTheme,
     wordWrap: effectiveWordWrap,
+    wheelWrapperRef: wheelWrapperRef,
+    rowHeight: rowHeight,
     autoHeight: autoHeight,
+    handleInfiniteScroll: handleInfiniteScroll,
     sortColumn: sortColumn,
     style: {
       position: 'relative'
     },
     sortType: sortType,
     onSortColumn: handleSortColumn,
+    infiniteLoading: infiniteLoading,
     onRowClick: onRowClick,
     tableBodyHeight: tableBodyHeight,
     cellBordered: cellBordered,
     bordered: bordered,
     renderEmpty: function renderEmpty(info) {
       return _renderEmpty ? _renderEmpty(info) : /*#__PURE__*/React.createElement(NoData, {
-        title: emptyTitle != null ? emptyTitle : 'No Data Found',
+        title: emptyTitle != null ? emptyTitle : labels.noDataFound,
         subtitle: emptySubTitle
       });
     },
     columns: columns,
     minHeight: minHeight,
     headerHeight: headerHeight,
-    rowHeight: rowHeight,
     rowExpandedHeight: rowExpandedHeight,
     loading: isLoading != null ? isLoading : loading,
     showHeader: showHeader,
@@ -635,7 +669,6 @@ var QbsTable = function QbsTable(_ref) {
     expandedRowKeys: expandedRowKeys,
     onExpandChange: onExpandChange,
     rowKey: dataRowKey != null ? dataRowKey : 'id',
-    rowClassName: selection ? getRowClassName : undefined,
     defaultExpandAllRows: defaultExpandAllRows,
     shouldUpdateScroll: shouldUpdateScroll,
     renderRowExpanded: function renderRowExpanded(rowData) {
@@ -750,11 +783,12 @@ var QbsTable = function QbsTable(_ref) {
     rtl: rtl
   })), /*#__PURE__*/React.createElement(ActionCell, {
     tableBodyRef: tableBodyRef,
+    dropType: dropType,
+    wheelWrapperRef: wheelWrapperRef,
     actionProps: actionProps,
     className: classes.cellClass + " " + classes.actionCellClass,
     handleMenuActions: handleMenuActions,
-    dataTheme: dataTheme,
-    dropType: dropType
+    dataTheme: dataTheme
   }))) : /*#__PURE__*/React.createElement("div", {
     className: isCustomTableCardView && ((data === null || data === void 0 ? void 0 : data.length) === 0 || !data) && !isLoading ? 'qbs-card-empty-wrapper' : isCustomTableCardView ? 'qbs-card-wrapper' : ' p-2',
     style: {
@@ -765,7 +799,7 @@ var QbsTable = function QbsTable(_ref) {
   }, ((data === null || data === void 0 ? void 0 : data.length) === 0 || !data) && !isLoading && /*#__PURE__*/React.createElement("div", {
     className: "flex flex-col gap-2 p-2 mt-6 card-empty-container"
   }, /*#__PURE__*/React.createElement(NoData, {
-    title: emptyTitle != null ? emptyTitle : 'No Data Found',
+    title: emptyTitle != null ? emptyTitle : labels.noDataFound,
     subtitle: emptySubTitle
   })), isLoading ? handleCustomCardLoader ? /*#__PURE__*/React.createElement(React.Fragment, null, handleCustomCardLoader()) : /*#__PURE__*/React.createElement("div", {
     className: "flex flex-col gap-2 p-2"
@@ -780,10 +814,13 @@ var QbsTable = function QbsTable(_ref) {
       childDetailHeading: childDetailHeading,
       columns: columns,
       tableBodyRef: tableBodyRef,
-      actionProps: actionProps
+      actionProps: actionProps,
+      labels: labels
     }));
   })), /*#__PURE__*/React.createElement("div", null, pagination && (data === null || data === void 0 ? void 0 : data.length) > 0 && /*#__PURE__*/React.createElement(Pagination, {
-    paginationProps: paginationProps
+    paginationProps: paginationProps,
+    labels: labels,
+    dataTheme: dataTheme
   }))));
 };
 export default QbsTable;

package/es/qbsTable/TableCardList.js

@@ -134,6 +134,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 () {
@@ -453,6 +454,7 @@ var QbsTable = function QbsTable(_ref) {
     rtl: rtl,
     data: data,
     tableBodyRef: tableBodyRef,
+    wheelWrapperRef: wheelWrapperRef,
     dataTheme: dataTheme,
     wordWrap: effectiveWordWrap,
     autoHeight: autoHeight,

package/es/qbsTable/Toolbar.js

@@ -211,18 +211,21 @@ var ToolBar = function ToolBar(_ref) {
       return onSelect === null || onSelect === void 0 ? void 0 : onSelect([]);
     }
   }, labels.clear), selectedRowActions === null || selectedRowActions === void 0 ? void 0 : selectedRowActions.map(function (actions, index) {
+    var _actions$buttonClassN;
     return /*#__PURE__*/React.createElement(React.Fragment, {
       key: index.toString()
     }, handleHide(actions) && /*#__PURE__*/React.createElement("button", {
       type: "button",
-      className: "btn",
+      className: "btn " + ((_actions$buttonClassN = actions === null || actions === void 0 ? void 0 : actions.buttonClassName) != null ? _actions$buttonClassN : ''),
       disabled: actions.disabled,
       onClick: function onClick() {
         return actions === null || actions === void 0 ? void 0 : actions.action(checkedKeys);
       }
-    }, actions.actionTitle));
+    }, (actions === null || actions === void 0 ? void 0 : actions.icon) && /*#__PURE__*/React.createElement("span", {
+      className: "mr-2"
+    }, actions.icon), /*#__PURE__*/React.createElement("span", null, actions.actionTitle)));
   }))) : /*#__PURE__*/React.createElement("div", null, pagination && paginationProps && dataLength > 0 && /*#__PURE__*/React.createElement("div", {
     className: "rows-count"
-  }, getRowDisplayRange((_paginationProps$tota = paginationProps.total) != null ? _paginationProps$tota : 0, (_paginationProps$rows = paginationProps.rowsPerPage) != null ? _paginationProps$rows : 0, (_paginationProps$curr = paginationProps.currentPage) != null ? _paginationProps$curr : 0)))));
+  }, getRowDisplayRange((_paginationProps$tota = paginationProps.total) != null ? _paginationProps$tota : 0, (_paginationProps$rows = paginationProps.rowsPerPage) != null ? _paginationProps$rows : 0, (_paginationProps$curr = paginationProps.currentPage) != null ? _paginationProps$curr : 0, labels.showingRange)))));
 };
 export default ToolBar;