diff --git a/app/client/cypress/e2e/Regression/ClientSide/Widgets/TableV2/InfiniteScrollVariableHeightRows_spec.ts b/app/client/cypress/e2e/Regression/ClientSide/Widgets/TableV2/InfiniteScrollVariableHeightRows_spec.ts index 571ab70754ea..87053c36bb8c 100644 --- a/app/client/cypress/e2e/Regression/ClientSide/Widgets/TableV2/InfiniteScrollVariableHeightRows_spec.ts +++ b/app/client/cypress/e2e/Regression/ClientSide/Widgets/TableV2/InfiniteScrollVariableHeightRows_spec.ts @@ -19,17 +19,6 @@ describe( const testData = [ { id: 1, - name: "Short text", - description: "This is a short description", - }, - { - id: 2, - name: "Medium length text", - description: - "This description is a bit longer and might wrap to the next line depending on column width", - }, - { - id: 3, name: "Very long text content", description: "This is a very long description that will definitely wrap to multiple lines when cell wrapping is enabled. It contains enough text to ensure that the row height will need to expand significantly to accommodate all the content properly.", @@ -89,12 +78,12 @@ describe( // updated table data with extermely long text const updatedTestData = [ { - id: 4, + id: 2, name: "Short text", description: "This is a short description", }, { - id: 5, + id: 3, name: "Extremely long text", description: "This is an extremely long description that will definitely wrap to multiple lines when cell wrapping is enabled. It contains enough text to ensure that the row height will need to expand significantly to accommodate all the content properly. We're adding even more text here to make sure the row expands further than before. The height measurement should reflect this change in content length appropriately. Additionally, this text continues with more detailed information about how the wrapping behavior works in practice. When dealing with variable height rows, it's important to validate that the table can handle content of any length gracefully. This extra text helps us verify that the row height calculations are working correctly even with very long content that spans multiple lines. The table should automatically adjust the row height to fit all of this content while maintaining proper scrolling and layout behavior. We want to ensure there are no visual glitches or truncation issues when displaying such lengthy content.", @@ -117,7 +106,7 @@ describe( }); }) .then(() => { - expect(maxHeight).to.be.greaterThan(currentRowHeight); + expect(maxHeight).to.be.at.least(currentRowHeight); }); }); @@ -143,7 +132,7 @@ describe( // Create test data with HTML content const htmlTestData = [ { - id: 6, + id: 4, name: "HTML content", description: "
This is a formatted description with

multiple line breaks
and formatting
", @@ -158,16 +147,21 @@ describe( propPane.SelectPropertiesDropDown("Column type", "HTML"); propPane.NavigateBackToPropertyPane(); - // get the height of the row with the longest text - cy.get(".t--widget-tablewidgetv2 .tbody .tr").each(($row) => { - cy.wrap($row) - .invoke("outerHeight") - .then((height) => { - if (height !== undefined) { - expect(Math.ceil(height)).to.be.greaterThan(DEFAULT_ROW_HEIGHT); - } - }); - }); + // Find the tallest row in the table + let maxHeight = 0; + cy.get(".t--widget-tablewidgetv2 .tbody .tr") + .each(($row, index) => { + cy.wrap($row) + .invoke("outerHeight") + .then((height) => { + if (height !== undefined && height > maxHeight) { + maxHeight = height; + } + }); + }) + .then(() => { + expect(maxHeight).to.be.at.least(DEFAULT_ROW_HEIGHT); + }); }); }, ); diff --git a/app/client/src/widgets/TableWidgetV2/component/VirtualTable/InifiniteScrollBody/index.tsx b/app/client/src/widgets/TableWidgetV2/component/VirtualTable/InifiniteScrollBody/index.tsx index 44ef5f424b0b..597c368c3cdd 100644 --- a/app/client/src/widgets/TableWidgetV2/component/VirtualTable/InifiniteScrollBody/index.tsx +++ b/app/client/src/widgets/TableWidgetV2/component/VirtualTable/InifiniteScrollBody/index.tsx @@ -1,9 +1,10 @@ -import React, { useMemo, type Ref } from "react"; +import React, { type Ref } from "react"; import { type ReactElementType } from "react-window"; import type SimpleBar from "simplebar-react"; import { LoadingIndicator } from "../../LoadingIndicator"; import { VariableInfiniteVirtualList } from "../../TableBodyCoreComponents/VirtualList"; import { useAppsmithTable } from "../../TableContext"; +import { useInfiniteScroll } from "./useInfiniteScroll"; interface InfiniteScrollBodyProps { innerElementType: ReactElementType; @@ -19,14 +20,13 @@ const InfiniteScrollBodyComponent = React.forwardRef( pageSize, subPage: rows, tableSizes, - totalRecordsCount, } = useAppsmithTable(); - const itemCount = useMemo(() => { - return totalRecordsCount && totalRecordsCount > 0 - ? totalRecordsCount - : rows.length; - }, [totalRecordsCount, rows]); + useInfiniteScroll({ + rows, + pageSize, + loadMore: nextPageClick, + }); return (
@@ -34,7 +34,7 @@ const InfiniteScrollBodyComponent = React.forwardRef( hasMoreData={!endOfData} height={height} innerElementType={props.innerElementType} - itemCount={itemCount} + itemCount={rows.length} loadMore={nextPageClick} outerRef={ref} pageSize={pageSize} diff --git a/app/client/src/widgets/TableWidgetV2/component/VirtualTable/InifiniteScrollBody/useInfiniteScroll.tsx b/app/client/src/widgets/TableWidgetV2/component/VirtualTable/InifiniteScrollBody/useInfiniteScroll.tsx new file mode 100644 index 000000000000..f6201517aa39 --- /dev/null +++ b/app/client/src/widgets/TableWidgetV2/component/VirtualTable/InifiniteScrollBody/useInfiniteScroll.tsx @@ -0,0 +1,23 @@ +import type { Row } from "react-table"; +import { useEffect } from "react"; + +export interface UseInfiniteScrollProps { + loadMore: () => void; + rows: Row>[]; + pageSize: number; +} + +export const useInfiniteScroll = ({ + loadMore, + pageSize, + rows, +}: UseInfiniteScrollProps) => { + useEffect(() => { + // If cachedRows is just a single page, call loadMore to fetch the next page + if (rows.length > 0 && rows.length <= pageSize) { + loadMore(); + } + }, [rows.length, pageSize, loadMore]); + + return; +};