qbs-react-grid 2.2.16 → 2.2.18

package/src/qbsTable/QbsTable.tsx

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

package/src/qbsTable/TableCardList.tsx

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

package/src/qbsTable/Toolbar.tsx

@@ -230,11 +230,12 @@ const ToolBar: React.FC<QbsTableToolbarProps> = ({
                     {handleHide(actions) && (
                       <button
                         type="button"
-                        className="btn"
+                        className={`btn ${actions?.buttonClassName ?? ''}`}
                         disabled={actions.disabled}
                         onClick={() => actions?.action(checkedKeys)}
                       >
-                        {actions.actionTitle}
+                        {actions?.icon && <span className="mr-2">{actions.icon}</span>}
+                        <span>{actions.actionTitle}</span>
                       </button>
                     )}
                   </React.Fragment>
@@ -249,6 +250,7 @@ const ToolBar: React.FC<QbsTableToolbarProps> = ({
                     paginationProps.total ?? 0,
                     paginationProps.rowsPerPage ?? 0,
                     paginationProps.currentPage ?? 0,
+                    labels.showingRange,
                   )}
                 </div>
               )}

package/src/qbsTable/commontypes.ts

@@ -45,7 +45,7 @@ export interface PaginationProps {
 export interface ActionProps {
   title?: string;
   action?: (row: any) => void;
-  icon: React.ReactNode;
+  icon?: React.ReactNode;
   toolTip?: string;
   hidden?: boolean;
   hide?: (data: any, index?: number) => boolean;
@@ -76,6 +76,7 @@ export interface QbsTableProps {
   searchValue?: string;
   handleSearchValue?: (value?: string) => void;
   theme?: string;
+  rtl?: boolean;
   onRowClick?: (data: any) => void;
   cellBordered?: boolean;
   bordered?: boolean;
@@ -89,9 +90,8 @@ export interface QbsTableProps {
   expandedRowKeys?: readonly number[];
   setExpandedRowKeys?: (value: readonly number[]) => void;
   handleMenuActions?: (actions: ActionProps, rowData: any) => void;
-  dropType?: 'vertical' | string;
+  dropType?: 'horizondal' | 'vertical' | string;
   labels?: QbsTableLabels;
-  rtl?: boolean;
   handleRowExpanded?: (rowData: any) => React.ReactNode;
   shouldUpdateScroll?: boolean;
   rowExpand?: boolean;
@@ -105,6 +105,8 @@ export interface QbsTableProps {
     disabled?: boolean;
     hidden?: boolean;
     customHide?: string;
+    buttonClassName?: string;
+    icon?: ReactElement | ReactNode;
   }[];
   selectedRows?: (number | string)[];
   classes?: { [key: string]: any };
@@ -135,13 +137,18 @@ export interface QbsTableProps {
   handleTableCardView?: (data: any) => React.ReactNode;
   isCustomTableCardView?: boolean;
   handleCustomCardLoader?: () => React.ReactNode;
+  hasMoreData?: boolean;
+  loadMoreData?: () => void;
+  infiniteScroll?: boolean;
+  infiniteLoading?: boolean;
+  viewMode?: string;
   rowViewToggle?: boolean;
   defaultRowView?: boolean;
   fullWidthView?: boolean;
   setTableFullView?: (value: boolean) => void;
   setRowViewToggle?: (value: boolean) => void;
-  isFullScreen?: boolean;
   rowHeight?: number;
+  isFullScreen?: boolean;
   showHeader?: boolean;
 }
 
@@ -168,23 +175,25 @@ export interface QbsTableToolbarProps {
   dataLength: number;
   headerHeight?: number;
   searchPlaceholder?: string;
+  labels?: QbsTableLabels;
+  rtl?: boolean;
   tableView?: boolean;
   enableTableToggle?: boolean;
   tableViewToggle?: boolean;
   setTableViewToggle?: (value: boolean) => void;
-  rowViewToggle?: boolean;
-  defaultRowView?: boolean;
-  fullWidthView?: boolean;
-  setTableFullView?: (value: boolean) => void;
-  setRowViewToggle?: (value: boolean) => void;
-  isFullScreen?: boolean;
-  labels?: QbsTableLabels;
-  rtl?: boolean;
   selectedRowActions?: {
     actionTitle?: string;
     action: (checked: (number | string)[]) => void;
     disabled?: boolean;
     hidden?: boolean;
     customHide?: string;
+    buttonClassName?: string;
+    icon?: ReactElement | ReactNode;
   }[];
+  rowViewToggle?: boolean;
+  defaultRowView?: boolean;
+  fullWidthView?: boolean;
+  setTableFullView?: (value: boolean) => void;
+  setRowViewToggle?: (value: boolean) => void;
+  isFullScreen?: boolean;
 }

package/src/qbsTable/labels.ts

@@ -1,4 +1,4 @@
-export type QbsTableLabels = {
+export interface QbsTableLabels {
   search?: string;
   searchAriaLabel?: string;
   clear?: string;
@@ -19,7 +19,7 @@ export type QbsTableLabels = {
   viewMore?: string;
   viewLess?: string;
   actions?: string;
-};
+}
 
 export const defaultQbsTableLabels: QbsTableLabels = {
   search: 'Search',
@@ -44,11 +44,18 @@ export const defaultQbsTableLabels: QbsTableLabels = {
   actions: 'Actions',
 };
 
+/** @deprecated Use defaultQbsTableLabels */
+export const DEFAULT_QBS_TABLE_LABELS = defaultQbsTableLabels;
+
 export const mergeQbsTableLabels = (overrides?: QbsTableLabels): QbsTableLabels => ({
   ...defaultQbsTableLabels,
   ...overrides,
+  showingRange: overrides?.showingRange ?? defaultQbsTableLabels.showingRange,
 });
 
+/** @deprecated Use mergeQbsTableLabels */
+export const mergeLabels = mergeQbsTableLabels;
+
 export const formatSelectedItems = (count: number, labels?: QbsTableLabels): string => {
   const merged = mergeQbsTableLabels(labels);
   return `${merged.selectedItems} (${count})`;

package/src/qbsTable/utilities/CardComponent.tsx

@@ -1,6 +1,7 @@
 import React, { useRef, useState } from 'react';
 
 import { QbsColumnProps } from '../commontypes';
+import { mergeLabels, type QbsTableLabels } from '../labels';
 import CardMenuDropdown from './CardMenuDropdown';
 import { handleCellFormat } from './handleFormatCell';
 import { ArrowUpIcon } from './icons';
@@ -17,6 +18,7 @@ type Props = {
   handleMenuActions?: () => void;
   cardColumLimit?: number;
   childDetailHeading?: string;
+  labels?: QbsTableLabels;
 };
 
 const CardComponent: React.FC<Props> = ({
@@ -27,8 +29,10 @@ const CardComponent: React.FC<Props> = ({
   index,
   cardColumLimit = 5,
   handleMenuActions,
-  childDetailHeading = ''
+  childDetailHeading = '',
+  labels: labelsProp
 }) => {
+  const labels = mergeLabels(labelsProp);
   const [viewMore, setViewMore] = useState(false);
   const initialDisplayCount = cardColumLimit;
 
@@ -102,13 +106,14 @@ const CardComponent: React.FC<Props> = ({
                 iconName="more"
                 rowIndex={index}
                 handleMenuActions={handleMenuActions}
+                labels={labels}
               />
             </div>
 
             {columns.length > initialDisplayCount && (
               <TooltipComponent
                 tableBodyRef={useCardRef}
-                title={viewMore ? ' View Less' : 'View More'}
+                title={viewMore ? labels.viewLess : labels.viewMore}
                 enabled={false}
               >
                 <button

package/src/qbsTable/utilities/CardMenuDropdown.tsx

@@ -1,7 +1,6 @@
-import { useEffect, useRef, useState } from 'react';
-import React from 'react';
-
+import React, { useEffect, useRef, useState } from 'react';
 import { ActionProps } from '../commontypes';
+import { mergeLabels, type QbsTableLabels } from '../labels';
 import { ThreeDotIcon } from './icons';
 import TooltipComponent from './ToolTip';
 
@@ -13,9 +12,16 @@ type Props = {
   dataTheme?: string;
   tableBodyRef: React.RefObject<HTMLDivElement>;
   rowIndex?: number;
+  labels?: QbsTableLabels;
 };
 
-const CardMenuDropdown: React.FC<Props> = ({ actionDropDown, handleMenuActions, rowData }) => {
+const CardMenuDropdown: React.FC<Props> = ({
+  actionDropDown,
+  handleMenuActions,
+  rowData,
+  labels: labelsProp
+}) => {
+  const labels = mergeLabels(labelsProp);
   const [openMenu, setOpenMenu] = useState(false);
   const [menuPositionStyles, setMenuPositionStyles] = useState<{
     top?: string;
@@ -46,7 +52,6 @@ const CardMenuDropdown: React.FC<Props> = ({ actionDropDown, handleMenuActions,
         const dropdownHeight = 200; // Adjust this if your dropdown height varies
         const spaceBelow = window.innerHeight - buttonRect.bottom;
         const spaceAbove = buttonRect.top;
-        console.log(spaceAbove, spaceBelow, dropdownHeight);
         if (spaceBelow < dropdownHeight && spaceAbove > spaceBelow) {
           setMenuPositionStyles({
             bottom: '30px',
@@ -76,7 +81,7 @@ const CardMenuDropdown: React.FC<Props> = ({ actionDropDown, handleMenuActions,
   return (
     <div className="dropdown text-black dark:text-white dark:bg-[#424242] bg-white" ref={menuRef}>
       <button className="dropdown-toggle" onClick={toggleMenu} ref={menuButtonRef}>
-        <TooltipComponent title="Actions" enabled={false} ref={menuButtonRef}>
+        <TooltipComponent title={labels.actions} enabled={false}>
           <ThreeDotIcon />
         </TooltipComponent>
       </button>

package/src/qbsTable/utilities/SearchInput.tsx

@@ -2,12 +2,14 @@ import React, { memo, useCallback } from 'react';
 
 export interface SearchProps {
   placeholder: string;
+  searchAriaLabel?: string;
   handleChange: (value: string) => void;
   searchValue: string | undefined;
   handleSearch: (value?: string) => void;
 }
 const SearchInput: React.FC<SearchProps> = ({
   placeholder,
+  searchAriaLabel = 'Search',
   handleChange,
   searchValue,
   handleSearch
@@ -37,7 +39,7 @@ const SearchInput: React.FC<SearchProps> = ({
           placeholder={placeholder}
           value={searchValue ?? ''}
           onChange={handleInputChange}
-          aria-label="Search"
+          aria-label={searchAriaLabel}
         />
         <button
           className="search-button absolute left-1 bottom-1.5 bg-white text-grey-dark"

package/src/qbsTable/utilities/empty.tsx

@@ -18,7 +18,7 @@ const NoData: React.FC<props> = ({ title, subtitle }) => {
       }}
     >
       <div style={{ width: 145, marginBottom: 20 }} className="nodata-img">
-       <svg
+        <svg
           xmlns="http://www.w3.org/2000/svg"
           width="148"
           height="132"
@@ -71,7 +71,7 @@ const NoData: React.FC<props> = ({ title, subtitle }) => {
             fill="#797979"
             d="M47.365 57.417a.926.926 0 00.926-.927v-1.777a.926.926 0 10-1.852 0v1.777c0 .512.415.927.926.927zM104.183 57.417a.926.926 0 00.926-.927v-1.777a.926.926 0 00-1.852 0v1.777c0 .512.414.927.926.927zM47.365 52.974a.926.926 0 00.926-.927V50.27a.926.926 0 00-1.852 0v1.777c0 .512.415.927.926.927zM104.183 52.974a.926.926 0 00.926-.927V50.27a.926.926 0 00-1.852 0v1.777c0 .512.414.927.926.927zM47.365 44.088a.926.926 0 00.926-.927v-1.777a.926.926 0 10-1.852 0v1.777c0 .512.415.927.926.927zM104.183 44.088a.926.926 0 00.926-.927v-1.777a.926.926 0 00-1.852 0v1.777c0 .512.414.927.926.927zM47.365 39.645a.926.926 0 00.926-.927v-1.777a.926.926 0 10-1.852 0v1.777c0 .512.415.927.926.927zM104.183 39.645a.926.926 0 00.926-.927v-1.777a.926.926 0 00-1.852 0v1.777c0 .512.414.927.926.927zM47.365 35.202a.926.926 0 00.926-.927v-1.777a.926.926 0 10-1.852 0v1.777c0 .512.415.927.926.927zM104.183 35.202a.926.926 0 00.926-.927v-1.777a.926.926 0 00-1.852 0v1.777c0 .512.414.927.926.927zM47.365 30.758a.926.926 0 00.926-.926v-.888c0-.248.02-.49.057-.726a.926.926 0 00-1.83-.288c-.052.33-.08.67-.08 1.014v.888c0 .512.416.926.927.926zM104.183 30.758a.926.926 0 00.926-.926v-.888c0-.345-.027-.683-.079-1.014a.926.926 0 10-1.83.288c.037.236.057.478.057.726v.888c0 .512.414.926.926.926zM47.881 26.426a.926.926 0 001.294-.204c.286-.394.633-.74 1.026-1.026a.926.926 0 00-1.09-1.498c-.55.4-1.034.884-1.434 1.434a.926.926 0 00.204 1.294zM103.667 26.426a.926.926 0 00.204-1.294 6.509 6.509 0 00-1.434-1.434.926.926 0 00-1.09 1.498c.393.286.74.632 1.026 1.026a.926.926 0 001.294.204zM51.138 23.597c.08.506.554.851 1.059.772a4.67 4.67 0 01.726-.057h.914a.926.926 0 000-1.852h-.914c-.344 0-.683.026-1.014.078a.926.926 0 00-.77 1.06zM100.41 23.597a.927.927 0 00-.771-1.059 6.522 6.522 0 00-1.014-.078h-.914a.926.926 0 100 1.852h.914c.248 0 .49.02.726.057a.926.926 0 001.059-.772zM55.653 23.386c0 .511.415.926.926.926h1.828a.926.926 0 000-1.852H56.58a.926.926 0 00-.926.926zM60.223 23.386c0 .511.415.926.926.926h1.828a.926.926 0 000-1.852H61.15a.926.926 0 00-.926.926zM64.793 23.386c0 .511.415.926.926.926h1.829a.926.926 0 000-1.852h-1.829a.926.926 0 00-.926.926zM69.364 23.386c0 .511.414.926.926.926h1.828a.926.926 0 000-1.852H70.29a.926.926 0 00-.927.926zM73.934 23.386c0 .511.414.926.926.926h1.828a.926.926 0 000-1.852H74.86a.926.926 0 00-.926.926zM78.504 23.386c0 .511.415.926.926.926h1.828a.926.926 0 000-1.852H79.43a.926.926 0 00-.926.926zM83.074 23.386c0 .511.415.926.927.926h1.828a.926.926 0 000-1.852H84a.926.926 0 00-.927.926zM87.644 23.386c0 .511.415.926.927.926h1.828a.926.926 0 000-1.852H88.57a.926.926 0 00-.927.926zM92.215 23.386c0 .511.414.926.926.926h1.828a.926.926 0 000-1.852h-1.828a.926.926 0 00-.926.926zM72.178 36.453a1.39 1.39 0 10-1.965 1.965l3.797 3.797-3.797 3.798a1.39 1.39 0 001.965 1.965l3.797-3.798 3.798 3.798a1.39 1.39 0 001.965-1.965l-3.798-3.798 3.798-3.797a1.39 1.39 0 10-1.965-1.965l-3.798 3.797-3.797-3.797z"
           ></path>
-        </svg> {' '}
+        </svg>{' '}
       </div>
       <p className="text-center text-common font-bold text-blackAlt nodata-title">{title}</p>
       <span className="text-xxs font-medium text-grey-medium nodata-sub-title">{subtitle}</span>

package/src/qbsTable/utilities/tablecalc.ts

@@ -1,6 +1,12 @@
-export function getRowDisplayRange(totalRows: number, rowsPerPage: number, pageNumber: number) {
+export function getRowDisplayRange(
+  totalRows: number,
+  rowsPerPage: number,
+  pageNumber: number,
+  formatRange: (start: number, end: number, total: number) => string = (start, end, total) =>
+    `Showing ${start} to ${end} of ${total}`
+) {
   const start = (pageNumber - 1) * rowsPerPage + 1;
   const end = Math.min(pageNumber * rowsPerPage, totalRows);
 
-  return `Showing ${start ?? 0} to ${end ?? 0} of ${totalRows ?? 0}`;
+  return formatRange(start ?? 0, end ?? 0, totalRows ?? 0);
 }

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);
@@ -187,6 +190,15 @@ const useScrollListener = (props: ScrollListenerProps) => {
       setScrollX(x);
       setScrollY(y);
 
+      if (
+        typeof handleInfiniteScroll === 'function' &&
+        deltaY !== 0 &&
+        !loading &&
+        Math.abs(y) + getTableHeight() >= contentHeight.current - 12
+      ) {
+        handleInfiniteScroll(scrollY.current);
+      }
+
       onScroll?.(Math.abs(x), Math.abs(y));
 
       if (virtualized) {
@@ -297,7 +309,6 @@ const useScrollListener = (props: ScrollListenerProps) => {
       if (!isTouching.current) {
         return;
       }
-      console.log('handleTouchMove');
 
       const { pageX, pageY } = event.touches[0];
       const deltaX = touchX.current - pageX;
@@ -338,7 +349,6 @@ const useScrollListener = (props: ScrollListenerProps) => {
       if (!isTouching.current) {
         return;
       }
-      console.log('handleTouchEnd');
       isTouching.current = false;
       const touchDuration = new Date().getTime() - momentumStartTime.current;
       const absDeltaY = Math.abs(scrollY.current - momentumStartY.current);