feat: added column freeze and unfreeze functionality to table widget #18757

keyurparalkar · 2022-12-07T14:09:38Z

Description

PRD: https://www.notion.so/appsmith/Ability-to-freeze-columns-dd118f7ed2e14e008ee305056b79874a?d=300f4968889244da9f737e1bfd8c06dc#2ddaf28e10a0475cb69f1af77b938d0b

This PR adds the following features to the table widget:

Freeze the columns to the left or right of the table.(Both canvas and page view mode).
Unfreeze the frozen columns. (Both canvas and page view mode).
Columns that are left frozen, will get unfrozen at a position after the last left frozen column. (Both canvas and page view mode).
Columns that are right frozen, will get unfrozen at a position before the first right frozen column. (Both canvas and page view mode).
Column order can be persisted in the Page view mode.
Users can also unfreeze the columns that are frozen by the developers.
Columns that are frozen cannot be reordered(Both canvas and page view mode)
Property pane changes (Columns property):
- If the column is frozen to the left then that column should appear at top of the list.
- If the column is frozen to the right then that column should appear at the bottom of the list.
- The columns that are frozen cannot be moved or re-ordered in the list. They remain fixed in their position.
In-Page mode, If there is a change in frozen or unfrozen columns in multiple tables then the order of columns and frozen and unfrozen columns should get persisted on refresh i.e. changes should get persisted across refreshes.

Fixes #3265 #18230

Type of change

Breaking change (fix or feature that would cause existing functionality to not work as expected)

How Has This Been Tested?

Manual. Below are the cases that were tested manually:
- Existing frozen columns should be frozen when server-side pagination is enabled.
- Two applications having two different tables should persist their column order and frozen items.
- Scroll bars are appearing as expected.
- Edit mode functionalities are working as expected.
- Hidden columns should appear before the first right frozen column but should be overlayed by the right frozen column in such a way that the column is hidden.
- Custom columns that are added should appear as before the first right frozen column.
Jest: Added test for generateNewColumnOrderFromStickyValue
Cypress: Added cypress test: column_freeze_spec.js
- Check column freeze and unfreeze mechanism in canavs mode
  - Column freeze and unfreeze testing via propertypane
  - Column freeze and unfreeze testing via dropdown
- Check column freeze and unfreeze mechanism in page mode
  - Column freeze and unfreeze testing with 0 pre-frozen columns
  - Column freeze and unfreeze testing with multiple pre-frozen columns

Test Plan

https://github.com/appsmithorg/TestSmith/issues/2164
https://appsmith.notion.site/appsmith/TEST-PLAN-Table-Widget-v2-2-Column-Freeze-0aa438ec5be94702a87a480fe2952c53

Issues raised during DP testing

#18757 (comment)
#18757 (comment)
#18757 (comment)
#18757 (comment)

Checklist:

Dev activity

My code follows the style guidelines of this project
I have performed a self-review of my own code
I have commented my code, particularly in hard-to-understand areas
I have made corresponding changes to the documentation
My changes generate no new warnings
I have added tests that prove my fix is effective or that my feature works
New and existing unit tests pass locally with my changes
PR is being merged under a feature flag

QA activity:

Test plan has been approved by relevant developers
Test plan has been peer reviewed by QA
Cypress test cases have been added and approved by either SDET or manual QA
Organized project review call with relevant stakeholders after Round 1/2 of QA
Added Test Plan Approved label after reveiwing all Cypress test

vercel · 2022-12-07T15:08:57Z

Deployment failed with the following error:

Resource is limited - try again in 13 minutes (more than 100, code: "api-deployments-free-per-day").

vercel · 2022-12-07T15:09:00Z

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated
appsmith	✅ Ready (Inspect)	Visit Preview	💬 Add your feedback	Feb 14, 2023 at 7:55PM (UTC)

keyurparalkar · 2022-12-08T01:16:39Z

app/client/src/widgets/TableWidgetV2/widget/index.tsx

