added multi-sorting for table columns

Author: raheeliftikhar5

client/packages/lowcoder/src/comps/comps/tableComp/tableComp.tsx

@@ -46,6 +46,7 @@ import {
   RecordNode,
   RecordNodeToValue,
   routeByNameAction,
+  ValueAndMsg,
   withFunction,
   wrapChildAction,
 } from "lowcoder-core";
@@ -55,7 +56,7 @@ import { lastValueIfEqual, shallowEqual } from "util/objectUtils";
 import { IContainer } from "../containerBase";
 import { getSelectedRowKeys } from "./selectionControl";
 import { compTablePropertyView } from "./tablePropertyView";
-import { RowColorComp, RowHeightComp, TableChildrenView, TableInitComp } from "./tableTypes";
+import { RowColorComp, RowHeightComp, SortValue, TableChildrenView, TableInitComp } from "./tableTypes";
 
 import { useContext, useState } from "react";
 import { EditorContext } from "comps/editorState";
@@ -295,19 +296,37 @@ export class TableImplComp extends TableInitComp implements IContainer {
 
   // handle sort: data -> sortedData
   sortDataNode() {
-    const nodes = {
+    const nodes: {
+      data: Node<JSONObject[]>;
+      sort: Node<SortValue[]>;
+      dataIndexes: RecordNode<Record<string, Node<string>>>;
+      sortables: RecordNode<Record<string, Node<ValueAndMsg<boolean>>>>;
+      withParams: RecordNode<_.Dictionary<any>>,
+  } = {
       data: this.children.data.exposingNode(),
       sort: this.children.sort.node(),
       dataIndexes: this.children.columns.getColumnsNode("dataIndex"),
       sortables: this.children.columns.getColumnsNode("sortable"),
+      withParams: this.children.columns.withParamsNode(),
     };
     const sortedDataNode = withFunction(fromRecord(nodes), (input) => {
       const { data, sort, dataIndexes, sortables } = input;
-      const columns = _(dataIndexes)
+      const sortColumns = _(dataIndexes)
         .mapValues((dataIndex, idx) => ({ sortable: !!sortables[idx] }))
         .mapKeys((sortable, idx) => dataIndexes[idx])
         .value();
-      const sortedData = sortData(data, columns, sort);
+      const dataColumns = _(dataIndexes)
+        .mapValues((dataIndex, idx) => ({
+          dataIndex,
+          render: input.withParams[idx] as any,
+        }))
+        .value();
+      const updatedData: Array<RecordType> = data.map((row, index) => ({
+        ...row,
+        [OB_ROW_ORI_INDEX]: index + "",
+      }));
+      const originalData = getOriDisplayData(updatedData, 1000, Object.values(dataColumns))
+      const sortedData = sortData(originalData, sortColumns, sort);
       // console.info( "sortNode. data: ", data, " sort: ", sort, " columns: ", columns, " sortedData: ", sortedData);
       return sortedData;
     });

client/packages/lowcoder/src/comps/comps/tableComp/tableUtils.tsx

@@ -340,7 +340,7 @@ export function columnsToAntdFormat(
       status: StatusType;
     }[];
     const title = renderTitle({ title: column.title, tooltip: column.titleTooltip, editable: column.editable });
-   
+
     return {
       key: `${column.dataIndex}-${mIndex}`,
       title: column.showTitle ? title : '',
@@ -399,7 +399,7 @@ export function columnsToAntdFormat(
       },
       ...(column.sortable
         ? {
-            sorter: true,
+            sorter: { multiple: (sortedColumns.length - mIndex) + 1 },
             sortOrder: sortMap.get(column.dataIndex),
             showSorterTooltip: false,
           }