feat: add sortBy property to table select cell type

app/client/cypress/e2e/Regression/ClientSide/Widgets/TableV2/TableV2_Sorting_spec.js

@@ -1,15 +1,66 @@
+import { featureFlagIntercept } from "../../../../../support/Objects/FeatureFlags";
 import * as _ from "../../../../../support/Objects/ObjectsCore";
 const testdata = require("../../../../../fixtures/testdata.json");
+const commonlocators = require("../../../../../locators/commonlocators.json");
+import PageList from "../../../../../support/Pages/PageList";
+
+const demoTableData = `
+{{
+  [
+    {
+      role: 1,
+      id: 1,
+      name: "Alice Johnson",
+      email: "alice.johnson@example.com",
+      age: 28,
+      gender: 2
+    },
+    {
+      role: 2,
+      id: 2,
+      name: "Bob Smith",
+      email: "bob.smith@example.com",
+      age: 34,
+      gender: 1
+    },
+    {
+      role: 3,
+      id: 3,
+      name: "Charlie Brown",
+      email: "charlie.brown@example.com",
+      age: 25,
+      gender: 3
+    },
+    {
+      role: 2,
+      id: 4,
+      name: "Diana Prince",
+      email: "diana.prince@example.com",
+      age: 30,
+      gender: 2
+    },
+    {
+      role: 1,
+      id: 5,
+      name: "Evan Williams",
+      email: "evan.williams@example.com",
+      age: 27,
+      gender: 1
+    }
+  ]
+}}
+  `;
 
 describe(
   "Table Widget V2 Sorting",
   { tags: ["@tag.Widget", "@tag.Table"] },
   function () {
-    before(() => {
-      _.agHelper.AddDsl("tableV2NewDslWithPagination");
+    beforeEach(() => {
+      PageList.AddNewPage();
     });
 
-    it("verifies that table sorting works for a custom column with computed value even when it is renamed", function () {
+    it("1. Verifies that table sorting works for a custom column with computed value even when it is renamed", function () {
+      _.agHelper.AddDsl("tableV2NewDslWithPagination");
       cy.openPropertyPane("tablewidgetv2");
       cy.addColumnV2("customColumn1");
       cy.editColumn("customColumn1");
@@ -37,8 +88,8 @@ describe(
       // Rename customColumn1 to customColumn2
       cy.openPropertyPane("tablewidgetv2");
       cy.editColumn("customColumn1");
-      cy.get(".t--property-pane-title").click({ force: true });
-      cy.get(".t--property-pane-title")
+      cy.get(_.propPane._paneTitle).click({ force: true });
+      cy.get(_.propPane._paneTitle)
         .type("customColumn2", { delay: 300 })
         .type("{enter}");
 
@@ -64,5 +115,89 @@ describe(
         expect(data).to.eq("8");
       });
     });
+
+    it("2. Verifies that default sorting works for a select column using the value property", function () {
+      // This flag is turned on to allow the label show in the table select cell content
+      // when this feature is turned on fully, this flag will be removed
+      featureFlagIntercept({ release_table_cell_label_value_enabled: true });
+      cy.dragAndDropToCanvas("tablewidgetv2", { x: 350, y: 500 });
+      _.propPane.EnterJSContext("Table data", demoTableData);
+
+      // edit role column to select type
+      cy.openPropertyPane("tablewidgetv2");
+      cy.editColumn("role");
+      cy.get(commonlocators.changeColType).last().click();
+      cy.get(_.locators._dropdownText).children().contains("Select").click();
+      cy.wait("@updateLayout");
+
+      // add dummy select data to the column
+      cy.get(_.locators._controlOption).should("exist");
+      cy.updateCodeInput(
+        _.locators._controlOption,
+        `
+      {{
+        [
+          {"label": "Software Engineer",
+          "value": 1,},
+          {"label": "Product Manager",
+          "value": 2,},
+          {"label": "UX Designer",
+          "value": 3,}
+        ]  
+      }}
+    `,
+      );
+      cy.backFromPropertyPanel();
+
+      // sort the column in ascending order
+      cy.sortColumn("role", "ascending");
+      cy.readTableV2data(0, 0).then((data) => {
+        expect(data).to.eq("Software Engineer");
+      });
+    });
+
+    it("3. Verifies that sorting works for the select column type when sortBy is set to label", function () {
+      // This flag is turned on to allow the label show in the table select cell content
+      // when this feature is turned on fully, this flag will be removed
+      featureFlagIntercept({ release_table_cell_label_value_enabled: true });
+      cy.dragAndDropToCanvas("tablewidgetv2", { x: 350, y: 500 });
+      _.propPane.EnterJSContext("Table data", demoTableData);
+
+      // edit role column to select type
+      cy.openPropertyPane("tablewidgetv2");
+      cy.editColumn("role");
+      cy.get(commonlocators.changeColType).last().click();
+      cy.get(_.locators._dropdownText).children().contains("Select").click();
+
+      // change sortBy to label
+      cy.get(commonlocators.changeSortBy).last().click();
+      cy.get(_.locators._dropdownText).children().contains("Label").click();
+      cy.wait("@updateLayout");
+
+      // add dummy select data to the column
+      cy.get(_.locators._controlOption).should("exist");
+      cy.updateCodeInput(
+        _.locators._controlOption,
+        `
+      {{
+        [
+          {"label": "Software Engineer",
+          "value": 1,},
+          {"label": "Product Manager",
+          "value": 2,},
+          {"label": "UX Designer",
+          "value": 3,}
+        ]  
+      }}
+    `,
+      );
+      cy.backFromPropertyPanel();
+
+      // sort the column in ascending order
+      cy.sortColumn("role", "ascending");
+      cy.readTableV2data(0, 0).then((data) => {
+        expect(data).to.eq("Product Manager");
+      });
+    });
   },
 );

app/client/cypress/locators/commonlocators.json

@@ -106,6 +106,7 @@
   "editColTitle": ".t--property-pane-title",
   "editColText": ".t--property-pane-title span",
   "changeColType": ".t--property-control-columntype input",
+  "changeSortBy": ".t--property-control-sortby input",
   "selectedColType": ".t--property-control-columntype button span",
   "collapsesection": ".t--property-pane-section-collapse-general .bp3-icon",
   "selectTab": ".t--tab-Tab",
@@ -241,4 +242,4 @@
   "clientSideSearch": ".t--property-control-clientsidesearch input[type='checkbox']",
   "enableClientSideSearch": ".t--property-control-enableclientsidesearch input[type='checkbox']",
   "fixedFooterInput": ".t--property-control-fixedfooter input"
-}
+}

app/client/src/widgets/TableWidgetV2/component/Constants.ts

@@ -183,6 +183,7 @@ export interface SelectCellProperties {
   placeholderText?: string;
   resetFilterTextOnClose?: boolean;
   selectOptions?: DropdownOption[];
+  sortBy?: string;
 }
 
 export interface ImageCellProperties {
@@ -341,6 +342,7 @@ export interface EditActionColumnProperties {
   placeholderText?: string;
   resetFilterTextOnClose?: boolean;
   selectOptions?: DropdownOption[] | DropdownOption[][];
+  sortBy?: string;
 }
 
 export interface CurrencyColumnProperties {

app/client/src/widgets/TableWidgetV2/widget/derived.js

@@ -317,6 +317,48 @@ export default {
     const sortByColumnId = props.sortOrder.column;
 
     let sortedTableData;
+    /* 
+    Check if there are select columns, 
+    and if the columns are sorting by label instead of default value 
+    */
+    const selectColumnKeysWithSortByLabel = [];
+    Object.keys(primaryColumns).forEach((id) => {
+      if (
+        primaryColumns[id] &&
+        primaryColumns[id].columnType === "select" &&
+        primaryColumns[id].sortBy &&
+        primaryColumns[id].sortBy === "label" &&
+        primaryColumns[id].selectOptions &&
+        primaryColumns[id].selectOptions.length
+      ) {
+        selectColumnKeysWithSortByLabel.push(id);
+      }
+    });
+
+    /* 
+    If there are select columns, 
+    transform the specific columns data to show the label instead of the value for sorting 
+    */
+    let processedTableDataWithLabelInseadOfValue;
+    if (selectColumnKeysWithSortByLabel.length) {
+      const transformedValueToLabelTableData = processedTableData.map((row) => {
+        const newRow = { ...row };
+        selectColumnKeysWithSortByLabel.forEach((key) => {
+          const value = row[key];
+          const selectOptions =
+            primaryColumns[key].selectOptions[row.__originalIndex__];
+          const option = selectOptions.find((option) => option.value === value);
+
+          if (option) {
+            newRow[key] = option.label;
+          }
+        });
+
+        return newRow;
+      });
+      processedTableDataWithLabelInseadOfValue =
+        transformedValueToLabelTableData;
+    }
 
     if (sortByColumnId) {
       const sortBycolumn = columns.find(
@@ -352,7 +394,12 @@ export default {
         }
       };
 
-      sortedTableData = processedTableData.sort((a, b) => {
+      const transformedTableDataForSorting =
+        selectColumnKeysWithSortByLabel.length
+          ? processedTableDataWithLabelInseadOfValue
+          : processedTableData;
+
+      sortedTableData = transformedTableDataForSorting.sort((a, b) => {
         if (_.isPlainObject(a) && _.isPlainObject(b)) {
           if (
             isEmptyOrNil(a[sortByColumnOriginalId]) ||
@@ -405,6 +452,26 @@ export default {
           return isAscOrder ? 1 : 0;
         }
       });
+
+      if (selectColumnKeysWithSortByLabel.length) {
+        const transformedLabelToValueData = sortedTableData.map((row) => {
+          const newRow = { ...row };
+          selectColumnKeysWithSortByLabel.forEach((key) => {
+            const label = row[key];
+            const selectOptions =
+              primaryColumns[key].selectOptions[row.__originalIndex__];
+            const option = selectOptions.find(
+              (option) => option.label === label,
+            );
+            if (option) {
+              newRow[key] = option.value;
+            }
+          });
+
+          return newRow;
+        });
+        sortedTableData = transformedLabelToValueData;
+      }
     } else {
       sortedTableData = [...processedTableData];
     }

app/client/src/widgets/TableWidgetV2/widget/propertyConfig/PanelConfig/Select.ts

@@ -7,6 +7,7 @@ import {
   hideByColumnType,
   selectColumnOptionsValidation,
 } from "../../propertyUtils";
+import { TableSelectColumnOptionKeys } from "widgets/TableWidgetV2/component/Constants";
 
 export default {
   sectionName: "Select properties",
@@ -37,6 +38,32 @@ export default {
         return hideByColumnType(props, propertyPath, [ColumnTypes.SELECT]);
       },
     },
+    {
+      propertyName: "sortBy",
+      defaultValue: "value",
+      helpText: "Choose whether to sort the select cell by the value or label",
+      label: "Sort by",
+      controlType: "DROP_DOWN",
+      isBindProperty: true,
+      isJSConvertible: false,
+      isTriggerProperty: false,
+      options: [
+        {
+          label: "Label",
+          value: TableSelectColumnOptionKeys.LABEL,
+        },
+        {
+          label: "Value",
+          value: TableSelectColumnOptionKeys.VALUE,
+        },
+      ],
+      validation: {
+        type: ValidationTypes.TEXT,
+        params: {
+          allowedValues: ["label", "value"],
+        },
+      },
+    },
     {
       propertyName: "allowSameOptionsInNewRow",
       defaultValue: true,