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

…18757)

**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.

app/client/cypress/integration/Regression_TestSuite/ClientSideTests/Widgets/TableV2/TableV2_Column_Order_spec.js

@@ -7,7 +7,7 @@ describe("Table Widget V2 column order maintained on column change validation",
   });
 
   it("Table widget V2 column order should be maintained after reorder and new column should be at the end", function() {
-    const thirdColumnSelector = `${commonlocators.TableV2Head} .tr div:nth-child(3)`;
+    const thirdColumnSelector = `${commonlocators.TableV2Head} .tr div:nth-child(3) .draggable-header`;
     const secondColumnSelector = `${commonlocators.TableV2Head} .tr div:nth-child(2) .draggable-header`;
 
     cy.get(thirdColumnSelector).trigger("dragstart");

app/client/cypress/integration/Regression_TestSuite/ClientSideTests/Widgets/TableV2/TableV2_Widget_Add_button_spec.js

@@ -296,11 +296,16 @@ describe("Table Widget V2 property pane feature validation", function() {
     //cy.closePropertyPane();
 
     // Click on the Menu Button
+    cy.get(".t--widget-tablewidgetv2 .bp3-button")
+      .first()
+      .scrollIntoView()
+      .should("be.visible");
     cy.get(".t--widget-tablewidgetv2 .bp3-button")
       .first()
       .click({
         force: true,
       });
+    cy.wait(2000);
     // check Menu Item 3 is disable
     cy.get(".bp3-menu-item")
       .eq(2)

app/client/cypress/integration/Regression_TestSuite/ClientSideTests/Widgets/TableV2/TableV2_spec.js

@@ -68,7 +68,7 @@ describe("Table Widget V2 Functionality", function() {
       expect(tabValue).to.be.equal("Michael Lawson");
     });
     // Sort Username Column
-    cy.contains('[role="columnheader"]', "userName")
+    cy.contains('[role="columnheader"] .draggable-header', "userName")
       .first()
       .click({
         force: true,