added currentExpandedRow, currentExpandedRows and setExpandedRows in table comp

Author: raheeliftikhar5

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

@@ -724,6 +724,24 @@ TableTmpComp = withMethodExposing(TableTmpComp, [
       comp.children.columns.dispatchClearInsertSet();
     },
   },
+  {
+    method: {
+      name: "setExpandedRows",
+      description: "",
+      params: [
+        { name: "expandedRows", type: "arrayString"},
+      ],
+    },
+    execute: (comp, values) => {
+      const expandedRows = values[0];
+      if (!isArray(expandedRows)) {
+        return Promise.reject("setExpandedRows function only accepts array of string i.e. ['1', '2', '3']")
+      }
+      if (expandedRows && isArray(expandedRows)) {
+        comp.children.currentExpandedRows.dispatchChangeValueAction(expandedRows as string[]);
+      }
+    },
+  }
 ]);
 
 // exposing data
@@ -978,5 +996,24 @@ export const TableComp = withExposingConfigs(TableTmpComp, [
     },
     trans("table.selectedCellDesc")
   ),
+  depsConfig({
+    name: "currentExpandedRow",
+    desc: trans("table.sortDesc"),
+    depKeys: ["currentExpandedRows"],
+    func: (input) => {
+      if (input.currentExpandedRows.length > 0) {
+        return input.currentExpandedRows[input.currentExpandedRows.length - 1];
+      }
+      return "";
+    },
+  }),
+  depsConfig({
+    name: "currentExpandedRows",
+    desc: trans("table.sortDesc"),
+    depKeys: ["currentExpandedRows"],
+    func: (input) => {
+      return input.currentExpandedRows;
+    },
+  }),
   new NameConfig("data", trans("table.dataDesc")),
 ]);

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

@@ -28,7 +28,7 @@ import { CompNameContext, EditorContext } from "comps/editorState";
 import { BackgroundColorContext } from "comps/utils/backgroundColorContext";
 import { PrimaryColor } from "constants/style";
 import { trans } from "i18n";
-import _ from "lodash";
+import _, { isEqual } from "lodash";
 import { darkenColor, isDarkColor, isValidColor, ScrollBar } from "lowcoder-design";
 import React, { Children, useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
 import { Resizable } from "react-resizable";
@@ -48,6 +48,7 @@ import { TableSummary } from "./tableSummaryComp";
 import Skeleton from "antd/es/skeleton";
 import { SkeletonButtonProps } from "antd/es/skeleton/Button";
 import { ThemeContext } from "@lowcoder-ee/comps/utils/themeContext";
+import { useUpdateEffect } from "react-use";
 
 export const EMPTY_ROW_KEY = 'empty_row';
 
@@ -814,6 +815,7 @@ export const TableCompView = React.memo((props: {
   onRefresh: (allQueryNames: Array<string>, setLoading: (loading: boolean) => void) => void;
   onDownload: (fileName: string) => void;
 }) => {
+  const [expandedRowKeys, setExpandedRowKeys] = useState<string[]>([]);
   const [emptyRowsMap, setEmptyRowsMap] = useState<Record<string, RecordType>>({});
   const editorState = useContext(EditorContext);
   const currentTheme = useContext(ThemeContext)?.theme;
@@ -856,6 +858,7 @@ export const TableCompView = React.memo((props: {
   const size = useMemo(() => compChildren.size.getView(), [compChildren.size]);
   const editModeClicks = useMemo(() => compChildren.editModeClicks.getView(), [compChildren.editModeClicks]);
   const onEvent = useMemo(() => compChildren.onEvent.getView(), [compChildren.onEvent]);
+  const currentExpandedRows = useMemo(() => compChildren.currentExpandedRows.getView(), [compChildren.currentExpandedRows]);
   const dynamicColumn = compChildren.dynamicColumn.getView();
   const dynamicColumnConfig = useMemo(
     () => compChildren.dynamicColumnConfig.getView(),
@@ -955,6 +958,18 @@ export const TableCompView = React.memo((props: {
     updateEmptyRows();
   }, [updateEmptyRows]);
 
+  useUpdateEffect(() => {
+    if (!isEqual(currentExpandedRows, expandedRowKeys)) {
+      compChildren.currentExpandedRows.dispatchChangeValueAction(expandedRowKeys);
+    }
+  }, [expandedRowKeys]);
+
+  useUpdateEffect(() => {
+    if (!isEqual(currentExpandedRows, expandedRowKeys)) {
+      setExpandedRowKeys(currentExpandedRows);
+    }
+  }, [currentExpandedRows]);
+
   const pageDataInfo = useMemo(() => {
     // Data pagination
     let pagedData = data;
@@ -1104,7 +1119,11 @@ export const TableCompView = React.memo((props: {
                   } else {
                     handleChangeEvent('rowShrink')
                   }
-                }
+                },
+                onExpandedRowsChange: (expandedRowKeys) => {
+                  setExpandedRowKeys(expandedRowKeys as unknown as string[]);
+                },
+                expandedRowKeys: expandedRowKeys,
               }}
               // rowKey={OB_ROW_ORI_INDEX}
               rowColorFn={compChildren.rowColor.getView() as any}

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

@@ -265,6 +265,7 @@ const tableChildrenMap = {
   selectedCell: stateComp<JSONObject>({}),
   inlineAddNewRow: BoolControl,
   editModeClicks: dropdownControl(editModeClickOptions, "single"),
+  currentExpandedRows: stateComp<string[]>([]),
 };
 
 export const TableInitComp = (function () {