PromucFlow_constructor/app/client/cypress/e2e/Regression/ClientSide/Widgets
Jacques Ikot c162311f43
feat: implement table widget infinite scroll with dynamic height (#39646)
## Description
This PR adds support for variable height rows in the Table Widget when
using infinite scroll. The implementation dynamically adjusts row
heights based on content, particularly for wrapped text and HTML
content.

## Key Features
1. **Dynamic Row Height Calculation**: Rows automatically resize based
on content length when cell wrapping is enabled or HTML content is
present
2. **Smooth Infinite Scrolling**: Maintains smooth scrolling performance
while supporting variable height rows
3. **Responsive Layout**: Rows adjust in real-time when table data
changes or when cell wrapping is toggled

## Implementation Details
The implementation replaces the fixed-size virtual list with a
variable-size virtual list that can handle rows of different heights:
1. Created a new `BaseVirtualList` component that uses
`VariableSizeList` from react-window
2. Added row height measurement logic in the `Row` component to
calculate optimal heights
3. Implemented a context-based system to store and update row heights
4. Created a utility hook `useColumnVariableHeight` to track columns
that need variable height handling

## Testing
Added comprehensive Cypress tests that verify:
1. Fixed height behavior when cell wrapping is disabled
2. Increased row heights when cell wrapping is enabled
3. Dynamic height updates when content changes
4. Proper handling of HTML content that have extended heights
5. Reverting to fixed height when wrapping is disabled


Fixes #39089  

## Automation

/ok-to-test tags="@tag.Widget, @tag.Sanity, @tag.Binding"

### 🔍 Cypress test results
<!-- This is an auto-generated comment: Cypress test results  -->
> [!TIP]
> 🟢 🟢 🟢 All cypress tests have passed! 🎉 🎉 🎉
> Workflow run:
<https://github.com/appsmithorg/appsmith/actions/runs/13946877628>
> Commit: 9f50f22adcb8a8ab9c2aa566c7a0f21e49d1beee
> <a
href="https://internal.appsmith.com/app/cypress-dashboard/rundetails-65890b3c81d7400d08fa9ee5?branch=master&workflowId=13946877628&attempt=1"
target="_blank">Cypress dashboard</a>.
> Tags: `@tag.Widget, @tag.Sanity, @tag.Binding`
> Spec:
> <hr>Wed, 19 Mar 2025 14:39:17 UTC
<!-- end of auto-generated comment: Cypress test results  -->


## Communication
Should the DevRel and Marketing teams inform users about this change?
- [ ] Yes
- [ ] No


<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

- **New Features**
- Enhanced the table widget to automatically adjust row heights based on
varying content lengths, wrapping settings, and HTML content for a
smoother user experience.
- Improved performance with optimized virtualization of table rows,
ensuring efficient rendering and smooth infinite scrolling.

- **Tests**
- Added a comprehensive test suite validating the table’s behavior under
fixed, dynamic, and updated content conditions, ensuring consistent row
height adjustments during user interactions.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

---------

Co-authored-by: Rahul Barwal <rahul.barwal@appsmith.com>
2025-03-20 10:23:37 +01:00
..
Audio chore: AppIDE Folder Structure (#39165) 2025-02-17 10:34:23 +03:00
Button chore: update select component (#38954) 2025-02-06 13:10:25 +05:30
Camera chore: Addding dependent tags (#36965) 2024-10-18 18:19:08 +05:30
Chart chore: Addding dependent tags (#36965) 2024-10-18 18:19:08 +05:30
Checkbox chore: Addding dependent tags (#36965) 2024-10-18 18:19:08 +05:30
CodeScanner chore: Addding dependent tags (#36965) 2024-10-18 18:19:08 +05:30
CurrencyInput chore: update select component (#38954) 2025-02-06 13:10:25 +05:30
Custom chore: Addding dependent tags (#36965) 2024-10-18 18:19:08 +05:30
Datepicker test: datepicker3 test fix (#39019) 2025-02-14 08:38:01 +05:30
Divider chore: Addding dependent tags (#36965) 2024-10-18 18:19:08 +05:30
DocumentViewer chore: Addding dependent tags (#36965) 2024-10-18 18:19:08 +05:30
Dropdown chore: Removing the feature flag for using Entity Item component from ADS templates (#39093) 2025-03-14 17:40:02 +05:30
Filepicker chore: update select component (#38954) 2025-02-06 13:10:25 +05:30
Form chore: Addding dependent tags (#36965) 2024-10-18 18:19:08 +05:30
Iframe fix: Fix iframe and widget test case for clicking (#38039) 2024-12-09 19:00:43 +05:30
Image chore: Addding dependent tags (#36965) 2024-10-18 18:19:08 +05:30
Input fix: stop tooltip from overflowing out of view in preview and deployed mode. (#39159) 2025-02-24 12:36:54 +01:00
JSONForm feat: Trigger autocomplete even outside bindings (#39446) 2025-03-07 13:35:16 +05:30
List chore: Addding dependent tags (#36965) 2024-10-18 18:19:08 +05:30
ListV2 fix: infinite render loop in List Widget when hiding/unhiding with selected item (#39262) 2025-02-17 11:43:24 +01:00
Map chore: added tag to exclude from map widget spec from airgap (#39645) 2025-03-10 14:55:02 +05:30
Modal chore: Addding dependent tags (#36965) 2024-10-18 18:19:08 +05:30
Multiselect chore: Addding dependent tags (#36965) 2024-10-18 18:19:08 +05:30
Others fix: map widget marker onClick duplication (#39517) 2025-03-05 15:25:52 +01:00
PhoneInput chore: update select component (#38954) 2025-02-06 13:10:25 +05:30
Radio test: new test cases framework functions and Action selector (#37566) 2024-12-16 16:41:54 +05:30
Rating chore: Addding dependent tags (#36965) 2024-10-18 18:19:08 +05:30
RTE chore: Addding dependent tags (#36965) 2024-10-18 18:19:08 +05:30
Select chore: Addding dependent tags (#36965) 2024-10-18 18:19:08 +05:30
Sliders test: new test cases framework functions and Action selector (#37566) 2024-12-16 16:41:54 +05:30
Statbox chore: Addding dependent tags (#36965) 2024-10-18 18:19:08 +05:30
Switch chore: Addding dependent tags (#36965) 2024-10-18 18:19:08 +05:30
Tab test: fix tabs skipped test CE (#37023) 2024-10-25 21:21:57 +05:30
TableV2 feat: implement table widget infinite scroll with dynamic height (#39646) 2025-03-20 10:23:37 +01:00
Text chore: Addding dependent tags (#36965) 2024-10-18 18:19:08 +05:30
TreeSelect chore: Addding dependent tags (#36965) 2024-10-18 18:19:08 +05:30
Video chore: Addding dependent tags (#36965) 2024-10-18 18:19:08 +05:30
Container_spec.js chore: Addding dependent tags (#36965) 2024-10-18 18:19:08 +05:30
ContainerTest2_spec.ts chore: Addding dependent tags (#36965) 2024-10-18 18:19:08 +05:30
deprecatedWidgets_spec.js chore: Addding dependent tags (#36965) 2024-10-18 18:19:08 +05:30
Disabled_Widgets_drag_validation_spec.js chore: Addding dependent tags (#36965) 2024-10-18 18:19:08 +05:30
Migration_Spec.js chore: Addding dependent tags (#36965) 2024-10-18 18:19:08 +05:30
Tab_reset_spec.js chore: Addding dependent tags (#36965) 2024-10-18 18:19:08 +05:30
WidgetCanvas_spec.js test: Cypress - @tag.Video, @tag.Container, @tag.Switch, @tag.Slider, @tag.Tab, @tag.Table, @tag.Select (#29698) 2023-12-18 17:05:27 +05:30
WidgetCopyPaste_spec.js chore: Addding dependent tags (#36965) 2024-10-18 18:19:08 +05:30
WidgetGrouping_spec.js chore: Addding dependent tags (#36965) 2024-10-18 18:19:08 +05:30
Widgets_Labels_spec.js chore: Addding dependent tags (#36965) 2024-10-18 18:19:08 +05:30
WidgetSelection_spec.js chore: Addding dependent tags (#36965) 2024-10-18 18:19:08 +05:30