diff --git a/app/client/cypress/e2e/Regression/ClientSide/Widgets/TableV2/Pagesize_spec.ts b/app/client/cypress/e2e/Regression/ClientSide/Widgets/TableV2/Pagesize_spec.ts index 9f24efd6b6..d29b657588 100644 --- a/app/client/cypress/e2e/Regression/ClientSide/Widgets/TableV2/Pagesize_spec.ts +++ b/app/client/cypress/e2e/Regression/ClientSide/Widgets/TableV2/Pagesize_spec.ts @@ -24,7 +24,7 @@ describe( _.agHelper .GetText(getWidgetSelector(_.draggableWidgets.TEXT)) .then(($text) => { - expect($text).to.eq("7"); + expect($text).to.eq("6"); }); _.agHelper.GetNClick( ".t--property-control-defaultrowheight .ads-v2-segmented-control__segments-container:nth-child(2)", @@ -41,7 +41,7 @@ describe( _.agHelper .GetText(getWidgetSelector(_.draggableWidgets.TEXT)) .then(($text) => { - expect($text).to.eq("4"); + expect($text).to.eq("3"); }); }); }, diff --git a/app/client/cypress/e2e/Regression/ClientSide/Widgets/TableV2/scrollbar_spec.ts b/app/client/cypress/e2e/Regression/ClientSide/Widgets/TableV2/scrollbar_spec.ts index 2b1965140b..46ea5ab022 100644 --- a/app/client/cypress/e2e/Regression/ClientSide/Widgets/TableV2/scrollbar_spec.ts +++ b/app/client/cypress/e2e/Regression/ClientSide/Widgets/TableV2/scrollbar_spec.ts @@ -25,8 +25,7 @@ describe( cy.get(".t--draggable-tablewidgetv2 .table .simplebar-content").then( ($scrollBox) => - /* 2 is the scrollbar offset which is needed for virtual table */ - expect($scrollBox[0].clientHeight + 2).to.be.equal(tableHeight), + expect($scrollBox[0].clientHeight).to.be.equal(tableHeight), ); }); }, diff --git a/app/client/src/widgets/TableWidgetV2/component/Table.tsx b/app/client/src/widgets/TableWidgetV2/component/Table.tsx index 7bbea00205..83e8c77935 100644 --- a/app/client/src/widgets/TableWidgetV2/component/Table.tsx +++ b/app/client/src/widgets/TableWidgetV2/component/Table.tsx @@ -297,15 +297,9 @@ export function Table(props: TableProps) { const scrollContainerStyles = useMemo(() => { return { - height: - props.data.length < props.pageSize - ? "100%" - : isHeaderVisible - ? props.height - - tableSizes.TABLE_HEADER_HEIGHT - - TABLE_SCROLLBAR_HEIGHT + - SCROLL_BAR_OFFSET - : props.height - TABLE_SCROLLBAR_HEIGHT - SCROLL_BAR_OFFSET, + height: isHeaderVisible + ? props.height - tableSizes.TABLE_HEADER_HEIGHT - TABLE_SCROLLBAR_HEIGHT + : props.height - TABLE_SCROLLBAR_HEIGHT - SCROLL_BAR_OFFSET, width: props.width, }; }, [ @@ -313,8 +307,6 @@ export function Table(props: TableProps) { props.height, tableSizes.TABLE_HEADER_HEIGHT, props.width, - props.data.length, - props.pageSize, ]); const shouldUseVirtual = diff --git a/app/client/src/widgets/TableWidgetV2/component/TableBody/index.tsx b/app/client/src/widgets/TableWidgetV2/component/TableBody/index.tsx index afaab6e683..34a1b368b6 100644 --- a/app/client/src/widgets/TableWidgetV2/component/TableBody/index.tsx +++ b/app/client/src/widgets/TableWidgetV2/component/TableBody/index.tsx @@ -95,9 +95,7 @@ const TableVirtualBodyComponent = React.forwardRef( innerElementType={props.innerElementType} itemCount={Math.max(props.rows.length, props.pageSize)} itemData={props.rows} - itemSize={ - props.tableSizes.ROW_HEIGHT + props.tableSizes.ROW_VIRTUAL_OFFSET - } + itemSize={props.tableSizes.ROW_HEIGHT} outerRef={ref} width={`calc(100% + ${2 * WIDGET_PADDING}px)`} > diff --git a/app/client/src/widgets/TableWidgetV2/widget/derived.js b/app/client/src/widgets/TableWidgetV2/widget/derived.js index dfdef6b613..2b1daa55d1 100644 --- a/app/client/src/widgets/TableWidgetV2/widget/derived.js +++ b/app/client/src/widgets/TableWidgetV2/widget/derived.js @@ -187,7 +187,9 @@ export default { tableSizes.COLUMN_HEADER_HEIGHT) / tableSizes.ROW_HEIGHT; - return pageSize % 1 > 0.3 ? Math.ceil(pageSize) : Math.floor(pageSize); + return pageSize % 1 > 0.3 && props.tableData.length > pageSize + ? Math.ceil(pageSize) + : Math.floor(pageSize); }, // getProcessedTableData: (props, moment, _) => {