Table sort column APIs

app/client/cypress/fixtures/testdata.json

@@ -45,6 +45,7 @@
   "apiFormDataBodyType": "x-www-form-urlencoded",
   "defaultMoustacheData": "{{Input1.text",
   "defaultInputWidget": "{{Table1.selectedRow.id",
+  "sortedColumn": "{{Table1.sortOrder.column",
   "deafultDropDownWidget": [
     {
       "label": "{{Table1.selectedRow.email}}",

app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/Binding/Bind_InputWidget_Table_Sorting_spec.js

@@ -52,4 +52,32 @@ describe("Binding the Table and input Widget", function() {
         .should("contain", tabValue);
     });
   });
+
+  it("validation of column id displayed in input widgets based on sorted column", function() {
+    cy.SearchEntityandOpen("Input1");
+    cy.get(".t--property-control-defaulttext .CodeMirror  textarea")
+      .first()
+      .focus()
+      .type("{ctrl}{shift}{downarrow}")
+      .then(($cm) => {
+        if ($cm.val() !== "") {
+          cy.get(".t--property-control-defaulttext .CodeMirror textarea")
+            .first()
+            .clear({
+              force: true,
+            });
+        }
+      });
+    cy.get(widgetsPage.defaultInput).type(testdata.sortedColumn);
+    cy.get(commonlocators.editPropCrossButton).click({ force: true });
+    cy.wait("@updateLayout").should(
+      "have.nested.property",
+      "response.body.responseMeta.status",
+      200,
+    );
+    cy.get(publish.inputWidget + " " + "input")
+      .first()
+      .invoke("attr", "value")
+      .should("contain", "id");
+  });
 });

app/client/src/components/designSystems/appsmith/TableComponent/Constants.ts

@@ -62,6 +62,11 @@ export enum OperatorTypes {
   AND = "AND",
 }
 
