From 595e7daec3b8ddf630b9ef14799ef4b9a48d2ccb Mon Sep 17 00:00:00 2001 From: Ankita Kinger Date: Thu, 30 May 2024 15:10:02 +0530 Subject: [PATCH] fix: Reverting the previous fix for table scrollbar and hiding vertical scrollbar when needed (#33806) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ## Description Reverting the previous fix for table scrollbar and hiding vertical scrollbar when needed, with a new fix. Fixes [#33774](https://github.com/appsmithorg/appsmith/issues/33774) [#33557](https://github.com/appsmithorg/appsmith/issues/33557) [#17857](https://github.com/appsmithorg/appsmith/issues/17857) ## Automation /ok-to-test tags="@tag.Table" ### :mag: Cypress test results > [!TIP] > 🟢 🟢 🟢 All cypress tests have passed! 🎉 🎉 🎉 > Workflow run: > Commit: f4d3b4e3ef90cca02facbb5f829f64e79a0e4b54 > Cypress dashboard url: Click here! ## Communication Should the DevRel and Marketing teams inform users about this change? - [ ] Yes - [ ] No --- .../ClientSide/Widgets/TableV2/Pagesize_spec.ts | 4 ++-- .../ClientSide/Widgets/TableV2/scrollbar_spec.ts | 3 +-- .../src/widgets/TableWidgetV2/component/Table.tsx | 14 +++----------- .../TableWidgetV2/component/TableBody/index.tsx | 4 +--- .../src/widgets/TableWidgetV2/widget/derived.js | 4 +++- 5 files changed, 10 insertions(+), 19 deletions(-) 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, _) => {