fix(AnalyticalTable): offer limited support for infiniteScroll comb…

…ined with a grouped table
SAP · Oct 1, 2024 · e3ebd7e · e3ebd7e
1 parent 4bcf334
commit e3ebd7e
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 5 deletions.
diff --git a/packages/main/src/components/AnalyticalTable/TableBody/VirtualTableBodyContainer.tsx b/packages/main/src/components/AnalyticalTable/TableBody/VirtualTableBodyContainer.tsx
@@ -1,7 +1,7 @@
 import { enrichEventWithDetails } from '@ui5/webcomponents-react-base';
 import type { MutableRefObject } from 'react';
 import { useCallback, useEffect, useRef, useState } from 'react';
-import type { AnalyticalTablePropTypes } from '../types/index.js';
+import type { AnalyticalTablePropTypes, TableInstance } from '../types/index.js';
 
 interface VirtualTableBodyContainerProps {
   tableBodyHeight: number;
@@ -12,13 +12,14 @@ interface VirtualTableBodyContainerProps {
   infiniteScroll?: AnalyticalTablePropTypes['infiniteScroll'];
   infiniteScrollThreshold?: AnalyticalTablePropTypes['infiniteScrollThreshold'];
   onLoadMore: AnalyticalTablePropTypes['onLoadMore'];
-  rows: Record<string, any>[];
+  rows: TableInstance['rows'];
   internalRowHeight: number;
   handleExternalScroll: AnalyticalTablePropTypes['onTableScroll'];
   visibleRows: number;
   popInRowHeight: number;
   rowCollapsedFlag?: boolean;
   dispatch: (e: { type: string; payload?: any }) => void;
+  isGrouped: boolean;
 }
 
 export const VirtualTableBodyContainer = (props: VirtualTableBodyContainerProps) => {
@@ -37,6 +38,7 @@ export const VirtualTableBodyContainer = (props: VirtualTableBodyContainerProps)
     visibleRows,
     popInRowHeight,
     rowCollapsedFlag,
+    isGrouped,
     dispatch
   } = props;
   const [isMounted, setIsMounted] = useState(false);
@@ -75,13 +77,19 @@ export const VirtualTableBodyContainer = (props: VirtualTableBodyContainerProps)
       handleExternalScroll(enrichEventWithDetails(event, { rows, rowElements: event.target.children[0].children }));
       const scrollOffset = event.target.scrollTop;
       const isScrollingDown = lastScrollTop.current < scrollOffset;
-      if (isScrollingDown && infiniteScroll) {
+      const target = event.target;
+      const scrolledToBottom = target.scrollHeight - target.scrollTop === target.clientHeight;
+      // For a grouped table, it is possible that no new groups (rows) are added since new rows are added to existing groups.
+      // Because of this, the table should trigger the `onLoadMore` event every time a user scrolls to the bottom.
+      const applyGroupingLogic = scrolledToBottom && isGrouped;
+
+      if ((isScrollingDown || applyGroupingLogic) && infiniteScroll) {
         lastScrollTop.current = scrollOffset;
         const currentLastRow =
           Math.floor(scrollOffset / popInRowHeight) +
           (popInRowHeight === internalRowHeight ? visibleRows : Math.floor(tableBodyHeight / popInRowHeight));
-        if (rows.length - currentLastRow < infiniteScrollThreshold) {
-          if (!firedInfiniteLoadEvents.current.has(rows.length)) {
+        if (rows.length - currentLastRow < infiniteScrollThreshold || applyGroupingLogic) {
+          if (!firedInfiniteLoadEvents.current.has(rows.length) || applyGroupingLogic) {
             onLoadMore(event);
           }
           firedInfiniteLoadEvents.current.add(rows.length);

diff --git a/packages/main/src/components/AnalyticalTable/index.tsx b/packages/main/src/components/AnalyticalTable/index.tsx
@@ -276,6 +276,7 @@ const AnalyticalTable = forwardRef<AnalyticalTableDomRef, AnalyticalTablePropTyp
 
   const tableState: AnalyticalTableState = tableInstanceRef.current.state;
   const { triggerScroll } = tableState;
+  const isGrouped = !!tableState.groupBy.length;
 
   const noDataTextI18n = i18nBundle.getText(LIST_NO_DATA);
   const noDataTextFiltered = i18nBundle.getText(NO_DATA_FILTERED);
@@ -800,6 +801,7 @@ const AnalyticalTable = forwardRef<AnalyticalTableDomRef, AnalyticalTablePropTyp
                 rows={rows}
                 handleExternalScroll={handleBodyScroll}
                 visibleRows={internalVisibleRowCount}
+                isGrouped={isGrouped}
               >
                 <VirtualTableBody
                   scrollContainerRef={scrollContainerRef}

diff --git a/packages/main/src/components/AnalyticalTable/types/index.ts b/packages/main/src/components/AnalyticalTable/types/index.ts
@@ -692,6 +692,8 @@ export interface AnalyticalTablePropTypes extends Omit<CommonProps, 'title'> {
    * Defines whether columns are groupable.
    *
    * __Note:__ This prop has no effect when `isTreeTable` is true or `renderRowSubComponent` is set.
+   *
+   * __Note:__ It is not recommended to use grouping in combination with `infiniteScroll` as there is no concept for this configuration.
    */
   groupable?: boolean;
   /**
@@ -746,6 +748,8 @@ export interface AnalyticalTablePropTypes extends Omit<CommonProps, 'title'> {
   columnOrder?: string[];
   /**
    * Defines whether infinite scroll is active.
+   *
+   * __Note:__ It is not recommended to use this prop in combination with a grouped table, as there is no concept for this configuration.
    */
   infiniteScroll?: boolean;
   /**