+export enum SortOrderTypes {
+  asc = "asc",
+  desc = "desc",
+}
+
 export interface TableStyles {
   cellBackground?: string;
   textColor?: string;

app/client/src/constants/AppsmithActionConstants/ActionConstants.tsx

@@ -75,6 +75,7 @@ export enum EventType {
   ON_RATE_CHANGED = "ON_RATE_CHANGED",
   ON_IFRAME_URL_CHANGED = "ON_IFRAME_URL_CHANGED",
   ON_IFRAME_MESSAGE_RECEIVED = "ON_IFRAME_MESSAGE_RECEIVED",
+  ON_SORT = "ON_SORT",
 }
 
 export type ActionType =

app/client/src/entities/Widget/utils.test.ts

@@ -160,6 +160,7 @@ describe("getAllPathsFromPropertyConfig", () => {
         onRowSelected: true,
         onPageChange: true,
         onSearchTextChanged: true,
+        onSort: true,
         onPageSizeChange: true,
         "primaryColumns.status.onClick": true,
       },

app/client/src/utils/autocomplete/EntityDefinitions.ts

@@ -70,6 +70,11 @@ export const entityDefinitions = {
     pageSize: "number",
     isVisible: isVisible,
     searchText: "string",
+    sortOrder: {
+      column: "string",
+      asc: "bool",
+      order: "string",
+    },
   }),
   VIDEO_WIDGET: {
     "!doc":

app/client/src/widgets/TableWidget/TablePropertyPaneConfig.ts

@@ -930,6 +930,15 @@ export default [
         isBindProperty: true,
         isTriggerProperty: true,
       },
+      {
+        helpText: "Triggers an action when a table column is sorted",
+        propertyName: "onSort",
+        label: "onSort",
+        controlType: "ACTION_SELECTOR",
+        isJSConvertible: true,
+        isBindProperty: true,
+        isTriggerProperty: true,
+      },
     ],
   },
   {

app/client/src/widgets/TableWidget/TableWidgetConstants.ts

@@ -3,6 +3,7 @@ import {
   CompactMode,
   ReactTableFilter,
   TableStyles,
+  SortOrderTypes,
 } from "components/designSystems/appsmith/TableComponent/Constants";
 import { WidgetProps } from "widgets/BaseWidget";
 import { WithMeta } from "widgets/MetaHOC";
@@ -19,6 +20,7 @@ export interface TableWidgetProps extends WidgetProps, WithMeta, TableStyles {
   pageSize: number;
   onRowSelected?: string;
   onSearchTextChanged: string;
+  onSort: string;
   selectedRowIndex?: number;
   selectedRowIndices: number[];
   serverSidePaginationEnabled?: boolean;
@@ -34,9 +36,10 @@ export interface TableWidgetProps extends WidgetProps, WithMeta, TableStyles {
   compactMode?: CompactMode;
   primaryColumns: Record<string, ColumnProperties>;
   derivedColumns: Record<string, ColumnProperties>;
-  sortedColumn?: {
+  sortOrder?: {
     column: string;
     asc: boolean;
+    order: SortOrderTypes;
   };
 }
 

app/client/src/widgets/TableWidget/derived.js

@@ -144,8 +144,8 @@ export default {
         .filter(Boolean);
       idsNotToShow.forEach((id) => delete allColumns[id]);
     }
-    const sortColumn = props.sortedColumn?.column;
-    const sortOrder = props.sortedColumn?.asc;
+    const sortColumn = props.sortOrder?.column;
+    const sortOrder = props.sortOrder?.asc;
     if (
       props.columnOrder &&
       Array.isArray(props.columnOrder) &&
@@ -234,9 +234,9 @@ export default {
     const columns = props.tableColumns;
 
     let sortedTableData;
-    if (props.sortedColumn) {
-      const sortedColumn = props.sortedColumn.column;
-      const sortOrder = props.sortedColumn.asc;
+    if (props.sortOrder) {
+      const sortedColumn = props.sortOrder.column;
+      const sortOrder = props.sortOrder.asc;
       const column = columns.find((column) => column.id === sortedColumn);
       const columnType =
         column && column.columnType ? column.columnType : "text";

app/client/src/widgets/TableWidget/derived.test.js

@@ -6,7 +6,7 @@ describe("Validates Derived Properties", () => {
     const { getTableColumns } = derivedProperty;
     const input = {
       sanitizedTableData: [],
-      sortedColumn: undefined,
+      sortOrder: undefined,
       columnOrder: ["id", "another"],
     };
     const expected = [];
@@ -25,7 +25,7 @@ describe("Validates Derived Properties", () => {
         { id: 123, name: "John Doe" },
         { id: 234, name: "Jane Doe" },
       ],
-      sortedColumn: { column: "id", asc: false },
+      sortOrder: { column: "id", asc: false },
       columnOrder: ["name", "id"],
     };
     const expected = [
@@ -77,7 +77,7 @@ describe("Validates Derived Properties", () => {
         { id: 123, name: "John Doe" },
         { id: 234, name: "Jane Doe" },
       ],
-      sortedColumn: { column: "id", asc: false },
+      sortOrder: { column: "id", asc: false },
       columnOrder: ["name", "id"],
       primaryColumns: {
         id: {
@@ -168,7 +168,7 @@ describe("Validates Derived Properties", () => {
         { id: 123, name: "John Doe" },
         { id: 234, name: "Jane Doe" },
       ],
-      sortedColumn: { column: "id", asc: false },
+      sortOrder: { column: "id", asc: false },
       columnOrder: ["name", "id"],
       primaryColumns: {
         id: {
@@ -276,7 +276,7 @@ describe("Validates Derived Properties", () => {
         { id: 123, name: "John Doe" },
         { id: 234, name: "Jane Doe" },
       ],
-      sortedColumn: { column: "id", asc: false },
+      sortOrder: { column: "id", asc: false },
       columnOrder: ["name", "id"],
       primaryColumns: {
         id: {
@@ -403,7 +403,7 @@ describe("Validates Derived Properties", () => {
         { id: 123, name: "John Doe" },
         { id: 234, name: "Jane Doe" },
       ],
-      sortedColumn: { column: "id", asc: false },
+      sortOrder: { column: "id", asc: false },
       columnOrder: ["name", "id"],
       primaryColumns: {
         id: {
@@ -531,7 +531,7 @@ describe("Validates Derived Properties", () => {
     const { getFilteredTableData } = derivedProperty;
     const input = {
       sanitizedTableData: [],
-      sortedColumn: { column: "id", asc: false },
+      sortOrder: { column: "id", asc: false },
       columnOrder: ["name", "id"],
       primaryColumns: {},
       columns: [],
@@ -550,7 +550,7 @@ describe("Validates Derived Properties", () => {
         { id: 123, name: "John Doe" },
         { id: 234, name: "Jane Doe" },
       ],
-      sortedColumn: { column: "id", asc: false },
+      sortOrder: { column: "id", asc: false },
       columnOrder: ["name", "id"],
       primaryColumns: {
         id: {
@@ -691,7 +691,7 @@ describe("Validates Derived Properties", () => {
           operator: "OR",
         },
       ],
-      sortedColumn: { column: "id", asc: false },
+      sortOrder: { column: "id", asc: false },
       columnOrder: ["name", "id"],
       primaryColumns: {
         id: {

app/client/src/widgets/TableWidget/index.tsx

@@ -30,6 +30,7 @@ import {
   ColumnTypes,
   CompactModeTypes,
   CompactMode,
+  SortOrderTypes,
 } from "components/designSystems/appsmith/TableComponent/Constants";
 import tablePropertyPaneConfig from "./TablePropertyPaneConfig";
 import { BatchPropertyUpdatePayload } from "actions/controlActions";
@@ -719,14 +720,21 @@ class TableWidget extends BaseWidget<TableWidgetProps, WidgetState> {
 
   handleColumnSorting = (column: string, asc: boolean) => {
     this.resetSelectedRowIndex();
-    if (column === "") {
-      this.props.updateWidgetMetaProperty("sortedColumn", undefined);
-    } else {
-      this.props.updateWidgetMetaProperty("sortedColumn", {
-        column: column,
-        asc: asc,
-      });
-    }
+    const sortOrderProps =
+      column === ""
+        ? undefined
+        : {
+            column: column,
+            asc: asc,
+            order: asc ? SortOrderTypes.asc : SortOrderTypes.desc,
+          };
+    this.props.updateWidgetMetaProperty("sortOrder", sortOrderProps, {
+      triggerPropertyName: "onSort",
+      dynamicString: this.props.onSort,
+      event: {
+        type: EventType.ON_SORT,
+      },
+    });
   };
 
   handleResizeColumn = (columnSizeMap: { [key: string]: number }) => {