feat(AnalyticalTable): introduce additionalEmptyRowsCount prop (#5412)

Fixes #5278

Author: Lukas742

packages/main/src/components/AnalyticalTable/AnalyticalTable.cy.tsx

@@ -8,7 +8,6 @@ import {
   AnalyticalTableScaleWidthMode,
   AnalyticalTableSelectionBehavior,
   AnalyticalTableSubComponentsBehavior,
-  AnalyticalTableVisibleRowCountMode,
   Button,
   Input
 } from '../..';
@@ -1086,7 +1085,15 @@ describe('AnalyticalTable', () => {
           >
             Data 100
           </Button>
+          <Button
+            onClick={() => {
+              setData(data.slice(0, 10));
+            }}
+          >
+            Data 10
+          </Button>
           <AnalyticalTable
+            {...props}
             ref={tableRef}
             data-testid="at"
             data={internalData}
@@ -1135,6 +1142,15 @@ describe('AnalyticalTable', () => {
     cy.findByText('Name91').should('be.visible');
     cy.findByText('Rows: 150').should('be.visible');
     cy.get('@more').should('have.been.calledThrice');
+
+    //additionalEmptyRowsCount
+    cy.mount(<TestComp onLoadMore={onLoadMore} additionalEmptyRowsCount={1} />);
+    cy.get('[data-empty-row="true"]').should('not.exist');
+    cy.findByText('Data 10').click();
+    cy.findByText('Rows: 10').should('be.visible');
+    cy.get('[data-empty-row="true"]').should('exist').should('not.be.visible');
+    cy.findByTestId('scrollInput').typeIntoUi5Input('11{enter}', { force: true });
+    cy.findByText('Rows: 60').should('be.visible');
   });
 
   it('InfiniteScroll: Tree', () => {
@@ -2660,6 +2676,17 @@ describe('AnalyticalTable', () => {
     cy.findByText('12').should('not.be.visible');
   });
 
+  it('additionalEmptyRowsCount', () => {
+    cy.mount(<AnalyticalTable data={data} columns={columns} minRows={4} />);
+    cy.get('[data-empty-row]').should('not.exist');
+    cy.mount(<AnalyticalTable data={data} columns={columns} minRows={4} additionalEmptyRowsCount={1} />);
+    cy.get('[data-empty-row]').should('exist').and('not.be.visible');
+    cy.mount(<AnalyticalTable data={data} columns={columns} minRows={4} additionalEmptyRowsCount={5} />);
+    cy.get('[data-empty-row]').should('exist').and('have.length', 5).and('not.be.visible');
+    cy.get('[data-component-name="AnalyticalTableBody"]').scrollTo('bottom');
+    cy.get('[data-empty-row]').should('exist').and('have.length', 5).and('be.visible');
+  });
+
   cypressPassThroughTestsFactory(AnalyticalTable, { data, columns });
 });
 

packages/main/src/components/AnalyticalTable/index.tsx

@@ -151,6 +151,7 @@ const AnalyticalTable = forwardRef<AnalyticalTableDomRef, AnalyticalTablePropTyp
     onTableScroll,
     LoadingComponent,
     NoDataComponent,
+    additionalEmptyRowsCount = 0,
     alwaysShowSubComponent: _omit,
     ...rest
   } = props;
@@ -748,13 +749,15 @@ const AnalyticalTable = forwardRef<AnalyticalTableDomRef, AnalyticalTablePropTyp
                   classes={classes}
                   prepareRow={prepareRow}
                   rows={rows}
-                  itemCount={Math.max(
-                    minRows,
-                    rows.length,
-                    visibleRowCountMode === AnalyticalTableVisibleRowCountMode.AutoWithEmptyRows
-                      ? internalVisibleRowCount
-                      : 0
-                  )}
+                  itemCount={
+                    Math.max(
+                      minRows,
+                      rows.length,
+                      visibleRowCountMode === AnalyticalTableVisibleRowCountMode.AutoWithEmptyRows
+                        ? internalVisibleRowCount
+                        : 0
+                    ) + (!tableState.isScrollable ? additionalEmptyRowsCount : 0)
+                  }
                   scrollToRef={scrollToRef}
                   isTreeTable={isTreeTable}
                   internalRowHeight={internalRowHeight}
@@ -779,7 +782,7 @@ const AnalyticalTable = forwardRef<AnalyticalTableDomRef, AnalyticalTablePropTyp
               </VirtualTableBodyContainer>
             )}
           </div>
-          {(tableState.isScrollable === undefined || tableState.isScrollable) && (
+          {(additionalEmptyRowsCount || tableState.isScrollable === undefined || tableState.isScrollable) && (
             <VerticalScrollbar
               tableBodyHeight={tableBodyHeight}
               internalRowHeight={internalHeaderRowHeight}

packages/main/src/components/AnalyticalTable/types/index.ts

@@ -359,7 +359,16 @@ export interface AnalyticalTablePropTypes extends Omit<CommonProps, 'title'> {
     | AnalyticalTableVisibleRowCountMode
     | keyof typeof AnalyticalTableVisibleRowCountMode
     | TableVisibleRowCountMode;
-
+  /**
+   * Specifies the number of additional empty rows added to the bottom of a table that is normally __non__ scrollable.
+   * Use this prop if you want to ensure that the table is scrollable.
+   *
+   * __Note:__ It's recommended to use this prop only if `infiniteScroll` is applied and where assessing scrollability is not possible across various resolutions or datasets.
+   * E.g., when using `visibleRowCountMode` with values `"Auto"` or `"AutoWithEmptyRows"`.
+   *
+   * __Note:__ This prop has no effect if the table is already scrollable without additional empty rows.
+   */
+  additionalEmptyRowsCount?: number;
   /**
    * The number of rows visible without going into overflow.
    *