## 🐞 Problem
We've identified several issues with the TableWidgetV2's infinite scroll
functionality:
- **Stale Data After Toggle**
When users enable infinite scroll for the first time, the table's state
and cached data aren't properly reset, potentially leading to incorrect
data display and inconsistent behavior.
- **Height Changes Breaking Existing Data**
When a table's height is increased while infinite scroll is enabled, the
existing cached data becomes invalid due to changing offsets, but the
table wasn't resetting its state accordingly.
- **Empty Initial View**
When loading a table with infinite scroll enabled, rows were not visible
during the initial load until data was fetched, creating a jarring user
experience.
- **Disabled Properties Still Rendering Controls**
Property controls that should be disabled (based on section disabling
conditions) were still being rendered and active, causing unexpected
behavior.
---
## ✅ Solution
### 1. Implement Table Reset on Infinite Scroll Toggle
Added a new method `resetTableForInfiniteScroll()` that properly resets
the table's state when infinite scroll is enabled. This method:
- Clears cached table data
- Resets the "end of data" flag
- Resets all meta properties to their default values
- Sets the page number back to `1` and triggers a page load
```ts
resetTableForInfiniteScroll = () => {
const { infiniteScrollEnabled, pushBatchMetaUpdates } = this.props;
if (infiniteScrollEnabled) {
// reset the cachedRows
pushBatchMetaUpdates("cachedTableData", {});
pushBatchMetaUpdates("endOfData", false);
// reset the meta properties
const metaProperties = Object.keys(TableWidgetV2.getMetaPropertiesMap());
metaProperties.forEach((prop) => {
if (prop !== "pageNo") {
const defaultValue = TableWidgetV2.getMetaPropertiesMap()[prop];
this.props.updateWidgetMetaProperty(prop, defaultValue);
}
});
// reset and reload page
this.updatePageNumber(1, EventType.ON_NEXT_PAGE);
}
};
```
---
### 2. Reset on Height Changes
Added a check in `componentDidUpdate` to detect height changes and reset
the table when needed:
```ts
// Reset widget state when height changes while infinite scroll is enabled
if (
infiniteScrollEnabled &&
prevProps.componentHeight !== componentHeight
) {
this.resetTableForInfiniteScroll();
}
```
---
### 3. Improved Empty State Rendering
Modified the `InfiniteScrollBodyComponent` to show placeholder rows
during initial load by using the maximum of `rows.length` and
`pageSize`:
```ts
const itemCount = useMemo(
() => Math.max(rows.length, pageSize),
[rows.length, pageSize],
);
```
This ensures the table maintains its expected height and appearance even
before data is loaded.
---
### 4. Fixed Property Control Rendering
Fixed the `PropertyControl` component to respect the `isControlDisabled`
flag by conditionally rendering the control:
```ts
{!isControlDisabled &&
PropertyControlFactory.createControl(
config,
{
onPropertyChange: onPropertyChange,
// ...other props
},
// ...other args
)}
```
This prevents disabled controls from being rendered and potentially
causing issues.
---
These improvements significantly enhance the stability and user
experience of **TableWidgetV2**'s infinite scroll functionality.
Fixes#39377
## Automation
/ok-to-test tags="@tag.Table, @tag.Widget, @tag.Binding, @tag.Sanity,
@tag.PropertyPane"
### 🔍 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/14373134089>
> Commit: 2b0715bbbe2e9a254cd287f831329be529a17c3c
> <a
href="https://internal.appsmith.com/app/cypress-dashboard/rundetails-65890b3c81d7400d08fa9ee5?branch=master&workflowId=14373134089&attempt=1"
target="_blank">Cypress dashboard</a>.
> Tags: `@tag.Table, @tag.Widget, @tag.Binding, @tag.Sanity,
@tag.PropertyPane`
> Spec:
> <hr>Thu, 10 Apr 2025 07:15:53 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**
- Property panels now display controls only when enabled, enhancing
clarity.
- Table widgets offer smoother infinite scrolling with automatic resets
on state or size changes.
- Columns dynamically adjust for optimal display when infinite scrolling
is active.
- **Bug Fixes**
- Improved handling of item counts and loading states in infinite
scrolling.
- **Refactor**
- Improved performance through optimized item computations and
streamlined scrolling logic.
- Removed redundant loading button logic for a cleaner user experience.
- **Tests**
- Expanded test scenarios to verify improved content wrapping and rich
HTML rendering in table cells, with a focus on internal logic and
behavior.
- Enhanced clarity and robustness of infinite scroll tests by verifying
loading through scrolling actions.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---------
Co-authored-by: Rahul Barwal <rahul.barwal@appsmith.com>
5a6479c5dd