@@ -206,10 +209,42 @@ class TableWidgetV2 extends BaseWidget<TableWidgetProps, WidgetState> {

    const { componentWidth } = this.getPaddingAdjustedDimensions();
    let totalColumnWidth = 0;
+    let localLeftOrder = localStorage.getItem("leftOrder");


When in page view mode, we decide the sticky value based on the values present in the local storage.

app/client/src/components/propertyControls/DraggableListCard.tsx

app/client/src/widgets/TableWidgetV2/component/Table.tsx

app/client/src/widgets/TableWidgetV2/widget/propertyUtils.ts

app/client/src/widgets/TableWidgetV2/widget/index.tsx

* hidden columns and custom columns position when columns are frozen * position newly added column before the right frozen column in property pane

app/client/src/widgets/TableWidgetV2/component/Table.tsx

app/client/src/widgets/TableWidgetV2/component/cellComponents/HeaderCell.tsx

app/client/src/widgets/TableWidgetV2/component/index.tsx

app/client/src/widgets/TableWidgetV2/index.ts

app/client/src/widgets/TableWidgetV2/widget/index.tsx

app/client/src/widgets/TableWidgetV2/widget/propertyUtils.ts

github-actions · 2023-02-14T16:41:56Z

The following are new failures, please fix them before merging the PR

github-actions · 2023-02-14T16:41:57Z

The following are new failures, please fix them before merging the PR cypress/integration/Regression_TestSuite/ClientSideTests/OtherUIFeatures/ApplicationURL_spec.js
cypress/integration/Regression_TestSuite/ClientSideTests/Widgets/Button/Button_onClickAction_spec.js
cypress/integration/Regression_TestSuite/ClientSideTests/Widgets/TableV2/TableV2_Widget_Add_button_spec.js
cypress/integration/Regression_TestSuite/ClientSideTests/Workspace/MemberRoles_Spec.ts

keyurparalkar · 2023-02-14T17:51:33Z

/ok-to-test sha=0b5b255

github-actions · 2023-02-14T17:51:58Z

Tests running at: https://github.com/appsmithorg/appsmith/actions/runs/4176613098.
Workflow: Appsmith External Integration Test Workflow.
Commit: 0b5b255.
PR: 18757.
Perf tests will be available at https://app.appsmith.com/app/performance-infra-dashboard/pr-details-638dd7cd2913ba43778b915e?pr=18757&runId=4176613098_1

github-actions · 2023-02-14T17:52:51Z

The following are new failures, please fix them before merging the PR

github-actions · 2023-02-14T17:52:52Z

The following are new failures, please fix them before merging the PR cypress/integration/Regression_TestSuite/ClientSideTests/Widgets/Button/Button_onClickAction_spec.js
cypress/integration/Regression_TestSuite/ClientSideTests/Widgets/TableV2/TableV2_Widget_Add_button_spec.js
cypress/integration/Regression_TestSuite/ClientSideTests/Widgets/TableV2/TableV2_Widget_Add_button_spec.js

github-actions · 2023-02-14T19:03:59Z

The following are new failures, please fix them before merging the PR

github-actions · 2023-02-14T19:04:00Z

The following are new failures, please fix them before merging the PR cypress/integration/Regression_TestSuite/Application/MongoDBShoppingCart_spec.js
cypress/integration/Regression_TestSuite/ClientSideTests/BugTests/GitBugs_Spec.ts
cypress/integration/Regression_TestSuite/ClientSideTests/Git/GitDiscardChange/DiscardChanges_spec.js
cypress/integration/Regression_TestSuite/ClientSideTests/Git/GitImport/GitImport_spec.js
cypress/integration/Regression_TestSuite/ClientSideTests/Git/GitImport/ImportEmptyRepo_spec.js
cypress/integration/Regression_TestSuite/ClientSideTests/Git/GitSync/Connection_spec.js
cypress/integration/Regression_TestSuite/ClientSideTests/Git/GitSync/DeleteBranch_spec.js
cypress/integration/Regression_TestSuite/ClientSideTests/Git/GitSync/Deploy_spec.js
cypress/integration/Regression_TestSuite/ClientSideTests/Git/GitSync/DisconnectGit_spec.js
cypress/integration/Regression_TestSuite/ClientSideTests/Git/GitSync/GitBugs_spec.js
cypress/integration/Regression_TestSuite/ClientSideTests/Git/GitSync/GitSyncedApps_spec.js
cypress/integration/Regression_TestSuite/ClientSideTests/Git/GitSync/Merge_spec.js
cypress/integration/Regression_TestSuite/ClientSideTests/Git/GitSync/RegenerateSSHKey_spec.js
cypress/integration/Regression_TestSuite/ClientSideTests/Git/GitSync/RepoLimitExceededErrorModal_spec.js
cypress/integration/Regression_TestSuite/ClientSideTests/Git/GitSync/SwitchBranches_spec.js
cypress/integration/Regression_TestSuite/ClientSideTests/Git/GitWithTheming/GitWithTheming_spec.js
cypress/integration/Regression_TestSuite/ClientSideTests/IDE/Command_Click_Navigation_spec.js
cypress/integration/Regression_TestSuite/ClientSideTests/ThemingTests/Basic_spec.js
cypress/integration/Regression_TestSuite/ClientSideTests/VisualTests/AppPageLayout_spec.js
cypress/integration/Regression_TestSuite/ClientSideTests/VisualTests/DatasourcePageLayout_spec.js
cypress/integration/Regression_TestSuite/ClientSideTests/VisualTests/JSEditorComment_spec.js
cypress/integration/Regression_TestSuite/ClientSideTests/Widgets/Checkbox/CheckboxGroup_withQuery_spec.js
cypress/integration/Regression_TestSuite/ClientSideTests/Widgets/TableV2/TableV2_PropertyPane_spec.js
cypress/integration/Regression_TestSuite/ServerSideTests/OnLoadTests/JSOnLoad_cyclic_dependency_errors_spec.js

Aishwarya-U-R · 2023-02-14T19:50:26Z

/ok-to-test sha=bc3e931

github-actions · 2023-02-14T19:50:53Z

Tests running at: https://github.com/appsmithorg/appsmith/actions/runs/4177527111.
Workflow: Appsmith External Integration Test Workflow.
Commit: bc3e931.
PR: 18757.
Perf tests will be available at https://app.appsmith.com/app/performance-infra-dashboard/pr-details-638dd7cd2913ba43778b915e?pr=18757&runId=4177527111_1

github-actions · 2023-02-14T20:58:25Z

The following are new failures, please fix them before merging the PR

github-actions · 2023-02-14T20:58:27Z

The following are new failures, please fix them before merging the PR cypress/integration/Regression_TestSuite/ClientSideTests/Widgets/ListV2/Listv2_BasicChildWidgetInteraction_spec.js
cypress/integration/Regression_TestSuite/ServerSideTests/QueryPane/AddWidget_spec.js

keyurparalkar · 2023-02-15T04:04:44Z

/ok-to-test sha=bc3e931

github-actions · 2023-02-15T04:05:19Z

Tests running at: https://github.com/appsmithorg/appsmith/actions/runs/4180491060.
Workflow: Appsmith External Integration Test Workflow.
Commit: bc3e931.
PR: 18757.
Perf tests will be available at https://app.appsmith.com/app/performance-infra-dashboard/pr-details-638dd7cd2913ba43778b915e?pr=18757&runId=4180491060_1

github-actions · 2023-02-15T05:13:48Z

The following are new failures, please fix them before merging the PR

github-actions · 2023-02-15T05:13:50Z

The following are new failures, please fix them before merging the PR cypress/integration/Regression_TestSuite/ClientSideTests/OtherUIFeatures/Logs_spec.ts
cypress/integration/Regression_TestSuite/ClientSideTests/VisualTests/DatasourcePageLayout_spec.js
cypress/integration/Regression_TestSuite/ClientSideTests/Workspace/MemberRoles_Spec.ts
cypress/integration/Regression_TestSuite/ServerSideTests/QueryPane/Mongo_Spec.js
cypress/integration/Regression_TestSuite/ServerSideTests/QueryPane/S3_1_spec.js

github-actions · 2023-02-15T05:54:07Z

The following are new failures, please fix them before merging the PR

github-actions · 2023-02-15T05:54:08Z

The following are new failures, please fix them before merging the PR cypress/integration/Regression_TestSuite/ClientSideTests/OtherUIFeatures/Logs_spec.ts
cypress/integration/Regression_TestSuite/ClientSideTests/VisualTests/DatasourcePageLayout_spec.js
cypress/integration/Regression_TestSuite/ClientSideTests/Workspace/MemberRoles_Spec.ts
cypress/integration/Regression_TestSuite/ClientSideTests/Workspace/MemberRoles_Spec.ts
cypress/integration/Regression_TestSuite/ServerSideTests/QueryPane/Mongo_Spec.js

Rhitottam · 2023-02-15T09:20:13Z

/perf-test ref=rhito/fix-misc-perf-tests-selector

github-actions · 2023-02-15T09:20:42Z

Tests running at: https://github.com/appsmithorg/appsmith/actions/runs/4182368997.
Workflow: Performance Tests Workflow.
Commit: ``.
PR: 18757.
Perf tests will be available at https://app.appsmith.com/app/performance-infra-dashboard/pr-details-638dd7cd2913ba43778b915e?pr=18757&runId=4182368997_1

keyurparalkar added 2 commits December 7, 2022 19:25

feat: added column freeze and unfreeze functionality to table widget

cf4ab0d

chore: resolved merge conflicts

d5a7286

keyurparalkar requested a review from sbalaji1192 December 7, 2022 15:08

github-actions bot added Widgets Product This label groups issues related to widgets Enhancement New feature or request Medium Issues that frustrate users due to poor UX Table Widget labels Dec 7, 2022

vercel bot deployed to Preview – appsmith December 7, 2022 15:16 View deployment

keyurparalkar commented Dec 8, 2022

View reviewed changes

sbalaji1192 reviewed Dec 9, 2022

View reviewed changes

fix: addressed review comments

0490545

vercel bot deployed to Preview December 9, 2022 14:49 View deployment

keyurparalkar added 2 commits December 11, 2022 10:20

fix: added sticky behaviour on virtualization

62ccbe5

fix:

5f21cff

* hidden columns and custom columns position when columns are frozen * position newly added column before the right frozen column in property pane

vercel bot deployed to Preview December 11, 2022 13:34 View deployment

keyurparalkar requested a review from sbalaji1192 December 13, 2022 09:12

sbalaji1192 reviewed Dec 13, 2022

View reviewed changes

keyurparalkar mentioned this pull request Dec 14, 2022

feat: added item freeze functionality to draggable list appsmithorg/design-system#279

Merged

7 tasks

design system version updated

2482a74

vercel bot deployed to Preview December 15, 2022 04:36 View deployment

fix: addressed review comments

34dfa7f

vercel bot deployed to Preview December 15, 2022 10:09 View deployment

keyurparalkar requested a review from sbalaji1192 December 16, 2022 04:11

DS package version updated

c32243f

vercel bot deployed to Preview December 16, 2022 11:52 View deployment

sbalaji1192 reviewed Dec 19, 2022

View reviewed changes

keyurparalkar added 2 commits December 19, 2022 22:58

fix: address review comments

e527e92

fix: change the default sticky value to blank string

5befba8

keyurparalkar added 2 commits February 14, 2023 23:19

test: change disabled color test

2c4aa6c

Merge branch 'release' into feat/feat-table-sticky-columns

0b5b255

vercel bot deployed to Preview February 14, 2023 17:58 View deployment

Merge branch 'release' into feat/feat-table-sticky-columns

bc3e931

vercel bot deployed to Preview February 14, 2023 19:55 View deployment

ashit-rath approved these changes Feb 15, 2023

View reviewed changes

laveena-en added the Test Plan Approved Manual/Cypress tests covers changes made on the PR. Else, add skip-testPlan label if not applicable label Feb 15, 2023

somangshu merged commit b22ad3a into release Feb 15, 2023

somangshu deleted the feat/feat-table-sticky-columns branch February 15, 2023 11:42

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: added column freeze and unfreeze functionality to table widget #18757

feat: added column freeze and unfreeze functionality to table widget #18757

keyurparalkar commented Dec 7, 2022 •

edited by laveena-en

Loading

vercel bot commented Dec 7, 2022

vercel bot commented Dec 7, 2022 •

edited

Loading

keyurparalkar Dec 8, 2022

github-actions bot commented Feb 14, 2023

github-actions bot commented Feb 14, 2023

keyurparalkar commented Feb 14, 2023

github-actions bot commented Feb 14, 2023

github-actions bot commented Feb 14, 2023

github-actions bot commented Feb 14, 2023

github-actions bot commented Feb 14, 2023

github-actions bot commented Feb 14, 2023

Aishwarya-U-R commented Feb 14, 2023

github-actions bot commented Feb 14, 2023

github-actions bot commented Feb 14, 2023

github-actions bot commented Feb 14, 2023

keyurparalkar commented Feb 15, 2023

github-actions bot commented Feb 15, 2023

github-actions bot commented Feb 15, 2023

github-actions bot commented Feb 15, 2023

github-actions bot commented Feb 15, 2023

github-actions bot commented Feb 15, 2023

Rhitottam commented Feb 15, 2023

github-actions bot commented Feb 15, 2023

feat: added column freeze and unfreeze functionality to table widget #18757

feat: added column freeze and unfreeze functionality to table widget #18757

Conversation

keyurparalkar commented Dec 7, 2022 • edited by laveena-en Loading

Description

Type of change

How Has This Been Tested?

Test Plan

Issues raised during DP testing

Checklist:

Dev activity

QA activity:

vercel bot commented Dec 7, 2022

vercel bot commented Dec 7, 2022 • edited Loading

keyurparalkar Dec 8, 2022

Choose a reason for hiding this comment

github-actions bot commented Feb 14, 2023

github-actions bot commented Feb 14, 2023

keyurparalkar commented Feb 14, 2023

github-actions bot commented Feb 14, 2023

github-actions bot commented Feb 14, 2023

github-actions bot commented Feb 14, 2023

github-actions bot commented Feb 14, 2023

github-actions bot commented Feb 14, 2023

Aishwarya-U-R commented Feb 14, 2023

github-actions bot commented Feb 14, 2023

github-actions bot commented Feb 14, 2023

github-actions bot commented Feb 14, 2023

keyurparalkar commented Feb 15, 2023

github-actions bot commented Feb 15, 2023

github-actions bot commented Feb 15, 2023

github-actions bot commented Feb 15, 2023

github-actions bot commented Feb 15, 2023

github-actions bot commented Feb 15, 2023

Rhitottam commented Feb 15, 2023

github-actions bot commented Feb 15, 2023

keyurparalkar commented Dec 7, 2022 •

edited by laveena-en

Loading

vercel bot commented Dec 7, 2022 •

edited

Loading