feat: add sortBy property to table select cell type

app/client/cypress/e2e/Regression/ClientSide/Widgets/TableV2/columnTypes/Select1_spec.ts

@@ -5,6 +5,7 @@ import {
 
 const commonlocators = require("../../../../../../locators/commonlocators.json");
 import * as _ from "../../../../../../support/Objects/ObjectsCore";
+import { featureFlagIntercept } from "../../../../../../support/Objects/FeatureFlags";
 
 describe(
   "Table widget - Select column type functionality",
@@ -153,23 +154,43 @@ describe(
     });
 
     it("5. should check that on option select is working", () => {
+      featureFlagIntercept({ release_table_cell_label_value_enabled: true });
       cy.openPropertyPane("tablewidgetv2");
       cy.editColumn("step");
       cy.get(".t--property-control-onoptionchange .t--js-toggle").click();
       cy.updateCodeInput(
         ".t--property-control-onoptionchange",
         `
       {{showAlert(currentRow.step)}}
+    `,
+      );
+      cy.updateCodeInput(
+        ".t--property-control-options",
+        `
+      [
+        {
+          "label": "#1label",
+          "value": "#1value"
+        },
+        {
+          "label": "#2label",
+          "value": "#2value"
+        },
+        {
+          "label": "#3label",
+          "value": "#3value"
+        }
+      ]
     `,
       );
       cy.editTableSelectCell(0, 0);
-      cy.get(".menu-item-link").contains("#3").click();
+      cy.get(".menu-item-link").contains("#3label").click();
 
-      _.agHelper.ValidateToastMessage("#3");
+      _.agHelper.ValidateToastMessage("#3value");
 
       cy.get(".menu-virtual-list").should("not.exist");
       cy.readTableV2data(0, 0).then((val) => {
-        expect(val).to.equal("#3");
+        expect(val).to.equal("#3label");
       });
       cy.discardTableRow(4, 0);
     });

app/client/src/ce/entities/FeatureFlag.ts

@@ -34,6 +34,8 @@ export const FEATURE_FLAG = {
     "rollout_remove_feature_walkthrough_enabled",
   release_drag_drop_building_blocks_enabled:
     "release_drag_drop_building_blocks_enabled",
+  release_table_cell_label_value_enabled:
+    "release_table_cell_label_value_enabled",
   rollout_js_enabled_one_click_binding_enabled:
     "rollout_js_enabled_one_click_binding_enabled",
   rollout_side_by_side_enabled: "rollout_side_by_side_enabled",
@@ -63,6 +65,7 @@ export const DEFAULT_FEATURE_FLAG_VALUE: FeatureFlags = {
   license_gac_enabled: false,
   release_anvil_enabled: false,
   release_drag_drop_building_blocks_enabled: false,
+  release_table_cell_label_value_enabled: false,
   license_git_branch_protection_enabled: false,
   release_git_autocommit_feature_enabled: false,
   license_git_continuous_delivery_enabled: false,

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 {
@@ -571,3 +573,8 @@ export const noOfItemsToDisplay = 4;
 
 // 12px for the (noOfItemsToDisplay+ 1) item to let the user know there are more items to scroll
 export const extraSpace = 12;
+
+export enum TableSelectColumnOptionKeys {
+  LABEL = "label",
+  VALUE = "value",
+}

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

@@ -1,13 +1,18 @@
-import React from "react";
-import SelectComponent from "widgets/SelectWidget/component";
+import { FEATURE_FLAG } from "@appsmith/entities/FeatureFlag";
+import React, { useCallback, useMemo } from "react";
 import styled from "styled-components";
+import { useFeatureFlag } from "utils/hooks/useFeatureFlag";
+import SelectComponent from "widgets/SelectWidget/component";
 import type { DropdownOption } from "widgets/SelectWidget/constants";
+import type { EditableCellActions } from "widgets/TableWidgetV2/constants";
 import type { BaseCellComponentProps } from "../Constants";
-import { EDITABLE_CELL_PADDING_OFFSET, TABLE_SIZES } from "../Constants";
+import {
+  EDITABLE_CELL_PADDING_OFFSET,
+  TABLE_SIZES,
+  TableSelectColumnOptionKeys,
+} from "../Constants";
 import { CellWrapper } from "../TableStyledWrappers";
-import type { EditableCellActions } from "widgets/TableWidgetV2/constants";
 import { BasicCell } from "./BasicCell";
-import { useCallback } from "react";
 
 const StyledSelectComponent = styled(SelectComponent)<{
   accentColor: string;
@@ -189,6 +194,23 @@ export const SelectCell = (props: SelectProps) => {
     .map((d: DropdownOption) => d.value)
     .indexOf(value);
 
+  const releaseTableSelectCellLabelValue = useFeatureFlag(
+    FEATURE_FLAG.release_table_cell_label_value_enabled,
+  );
+
+  const cellLabelValue = useMemo(() => {
+    if (releaseTableSelectCellLabelValue) {
+      const selectedOption = options.find(
+        (option) => option[TableSelectColumnOptionKeys.VALUE] === value,
+      );
+      return selectedOption
+        ? selectedOption[TableSelectColumnOptionKeys.LABEL]
+        : "";
+    } else {
+      return value;
+    }
+  }, [releaseTableSelectCellLabelValue, value, options]);
+
   if (isEditable && isCellEditable && isCellEditMode) {
     return (
       <StyledCellWrapper
@@ -227,7 +249,7 @@ export const SelectCell = (props: SelectProps) => {
           resetFilterTextOnClose={resetFilterTextOnClose}
           selectedIndex={selectedIndex}
           serverSideFiltering={serverSideFiltering}
-          value={value}
+          value={cellLabelValue}
           widgetId={""}
           width={width}
         />
@@ -257,7 +279,7 @@ export const SelectCell = (props: SelectProps) => {
         tableWidth={tableWidth}
         textColor={textColor}
         textSize={textSize}
-        value={value}
+        value={cellLabelValue}
         verticalAlignment={verticalAlignment}
       />
     );

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

@@ -317,6 +317,45 @@ 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"
+      ) {
+        selectColumnKeysWithSortByLabel.push(id);
+      }
+    });
+
+    /* 
+    If there are select columns, 
+    transform the specific columns data to show the label instead of the value for sorting 
+    */
+    let transformedSortTableData;
+    if (selectColumnKeysWithSortByLabel.length) {
+      const transformedValueToLabelData = 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;
+      });
+      transformedSortTableData = transformedValueToLabelData;
+    }
 
     if (sortByColumnId) {
       const sortBycolumn = columns.find(
@@ -352,7 +391,11 @@ export default {
         }
       };
 
-      sortedTableData = processedTableData.sort((a, b) => {
+      const tableDataForSorting = selectColumnKeysWithSortByLabel.length
+        ? transformedSortTableData
+        : processedTableData;
+
+      sortedTableData = tableDataForSorting.sort((a, b) => {
         if (_.isPlainObject(a) && _.isPlainObject(b)) {
           if (
             isEmptyOrNil(a[sortByColumnOriginalId]) ||
@@ -405,6 +448,26 @@ export default {
           return isAscOrder ? 1 : 0;
         }
       });
+
+      if (selectColumnKeysWithSortByLabel.length) {
+        const finalSortedTableData = 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 = finalSortedTableData;
+      }
     } 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,