c162311f43
## 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> |
||
|---|---|---|
| .github | ||
| app | ||
| contributions | ||
| deploy | ||
| scripts | ||
| static | ||
| .coderabbit.yaml | ||
| .deepsource.toml | ||
| .editorconfig | ||
| .env.example | ||
| .gitignore | ||
| .imgbotconfig | ||
| .nojekyll | ||
| app.json | ||
| appsmith_events.md | ||
| appsmith_templates.md | ||
| ci-debug.sh | ||
| CODE_OF_CONDUCT.md | ||
| CODEOWNERS | ||
| CONTRIBUTING.md | ||
| depot.json | ||
| Dockerfile | ||
| heroku.yml | ||
| IssuesReport.md | ||
| LICENSE | ||
| README.md | ||
| SECURITY.md | ||
Organizations build internal applications such as dashboards, database GUIs, admin panels, approval apps, customer support dashboards, and more to help their teams perform day-to-day operations. Appsmith is an open-source tool that enables the rapid development of these internal apps. Read more on our website.
Installation
There are two ways to start using Appsmith:
- Signup on Appsmith Cloud.
- Install Appsmith on your machine. See the installation guides below.
| Installation Methods | Documentation |
|---|---|
 |
Docker (Recommended) |
 |
Kubernetes |
 |
AWS AMI |
For other deployment options, see the Installation Guides documentation.
Development
To build and run Appsmith in your local dev environment, see Setup for local development.
Learning Resources
Need Help?
Contributing
We ❤️ our contributors. We're committed to fostering an open, welcoming, and safe environment in the community.
📕 We expect everyone participating in the community to abide by our Code of Conduct. Please read and follow it.
🤝 If you'd like to contribute, start by reading our Contribution Guide.
👾 Explore some good first issues.
Let's build great software together.
Top Contributors
License
Appsmith is licensed under the terms of Apache License 2.0.