## Description <ins> Problem statement </ins> 1. Table should have a primary column set. 2. The table should be filtered(via search or client side filters) 3. there should be a selectedRow in table a. One way to ensure is add a text widget and bind it to table's `selectedRowIndex` property. If you now run a query that updates the data behind the table: the `selectedRow` is updated to (seemingly) random row and selectedRowIndex is updated as well <ins> Rootcause </ins> We have a mechanism of preserving `selectedRow` when data updates happen. Underlying logic gets the previous selected row and tries to find it in the new data using the primary key. * If it finds it, it updates the selectedRowIndex to the `__original_index__` of the found row i.e. its position in the original data before any filters were applied. <ins> Solution </ins> We update the selectedRowIndex to the index in the new filtered data. <ins> How to test </ins> 1. Create a table with a primary key 2. Add a text widget and bind it to table's `selectedRowIndex` property 3. Filter the table 4. Click on a row to select it 5. Run a query that updates the data behind the table 6. Assert that the selected row is the same and that the selectedRowIndex is updated to the new index Fixes #36080 _or_ Fixes `Issue URL` > [!WARNING] > _If no issue exists, please create an issue first, and check with the maintainers if the issue is valid._ ## Automation /ok-to-test tags="@tag.Table, @tag.Binding, @tag.Sanity" ### 🔍 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/10953679202> > Commit: 1a2d64467e453229940b67b29da1ce9d0e9ac24d > <a href="https://internal.appsmith.com/app/cypress-dashboard/rundetails-65890b3c81d7400d08fa9ee5?branch=master&workflowId=10953679202&attempt=1" target="_blank">Cypress dashboard</a>. > Tags: `@tag.Table, @tag.Binding, @tag.Sanity` > Spec: > <hr>Fri, 20 Sep 2024 06:30:08 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 ## Summary by CodeRabbit - **Improvements** - Enhanced the efficiency of the TableWidgetV2 by streamlining the method for retrieving the index of selected rows. - Improved code readability and maintainability without altering the overall functionality. - **New Features** - Introduced new test cases to validate filtering and searching functionalities within the Table Widget V2. - Added a JSON configuration for a data-driven table interface, supporting sorting, filtering, and dynamic data binding. - Introduced fixture data for testing, allowing for comprehensive validation of table behavior under various conditions. - Added a JavaScript object containing employee data to facilitate filtering and display in the table. <!-- end of auto-generated comment: release notes by coderabbit.ai --> |
||
|---|---|---|
| .. | ||
| .husky | ||
| .yarn | ||
| cypress | ||
| docker/templates | ||
| generators | ||
| packages | ||
| public | ||
| src | ||
| test | ||
| typings | ||
| .babelrc | ||
| .dockerignore | ||
| .editorconfig | ||
| .eslintrc.base.json | ||
| .eslintrc.js | ||
| .fork-ts-checkerrc | ||
| .gitignore | ||
| .lintstagedrc.json | ||
| .nvmrc | ||
| .prettierignore | ||
| .prettierrc | ||
| .sentryclirc | ||
| .yarnrc.yml | ||
| build.sh | ||
| craco.build.config.js | ||
| craco.common.config.js | ||
| craco.dev.config.js | ||
| cypress_ci_custom.config.ts | ||
| cypress_ci_hosted.config.ts | ||
| cypress_ci.config.ts | ||
| cypress-add-tags.js | ||
| cypress.config.ts | ||
| download-assets.js | ||
| jest.config.js | ||
| knip.json | ||
| package.json | ||
| README.md | ||
| README.old.md | ||
| start-caddy.sh | ||
| start-https.sh | ||
| tailwind.config.js | ||
| tsconfig.json | ||
| tsconfig.path.json | ||
| vercel.json | ||
| yarn.lock | ||
Appsmith Client
This project was bootstrapped with Create React App.
For details on setting up your development machine, please refer to the Setup Guide