From 65aeca57306ddcf300f4d6b944e954f767122109 Mon Sep 17 00:00:00 2001
From: RAHEEL <mraheeliftikhar1994@gmail.com>
Date: Fri, 16 Aug 2024 16:42:49 +0500
Subject: [PATCH 01/10] allow table summary row

---
 .../lowcoder/src/comps/comps/avatarGroup.tsx  |  27 +-
 .../tableComp/column/tableColumnListComp.tsx  | 138 ++++++
 .../column/tableSummaryColumnComp.tsx         | 432 ++++++++++++++++++
 .../src/comps/comps/tableComp/tableComp.tsx   |  15 +
 .../comps/comps/tableComp/tableCompView.tsx   |  48 +-
 .../comps/tableComp/tablePropertyView.tsx     |   9 +
 .../comps/tableComp/tableSummaryComp.tsx      | 391 ++++++++++++++++
 .../src/comps/comps/tableComp/tableTypes.tsx  |   2 +
 8 files changed, 1060 insertions(+), 2 deletions(-)
 create mode 100644 client/packages/lowcoder/src/comps/comps/tableComp/column/tableSummaryColumnComp.tsx
 create mode 100644 client/packages/lowcoder/src/comps/comps/tableComp/tableSummaryComp.tsx

diff --git a/client/packages/lowcoder/src/comps/comps/avatarGroup.tsx b/client/packages/lowcoder/src/comps/comps/avatarGroup.tsx
index cba007ee1..ef6b55fee 100644
--- a/client/packages/lowcoder/src/comps/comps/avatarGroup.tsx
+++ b/client/packages/lowcoder/src/comps/comps/avatarGroup.tsx
@@ -12,7 +12,7 @@ import { clickEvent, eventHandlerControl, refreshEvent } from "../controls/event
 import styled from "styled-components";
 import { useContext, ReactElement, useEffect } from "react";
 import { MultiCompBuilder, stateComp, withDefault } from "../generators";
-import { EditorContext } from "comps/editorState";
+import { CompNameContext, EditorContext } from "comps/editorState";
 import { IconControl } from "../controls/iconControl";
 import { ColorControl } from "../controls/colorControl";
 import { optionsControl } from "../controls/optionsControl";
@@ -105,6 +105,30 @@ const childrenMap = {
 };
 
 const AvatarGroupView = (props: RecordConstructorToView<typeof childrenMap> & { dispatch: (action: CompAction) => void; }) => {
+  const comp = useContext(EditorContext).getUICompByName(useContext(CompNameContext));
+  
+  const updateAvatars = () => {
+    debugger;
+    if (!comp) return;
+    // comp?.children.comp.children?.avatars?.children.manual.dispatchChangeValueAction({
+    //   initOptions: [
+    //     { src: "https://api.dicebear.com/7.x/miniavs/svg?seed=1", label: String.fromCharCode(65 + Math.ceil(Math.random() * 25)) },
+    //     // { AvatarIcon: "/icon:antd/startwotone" },
+    //     // { label: String.fromCharCode(65 + Math.ceil(Math.random() * 25)) },
+    //     // { label: String.fromCharCode(65 + Math.ceil(Math.random() * 25)) },
+    //   ],
+    // });
+    // comp?.children.comp.children?.avatars.children.manual.children.manual.dispatch([
+    //   { src: "https://api.dicebear.com/7.x/miniavs/svg?seed=1", label: String.fromCharCode(65 + Math.ceil(Math.random() * 25)) }
+    // ])
+    comp?.children.comp.children?.avatars.children.manual.children.manual.dispatch(
+      comp?.children.comp.children?.avatars.children.manual.children.manual.setChildrensAction([
+        { src: "https://api.dicebear.com/7.x/miniavs/svg?seed=1", label: String.fromCharCode(65 + Math.ceil(Math.random() * 25)) }
+      ])
+    );
+  }
+  
+
   return (
     <Container
       $style={props.style}
@@ -127,6 +151,7 @@ const AvatarGroupView = (props: RecordConstructorToView<typeof childrenMap> & {
                     onClick={() => {
                       props.onEvent("click")
                       props.dispatch(changeChildAction("currentAvatar", item as JSONObject, false));
+                      updateAvatars();
                     }}
                   >
                     {item.label}
diff --git a/client/packages/lowcoder/src/comps/comps/tableComp/column/tableColumnListComp.tsx b/client/packages/lowcoder/src/comps/comps/tableComp/column/tableColumnListComp.tsx
index 4a3c5237b..04ea448cc 100644
--- a/client/packages/lowcoder/src/comps/comps/tableComp/column/tableColumnListComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/tableComp/column/tableColumnListComp.tsx
@@ -17,11 +17,13 @@ import {
 import { shallowEqual } from "react-redux";
 import { JSONObject, JSONValue } from "util/jsonTypes";
 import { lastValueIfEqual } from "util/objectUtils";
+import { SummaryColumnComp } from "./tableSummaryColumnComp";
 
 /**
  * column list
  */
 const ColumnListTmpComp = list(ColumnComp);
+const SummaryColumnListTmpComp = list(SummaryColumnComp);
 
 /**
  * rowExample is used for code prompts
@@ -190,3 +192,139 @@ export class ColumnListComp extends ColumnListTmpComp {
     return this.forEachAction(ColumnComp.setSelectionAction(key));
   }
 }
+
+export class SummaryColumnListComp extends SummaryColumnListTmpComp {
+  override reduce(action: CompAction): this {
+    if (isMyCustomAction<ActionDataType>(action, "dataChanged")) {
+      const rowExample = action.value.rowExample;
+      const { readOnly } = getReduceContext();
+      let comp = this;
+      if (action.value.doGeneColumn && (action.value.dynamicColumn || !readOnly)) {
+        const actions = this.geneColumnsAction(rowExample, action.value.data);
+        comp = this.reduce(this.multiAction(actions));
+      }
+      return comp;
+    }
+    return super.reduce(action);
+  }
+
+  getChangeSet() {
+    const changeSet: Record<string, Record<string, JSONValue>> = {};
+    const columns = this.getView();
+    columns.forEach((column) => {
+      const columnChangeSet = column.getChangeSet();
+      Object.keys(columnChangeSet).forEach((dataIndex) => {
+        Object.keys(columnChangeSet[dataIndex]).forEach((key) => {
+          if (!_.isNil(columnChangeSet[dataIndex][key])) {
+            if (!changeSet[key]) changeSet[key] = {};
+            changeSet[key][dataIndex] = columnChangeSet[dataIndex][key];
+          }
+        });
+      });
+    });
+    return changeSet;
+  }
+
+  dispatchClearChangeSet() {
+    const columns = this.getView();
+    columns.forEach((column) => column.dispatchClearChangeSet());
+  }
+
+  /**
+   * If the table data changes, call this method to trigger the action
+   */
+  dataChangedAction(param: {
+    rowExample: JSONObject;
+    doGeneColumn: boolean;
+    dynamicColumn: boolean;
+    data: Array<JSONObject>;
+  }) {
+    return customAction<ActionDataType>(
+      {
+        type: "dataChanged",
+        ...param,
+      },
+      true
+    );
+  }
+
+  /**
+   * According to the data, adjust the column
+   */
+  private geneColumnsAction(rowExample: RowExampleType, data: Array<JSONObject>) {
+    // If no data, return directly
+    if (rowExample === undefined || rowExample === null) {
+      return [];
+    }
+    const dataKeys = Object.keys(rowExample);
+    if (dataKeys.length === 0) {
+      return [];
+    }
+    const columnsView = this.getView();
+    const actions: Array<any> = [];
+    let deleteCnt = 0;
+    columnsView.forEach((column, index) => {
+      if (column.getView().isCustom) {
+        return;
+      }
+      const dataIndex = column.getView().dataIndex;
+      if (dataIndex === COLUMN_CHILDREN_KEY || !dataKeys.find((key) => dataIndex === key)) {
+        // to Delete
+        actions.push(this.deleteAction(index - deleteCnt));
+        deleteCnt += 1;
+      }
+    });
+    // The order should be the same as the data
+    dataKeys.forEach((key) => {
+      if (key === COLUMN_CHILDREN_KEY && supportChildrenTree(data)) {
+        return;
+      }
+      if (!columnsView.find((column) => column.getView().dataIndex === key)) {
+        // to Add
+        actions.push(this.pushAction(newPrimaryColumn(key, calcColumnWidth(key, data))));
+      }
+    });
+    if (actions.length === 0) {
+      return [];
+    }
+    return actions;
+  }
+
+  withParamsNode() {
+    const columns = this.getView();
+    const nodes = _(columns)
+      .map((col) => col.children.render.getOriginalComp().node())
+      .toPairs()
+      .fromPairs()
+      .value();
+    const result = lastValueIfEqual(
+      this,
+      "withParamsNode",
+      [fromRecord(nodes), nodes] as const,
+      (a, b) => shallowEqual(a[1], b[1])
+    )[0];
+    return result;
+  }
+
+  getColumnsNode<T extends keyof SummaryColumnComp["children"]>(
+    field: T
+  ): RecordNode<Record<string, ReturnType<SummaryColumnComp["children"][T]["node"]>>> {
+    const columns = this.getView();
+    const nodes = _(columns)
+      .map((col) => col.children[field].node() as ReturnType<SummaryColumnComp["children"][T]["node"]>)
+      .toPairs()
+      .fromPairs()
+      .value();
+    const result = lastValueIfEqual(
+      this,
+      "col_nodes_" + field,
+      [fromRecord(nodes), nodes] as const,
+      (a, b) => shallowEqual(a[1], b[1])
+    )[0];
+    return result;
+  }
+
+  setSelectionAction(key: string) {
+    return this.forEachAction(ColumnComp.setSelectionAction(key));
+  }
+}
\ No newline at end of file
diff --git a/client/packages/lowcoder/src/comps/comps/tableComp/column/tableSummaryColumnComp.tsx b/client/packages/lowcoder/src/comps/comps/tableComp/column/tableSummaryColumnComp.tsx
new file mode 100644
index 000000000..c2b6087f8
--- /dev/null
+++ b/client/packages/lowcoder/src/comps/comps/tableComp/column/tableSummaryColumnComp.tsx
@@ -0,0 +1,432 @@
+import { BoolControl } from "comps/controls/boolControl";
+import { ColorOrBoolCodeControl, NumberControl, RadiusControl, StringControl } from "comps/controls/codeControl";
+import { dropdownControl, HorizontalAlignmentControl } from "comps/controls/dropdownControl";
+import { MultiCompBuilder, stateComp, valueComp, withContext, withDefault } from "comps/generators";
+import { withSelectedMultiContext } from "comps/generators/withSelectedMultiContext";
+import { genRandomKey } from "comps/utils/idGenerator";
+import { trans } from "i18n";
+import _ from "lodash";
+import {
+  changeChildAction,
+  changeValueAction,
+  CompAction,
+  CompActionTypes,
+  ConstructorToComp,
+  ConstructorToDataType,
+  ConstructorToNodeType,
+  ConstructorToView,
+  deferAction,
+  fromRecord,
+  multiChangeAction,
+  withFunction,
+  wrapChildAction,
+} from "lowcoder-core";
+import { AlignClose, AlignLeft, AlignRight, IconRadius, BorderWidthIcon, TextSizeIcon, FontFamilyIcon, TextWeightIcon, ImageCompIcon, controlItem, Dropdown, OptionType } from "lowcoder-design";
+import { ColumnTypeComp, ColumnTypeCompMap } from "./columnTypeComp";
+import { ColorControl } from "comps/controls/colorControl";
+import { JSONValue } from "util/jsonTypes";
+import styled from "styled-components";
+import { TextOverflowControl } from "comps/controls/textOverflowControl";
+import { default as Divider } from "antd/es/divider";
+import { ColumnValueTooltip } from "./simpleColumnTypeComps";
+export type Render = ReturnType<ConstructorToComp<typeof RenderComp>["getOriginalComp"]>;
+export const RenderComp = withSelectedMultiContext(ColumnTypeComp);
+
+const columnWidthOptions = [
+  {
+    label: trans("table.auto"),
+    value: "auto",
+  },
+  {
+    label: trans("table.fixed"),
+    value: "fixed",
+  },
+] as const;
+
+const columnFixOptions = [
+  {
+    label: <AlignLeft />,
+    value: "left",
+  },
+  {
+    label: <AlignClose />,
+    value: "close",
+  },
+  {
+    label: <AlignRight />,
+    value: "right",
+  },
+] as const;
+
+const cellColorLabel = trans("table.cellColor");
+const CellColorTempComp = withContext(
+  new MultiCompBuilder({ color: ColorOrBoolCodeControl }, (props) => props.color)
+    .setPropertyViewFn((children) =>
+      children.color.propertyView({
+        label: cellColorLabel,
+        tooltip: trans("table.cellColorDesc"),
+      })
+    )
+    .build(),
+  ["currentCell", "currentRow"] as const
+);
+
+// @ts-ignore
+export class CellColorComp extends CellColorTempComp {
+  override getPropertyView() {
+    return controlItem({ filterText: cellColorLabel }, super.getPropertyView());
+  }
+}
+
+// fixme, should be infer from RowColorComp, but withContext type incorrect
+export type CellColorViewType = (param: {
+  currentRow: any;
+  currentCell: JSONValue | undefined; //number | string;
+}) => string;
+
+const cellTooltipLabel = trans("table.columnTooltip");
+const CellTooltipTempComp = withContext(
+  new MultiCompBuilder({ tooltip: StringControl }, (props) => props.tooltip)
+    .setPropertyViewFn((children) =>
+      children.tooltip.propertyView({
+        label: cellTooltipLabel,
+        tooltip: ColumnValueTooltip,
+      })
+    )
+    .build(),
+  ["currentCell", "currentRow", "currentIndex"] as const
+);
+
+// @ts-ignore
+export class CellTooltipComp extends CellTooltipTempComp {
+  override getPropertyView() {
+    return controlItem({ filterText: cellTooltipLabel }, super.getPropertyView());
+  }
+}
+
+// fixme, should be infer from RowColorComp, but withContext type incorrect
+export type CellTooltipViewType = (param: {
+  currentRow: any;
+  currentCell: JSONValue | undefined; //number | string;
+}) => string;
+
+
+export const columnChildrenMap = {
+  // column title
+  // title: valueComp<string>(""),
+  value: StringControl,
+  // titleTooltip: StringControl,
+  // showTitle: withDefault(BoolControl, true),
+  cellTooltip: CellTooltipComp,
+  // a custom column or a data column
+  isCustom: valueComp<boolean>(false),
+  // If it is a data column, it must be the name of the column and cannot be duplicated as a react key
+  dataIndex: valueComp<string>(""),
+  hide: BoolControl,
+  // sortable: BoolControl,
+  // width: NumberControl,
+  // autoWidth: dropdownControl(columnWidthOptions, "auto"),
+  render: RenderComp,
+  align: HorizontalAlignmentControl,
+  // tempHide: stateComp<boolean>(false),
+  fixed: dropdownControl(columnFixOptions, "close"),
+  // editable: BoolControl,
+  background: withDefault(ColorControl, ""),
+  margin: withDefault(RadiusControl, ""),
+  text: withDefault(ColorControl, ""),
+  border: withDefault(ColorControl, ""),
+  borderWidth: withDefault(RadiusControl, ""),
+  radius: withDefault(RadiusControl, ""),
+  textSize: withDefault(RadiusControl, ""),
+  textWeight: withDefault(StringControl, "normal"),
+  fontFamily: withDefault(StringControl, "sans-serif"),
+  fontStyle: withDefault(StringControl, 'normal'),
+  cellColor: CellColorComp,
+  textOverflow: withDefault(TextOverflowControl, "ellipsis"),
+  linkColor: withDefault(ColorControl, "#3377ff"),
+  linkHoverColor: withDefault(ColorControl, ""),
+  linkActiveColor: withDefault(ColorControl, ""),
+};
+
+const StyledBorderRadiusIcon = styled(IconRadius)` width: 24px; margin: 0 8px 0 -3px; padding: 3px;`;
+const StyledBorderIcon = styled(BorderWidthIcon)` width: 24px; margin: 0 8px 0 -3px; padding: 3px;`;
+const StyledTextSizeIcon = styled(TextSizeIcon)` width: 24px; margin: 0 8px 0 -3px; padding: 3px;`;
+const StyledFontFamilyIcon = styled(FontFamilyIcon)` width: 24px; margin: 0 8px 0 -3px; padding: 3px;`;
+const StyledTextWeightIcon = styled(TextWeightIcon)` width: 24px; margin: 0 8px 0 -3px; padding: 3px;`;
+const StyledBackgroundImageIcon = styled(ImageCompIcon)` width: 24px; margin: 0 0px 0 -12px;`;
+
+/**
+ * export for test.
+ * Put it here temporarily to avoid circular dependencies
+ */
+const ColumnInitComp = new MultiCompBuilder(columnChildrenMap, (props, dispatch) => {
+  return {
+    ...props,
+    // onWidthResize: (width: number) => {
+    //   dispatch(
+    //     multiChangeAction({
+    //       width: changeValueAction(width, true),
+    //       autoWidth: changeValueAction("fixed", true),
+    //     })
+    //   );
+    // },
+  };
+})
+  .setPropertyViewFn(() => <></>)
+  .build();
+
+export class SummaryColumnComp extends ColumnInitComp {
+  override reduce(action: CompAction) {
+    let comp = super.reduce(action);
+    if (action.type === CompActionTypes.UPDATE_NODES_V2) {
+      comp = comp.setChild(
+        "cellColor",
+        comp.children.cellColor.reduce(
+          CellColorComp.changeContextDataAction({
+            currentCell: undefined,
+            currentRow: {},
+          })
+        )
+      );
+      comp = comp.setChild(
+        "cellTooltip",
+        comp.children.cellTooltip.reduce(
+          CellTooltipComp.changeContextDataAction({
+            currentCell: undefined,
+            currentRow: {},
+            currentIndex: 0,
+          })
+        )
+      );
+    }
+    // if (action.type === CompActionTypes.CHANGE_VALUE) {
+    //   const title = comp.children.title.unevaledValue;
+    //   const dataIndex = comp.children.dataIndex.getView();
+    //   if (!Boolean(title)) {
+    //     comp.children.title.dispatchChangeValueAction(dataIndex);
+    //   }
+    // }
+    return comp;
+  }
+
+  override getView() {
+    const superView = super.getView();
+    const columnType = this.children.render.getSelectedComp().getComp().children.compType.getView();
+    return {
+      ...superView,
+    };
+  }
+
+  exposingNode() {
+    const dataIndexNode = this.children.dataIndex.exposingNode();
+
+    const renderNode = withFunction(this.children.render.node(), (render) => ({
+      wrap: render.__comp__.wrap,
+      map: _.mapValues(render.__map__, (value) => value.comp),
+    }));
+    return fromRecord({
+      dataIndex: dataIndexNode,
+      render: renderNode,
+    });
+  }
+
+  propertyView(key: string) {
+    const columnType = this.children.render.getSelectedComp().getComp().children.compType.getView();
+    const initialColumns = this.children.render.getSelectedComp().getParams()?.initialColumns as OptionType[] || [];
+    const column = this.children.render.getSelectedComp().getComp().toJsonValue();
+    let columnValue = '{{currentCell}}';
+    if (column.comp?.hasOwnProperty('src')) {
+      columnValue = (column.comp as any).src;
+    } else if (column.comp?.hasOwnProperty('text')) {
+      columnValue = (column.comp as any).text;
+    }
+
+    return (
+      <>
+        {/* {this.children.title.propertyView({
+          label: trans("table.columnTitle"),
+          placeholder: this.children.dataIndex.getView(),
+        })}
+        {this.children.titleTooltip.propertyView({
+          label: trans("table.columnTitleTooltip"),
+        })} */}
+        {/* <Dropdown
+          showSearch={true}
+          defaultValue={columnValue}
+          options={initialColumns}
+          label={trans("table.dataMapping")}
+          onChange={(value) => {
+            // Keep the previous text value, some components do not have text, the default value is currentCell
+            const compType = columnType;
+            let comp: Record<string, string> = { text: value};
+            if(columnType === 'image') {
+              comp = { src: value };
+            }
+            this.children.render.dispatchChangeValueAction({
+              compType,
+              comp,
+            } as any);
+          }}
+        /> */}
+        {this.children.cellTooltip.getPropertyView()}
+        {this.children.value.propertyView({
+          label: "Column Value"
+        })}
+        {/* FIXME: cast type currently, return type of withContext should be corrected later */}
+        {this.children.render.getPropertyView()}
+        {/* {this.children.showTitle.propertyView({
+          label: trans("table.showTitle"),
+          tooltip: trans("table.showTitleTooltip"),
+        })} */}
+        {/* {ColumnTypeCompMap[columnType].canBeEditable() &&
+          this.children.editable.propertyView({ label: trans("table.editable") })}
+        {this.children.sortable.propertyView({
+          label: trans("table.sortable"),
+        })} */}
+        {this.children.hide.propertyView({
+          label: trans("prop.hide"),
+        })}
+        {this.children.align.propertyView({
+          label: trans("table.align"),
+          radioButton: true,
+        })}
+        {this.children.fixed.propertyView({
+          label: trans("table.fixedColumn"),
+          radioButton: true,
+        })}
+        {/* {this.children.autoWidth.propertyView({
+          label: trans("table.autoWidth"),
+          radioButton: true,
+        })}
+        {this.children.autoWidth.getView() === "fixed" &&
+          this.children.width.propertyView({ label: trans("prop.width") })} */}
+
+        {(columnType === 'link' || columnType === 'links') && (
+          <>
+            <Divider style={{ margin: '12px 0' }} />
+            {controlItem({}, (
+              <div>
+                <b>{"Link Style"}</b>
+              </div>
+            ))}
+            {this.children.linkColor.propertyView({
+              label: trans('text') // trans('style.background'),
+            })}
+            {this.children.linkHoverColor.propertyView({
+              label: "Hover text", // trans('style.background'),
+            })}
+            {this.children.linkActiveColor.propertyView({
+              label: "Active text", // trans('style.background'),
+            })}
+          </>
+        )}
+        <Divider style={{ margin: '12px 0' }} />
+        {controlItem({}, (
+          <div>
+            <b>{"Column Style"}</b>
+          </div>
+        ))}
+        {this.children.background.propertyView({
+          label: trans('style.background'),
+        })}
+        {columnType !== 'link' && this.children.text.propertyView({
+          label: trans('text'),
+        })}
+        {this.children.border.propertyView({
+          label: trans('style.border')
+        })}
+        {this.children.borderWidth.propertyView({
+          label: trans('style.borderWidth'),
+          preInputNode: <StyledBorderIcon as={BorderWidthIcon} title="" />,
+          placeholder: '1px',
+        })}
+        {this.children.radius.propertyView({
+          label: trans('style.borderRadius'),
+          preInputNode: <StyledBorderRadiusIcon as={IconRadius} title="" />,
+          placeholder: '3px',
+        })}
+        {this.children.textSize.propertyView({
+          label: trans('style.textSize'),
+          preInputNode: <StyledTextSizeIcon as={TextSizeIcon} title="" />,
+          placeholder: '14px',
+        })}
+        {this.children.textWeight.propertyView({
+          label: trans('style.textWeight'),
+          preInputNode: <StyledTextWeightIcon as={TextWeightIcon} title="" />,
+          placeholder: 'normal',
+        })}
+        {this.children.fontFamily.propertyView({
+          label: trans('style.fontFamily'),
+          preInputNode: <StyledFontFamilyIcon as={FontFamilyIcon} title="" />,
+          placeholder: 'sans-serif',
+        })}
+        {this.children.fontStyle.propertyView({
+          label: trans('style.fontStyle'),
+          preInputNode: <StyledFontFamilyIcon as={FontFamilyIcon} title="" />,
+          placeholder: 'normal'
+        })}
+        {this.children.textOverflow.getPropertyView()}
+        {this.children.cellColor.getPropertyView()}
+      </>
+    );
+  }
+
+  getChangeSet() {
+    const dataIndex = this.children.dataIndex.getView();
+    const changeSet = _.mapValues(this.children.render.getMap(), (value) =>
+      value.getComp().children.comp.children.changeValue.getView()
+    );
+    return { [dataIndex]: changeSet };
+  }
+
+  dispatchClearChangeSet() {
+    this.children.render.dispatch(
+      deferAction(
+        RenderComp.forEachAction(
+          wrapChildAction(
+            "comp",
+            wrapChildAction("comp", changeChildAction("changeValue", null, false))
+          )
+        )
+      )
+    );
+  }
+
+  static setSelectionAction(key: string) {
+    return wrapChildAction("render", RenderComp.setSelectionAction(key));
+  }
+}
+
+export type RawColumnType = ConstructorToView<typeof SummaryColumnComp>;
+export type ColumNodeType = ConstructorToNodeType<typeof SummaryColumnComp>;
+export type ColumnCompType = ConstructorToComp<typeof SummaryColumnComp>;
+
+/**
+ * Custom column initialization data
+ */
+// export function newCustomColumn(): ConstructorToDataType<typeof SummaryColumnComp> {
+//   return {
+//     // title: trans("table.customColumn"),
+//     dataIndex: genRandomKey(),
+//     isCustom: true,
+//   };
+// }
+
+/**
+ * Initialization data of primary column
+ */
+// export function newPrimaryColumn(
+//   key: string,
+//   width: number,
+//   title?: string,
+//   isTag?: boolean
+// ): ConstructorToDataType<typeof ColumnComp> {
+//   return {
+//     title: title ?? key,
+//     dataIndex: key,
+//     isCustom: false,
+//     autoWidth: "fixed",
+//     width: width + "",
+//     render: { compType: isTag ? "tag" : "text", comp: { text: "{{currentCell}}" } },
+//   };
+// }
diff --git a/client/packages/lowcoder/src/comps/comps/tableComp/tableComp.tsx b/client/packages/lowcoder/src/comps/comps/tableComp/tableComp.tsx
index 553a36a0d..5dedd1bba 100644
--- a/client/packages/lowcoder/src/comps/comps/tableComp/tableComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/tableComp/tableComp.tsx
@@ -227,6 +227,17 @@ export class TableImplComp extends TableInitComp implements IContainer {
             })
           )
         );
+        // actions.push(
+        //   wrapChildAction(
+        //     "columns",
+        //     comp.children.summary.children.columns.dataChangedAction({
+        //       rowExample: nextRowExample || {},
+        //       doGeneColumn: doGene,
+        //       dynamicColumn: comp.children.dynamicColumn.getView(),
+        //       data: comp.children.data.getView(),
+        //     })
+        //   )
+        // );
         doGene && actions.push(comp.changeChildAction("dataRowExample", null));
         setTimeout(() => {
           actions.forEach((action) => comp.dispatch(deferAction(action)));
@@ -249,6 +260,10 @@ export class TableImplComp extends TableInitComp implements IContainer {
         "columns",
         comp.children.columns.reduce(comp.children.columns.setSelectionAction(newSelection))
       );
+      // comp.children.summary = comp.children.summary.setChild(
+      //   "columns",
+      //   comp.children.summary.children.columns.reduce(comp.children.summary.children.columns.setSelectionAction(newSelection))
+      // );
       needMoreEval = true;
     }
 
diff --git a/client/packages/lowcoder/src/comps/comps/tableComp/tableCompView.tsx b/client/packages/lowcoder/src/comps/comps/tableComp/tableCompView.tsx
index 3bb8403e9..f2abd7dae 100644
--- a/client/packages/lowcoder/src/comps/comps/tableComp/tableCompView.tsx
+++ b/client/packages/lowcoder/src/comps/comps/tableComp/tableCompView.tsx
@@ -39,10 +39,12 @@ import { SlotConfigContext } from "comps/controls/slotControl";
 import { EmptyContent } from "pages/common/styledComponent";
 import { messageInstance } from "lowcoder-design/src/components/GlobalInstances";
 import { ReactRef, ResizeHandleAxis } from "layout/gridLayoutPropTypes";
-import { CellColorViewType } from "./column/tableColumnComp";
+import { CellColorViewType, ColumnComp } from "./column/tableColumnComp";
 import { defaultTheme } from "@lowcoder-ee/constants/themeConstants";
 import { childrenToProps } from "@lowcoder-ee/comps/generators/multi";
 import { getVerticalMargin } from "@lowcoder-ee/util/cssUtil";
+import { TableSummary } from "./tableSummaryComp";
+import { SummaryColumnComp } from "./column/tableSummaryColumnComp";
 
 function genLinerGradient(color: string) {
   return `linear-gradient(${color}, ${color})`;
@@ -748,6 +750,7 @@ export function TableCompView(props: {
   const data = comp.filterData;
   const sort = useMemo(() => compChildren.sort.getView(), [compChildren.sort]);
   const toolbar = useMemo(() => compChildren.toolbar.getView(), [compChildren.toolbar]);
+  // const summary = useMemo(() => compChildren.summary.getView(), [compChildren.summary]);
   const pagination = useMemo(() => compChildren.pagination.getView(), [compChildren.pagination]);
   const size = useMemo(() => compChildren.size.getView(), [compChildren.size]);
   const onEvent = useMemo(() => compChildren.onEvent.getView(), [compChildren.onEvent]);
@@ -780,11 +783,43 @@ export function TableCompView(props: {
       columnsAggrData,
     ]
   );
+
   const supportChildren = useMemo(
     () => supportChildrenTree(compChildren.data.getView()),
     [compChildren.data]
   );
 
+  // const summaryColumnsMap = useMemo(() => {
+  //   const columnsMap: Record<string, any> = {};
+  //   summary.columns.forEach(column => {
+  //     const columnData = column.toJsonValue();
+  //     columnsMap[columnData.dataIndex!] = columnData;
+  //   });
+  //   return columnsMap;
+  // }, [summary.columns]) 
+
+  // useEffect(() => {
+  //   // if (columns.length === comp.children.summary.children.columns.getView().length) return;
+  //   console.log('useEffect', columns);
+  //   const summaryColumns: any[] = [];
+  //   columns.forEach(col => {
+  //     const colData = col.toJsonValue();
+  //     const summaryColData = summaryColumnsMap[colData.dataIndex!];
+  //     console.log('colData Render', colData.render);
+  //     console.log('summaryColData Render', summaryColData?.render);
+  //     summaryColumns.push(new SummaryColumnComp({
+  //       value: {
+  //         title: colData.title,
+  //         dataIndex: colData.dataIndex,
+  //         render: summaryColData?.render || {} 
+  //       }
+  //     }))
+  //   })
+  //   comp.children.summary.children.columns.dispatch(
+  //     comp.children.summary.children.columns.setChildrensAction(summaryColumns as any[])
+  //   );
+  // }, [compChildren.columns]);
+
   const pageDataInfo = useMemo(() => {
     // Data pagination
     let pagedData = data;
@@ -847,6 +882,16 @@ export function TableCompView(props: {
     />
   );
 
+  // const summaryView = () => {
+  //   if (!summary.showSummary) return undefined;
+  //   return (
+  //     <TableSummary
+  //       showSummary={summary.showSummary}
+  //       columns={summary.columns}
+  //     />
+  //   );
+  // }
+
   if (antdColumns.length === 0) {
     return <EmptyContent text={trans("table.emptyColumns")} />;
   }
@@ -925,6 +970,7 @@ export function TableCompView(props: {
                   dataIndex: dataIndex,
                 });
               }}
+              // summary={summaryView}
             />
 
             <SlotConfigContext.Provider value={{ modalWidth: width && Math.max(width, 300) }}>
diff --git a/client/packages/lowcoder/src/comps/comps/tableComp/tablePropertyView.tsx b/client/packages/lowcoder/src/comps/comps/tableComp/tablePropertyView.tsx
index 636721c1f..9675c35d1 100644
--- a/client/packages/lowcoder/src/comps/comps/tableComp/tablePropertyView.tsx
+++ b/client/packages/lowcoder/src/comps/comps/tableComp/tablePropertyView.tsx
@@ -34,6 +34,7 @@ import { GreyTextColor } from "constants/style";
 import { alignOptions } from "comps/controls/dropdownControl";
 import { ColumnTypeCompMap } from "comps/comps/tableComp/column/columnTypeComp";
 import { changeChildAction } from "lowcoder-core";
+import { summaryPropertyView } from "./tableSummaryComp";
 
 const InsertDiv = styled.div`
   display: flex;
@@ -418,6 +419,7 @@ function columnPropertyView<T extends MultiBaseComp<TableChildrenType>>(comp: T)
 export function compTablePropertyView<T extends MultiBaseComp<TableChildrenType> & { editorModeStatus: string }>(comp: T) {
   const editorModeStatus = comp.editorModeStatus;
   const dataLabel = trans("data");
+
   return (
     <>
       {["logic", "both"].includes(editorModeStatus) && (
@@ -448,6 +450,13 @@ export function compTablePropertyView<T extends MultiBaseComp<TableChildrenType>
             {loadingPropertyView(comp.children)}
           </Section>
 
+          <Section name={"Summary"}>
+            {comp.children.showSummary.propertyView({
+              label: "Show Summary Row"
+            })}
+            {/* {comp.children.summary.getView().showSummary && summaryPropertyView(comp.children.summary)} */}
+          </Section>
+
           <Section name={trans("prop.toolbar")}>
             {comp.children.toolbar.getPropertyView()}
           </Section>
diff --git a/client/packages/lowcoder/src/comps/comps/tableComp/tableSummaryComp.tsx b/client/packages/lowcoder/src/comps/comps/tableComp/tableSummaryComp.tsx
new file mode 100644
index 000000000..bbda97436
--- /dev/null
+++ b/client/packages/lowcoder/src/comps/comps/tableComp/tableSummaryComp.tsx
@@ -0,0 +1,391 @@
+import { default as Button } from "antd/es/button";
+import { default as Pagination, PaginationProps } from "antd/es/pagination";
+import { default as Popover } from "antd/es/popover";
+import { ThemeDetail } from "api/commonSettingApi";
+import { ColumnCompType } from "comps/comps/tableComp/column/tableColumnComp";
+import { TableChildrenType, TableOnEventView } from "comps/comps/tableComp/tableTypes";
+import { BoolControl } from "comps/controls/boolControl";
+import { StringControl } from "comps/controls/codeControl";
+import { dropdownControl } from "comps/controls/dropdownControl";
+import { TableToolbarStyleType } from "comps/controls/styleControlConstants";
+import { stateComp, withDefault } from "comps/generators";
+import { genRandomKey } from "comps/utils/idGenerator";
+import { ThemeContext } from "comps/utils/themeContext";
+import { trans } from "i18n";
+import _, { isNil } from "lodash";
+import { changeChildAction, ConstructorToView, MultiBaseComp, RecordConstructorToComp, RecordConstructorToView } from "lowcoder-core";
+import {
+  AlignBottom,
+  AlignClose,
+  AlignTop,
+  BluePlusIcon,
+  CheckBox,
+  CommonTextLabel,
+  CustomSelect,
+  DeleteIcon,
+  DownloadIcon,
+  FilterIcon,
+  LinkButton,
+  pageItemRender,
+  RefreshIcon,
+  TableColumnVisibilityIcon,
+  SuspensionBox,
+  TacoButton,
+  TacoInput,
+  ValueFromOption,
+  Option,
+  OptionItem,
+  controlItem,
+} from "lowcoder-design";
+import React, { useContext, useEffect, useMemo, useRef, useState } from "react";
+import styled, { css } from "styled-components";
+import { JSONValue } from "util/jsonTypes";
+import { ControlNodeCompBuilder } from "comps/generators/controlCompBuilder";
+import { defaultTheme } from "@lowcoder-ee/constants/themeConstants";
+import Table from "antd/es/table";
+import { ColumnListComp, SummaryColumnListComp } from "./column/tableColumnListComp";
+import { GreyTextColor } from "@lowcoder-ee/constants/style";
+import { getSelectedRowKeys } from "./selectionControl";
+import { CompNameContext, EditorContext } from "@lowcoder-ee/comps/editorState";
+import { SummaryColumnComp } from "./column/tableSummaryColumnComp";
+
+const SaveChangeButtons = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 8px;
+`;
+
+// const getStyle = (
+//   style: TableToolbarStyleType,
+//   filtered: boolean,
+//   theme: ThemeDetail,
+//   position: TableSummaryType["position"],
+//   fixedToolbar: boolean,
+// ) => {
+//   return css`
+//     background-color: ${style.background};
+//     // Implement horizontal scrollbar and vertical page number selection is not blocked
+//     padding: 13px 12px;
+//     position: sticky;
+//     postion: -webkit-sticky;
+//     left: 0px !important;
+//     margin: ${style.margin} !important;
+//     z-index: 999;
+
+//     ${fixedToolbar && position === 'below' && `bottom: 0;`};
+//     ${fixedToolbar && position === 'above' && `top: 0;` };
+
+//     .toolbar-icons {
+//       .refresh,
+//       .download {
+//         cursor: pointer;
+
+//         * {
+//           ${style.toolbarText !== defaultTheme.textDark ? `stroke: ${style.toolbarText}` : null};
+//         }
+
+//         &:hover * {
+//           stroke: ${theme?.primary};
+//         }
+//       }
+
+//       .filter {
+//         cursor: pointer;
+
+//         * {
+//           ${filtered
+//             ? `stroke: ${defaultTheme.primary}`
+//             : style.toolbarText !== defaultTheme.textDark
+//             ? `stroke: ${style.toolbarText}`
+//             : null}
+//         }
+
+//         &:hover * {
+//           stroke: ${theme?.primary};
+//         }
+//       }
+
+//       .column-setting {
+//         width: 20px;
+//         cursor: pointer;
+
+//         * {
+//           ${style.toolbarText && style.toolbarText !== defaultTheme.textDark ? `fill: ${style.toolbarText}` : `fill: #8b8fa3`} 
+//         }
+
+//         &:hover * {
+//           fill: ${theme?.primary};
+//         }
+//       }
+//     }
+
+//     .ant-pagination-prev,
+//     .ant-pagination-next {
+//       path {
+//         ${style.toolbarText !== defaultTheme.textDark ? `fill: ${style.toolbarText}` : null};
+//       }
+
+//       svg:hover {
+//         path {
+//           fill: ${theme?.primary};
+//         }
+//       }
+//     }
+
+//     .ant-pagination {
+//       color: ${style.toolbarText};
+//     }
+
+//     .ant-pagination-item-active {
+//       border-color: ${style.border || theme?.primary};
+
+//       a {
+//         color: ${theme?.textDark};
+//       }
+//     }
+
+//     .ant-pagination-item:not(.ant-pagination-item-active) a {
+//       color: ${style.toolbarText};
+
+//       &:hover {
+//         color: ${theme?.primary};
+//       }
+//     }
+
+//     .ant-select:not(.ant-select-disabled):hover .ant-select-selector,
+//     .ant-select-focused:not(.ant-select-disabled).ant-select:not(.ant-select-customize-input)
+//       .ant-select-selector,
+//     .ant-pagination-options-quick-jumper input:hover,
+//     .ant-pagination-options-quick-jumper input:focus {
+//       border-color: ${style.border || theme?.primary};
+//     }
+//   `;
+// };
+
+// // overflow: auto;
+// ${(props) => props.$style && getStyle(
+//   props.$style,
+//   props.$filtered,
+//   props.$theme,
+//   props.$position,
+//   props.$fixedToolbar,
+// )}
+const SummaryWrapper = styled.div<{
+  // $style: TableToolbarStyleType;
+  // $filtered: boolean;
+  // $theme: ThemeDetail;
+  // $position: ToolbarRowType["position"];
+  // $fixedToolbar: boolean;
+}>`
+`;
+
+const SummaryWrapper2 = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  min-width: max-content;
+  // height: 21px;
+  width: 100%;
+`;
+
+const childrenMap = {
+  showSummary: BoolControl,
+  columns: SummaryColumnListComp,
+};
+
+type TableSummaryType = RecordConstructorToComp<typeof childrenMap>;
+type TableSummaryView = RecordConstructorToView<typeof childrenMap>;
+
+function ColumnPropertyView<T extends MultiBaseComp<TableSummaryType>>(props: {
+  comp: T;
+  columnLabel: string;
+}) {
+  const { comp } = props;
+  const comp2 = useContext(EditorContext).getUICompByName(useContext(CompNameContext));
+  // const selection = getSelectedRowKeys(comp.children.selection)[0] ?? "0";
+  // const [columnFilterType, setColumnFilterType] = useState<ColumnFilterOptionValueType>("all");
+  const columns: SummaryColumnListComp  = comp2?.children.comp.children.summary.children.columns;
+  const columnsView = columns.getView();
+
+  // const rowExample = comp.children.dataRowExample.getView();
+  // const dynamicColumn = comp.children.dynamicColumn.getView();
+  // const data = comp.children.data.getView();
+  // const [columnBatchType, setColumnBatchType] = useState<ColumnBatchOptionValueType>("hide");
+  // const columnOptionItems = useMemo(
+  //   () => columns.filter((c) => columnFilterType === "all" || !c.children.hide.getView()),
+  //   [columnFilterType, columns]
+  // );
+
+  // const columnOptionToolbar = (
+  //   <InsertDiv>
+  //     <div style={{ display: "flex", alignItems: "center", marginRight: "auto" }}>
+  //       <TextLabel label={props.columnLabel} />
+  //       <Graylabel>{" (" + columns.length + ")"}</Graylabel>
+  //     </div>
+  //     {rowExample && (
+  //       <ToolTipLabel title={trans("table.refreshButtonTooltip")}>
+  //         <StyledRefreshIcon
+  //           onClick={() => {
+  //             // console.log("comp", comp);
+  //             comp.dispatch(
+  //               wrapChildAction(
+  //                 "columns",
+  //                 comp.children.columns.dataChangedAction({
+  //                   rowExample,
+  //                   doGeneColumn: true,
+  //                   dynamicColumn: dynamicColumn,
+  //                   data: data,
+  //                 })
+  //               )
+  //             );
+  //             // the function below is not working
+  //             // comp.dispatch(comp.changeChildAction("dataRowExample", null));
+  //           }}
+  //         />
+  //       </ToolTipLabel>
+  //     )}
+  //     <LinkButton
+  //       icon={<BluePlusIcon />}
+  //       text={trans("addItem")}
+  //       onClick={() => {
+  //         comp.children.columns.dispatch(comp.children.columns.pushAction(newCustomColumn()));
+  //       }}
+  //     />
+  //   </InsertDiv>
+  // );
+
+  return (
+    <>
+      <Option
+        // headerItem={
+        //   <OptionItem
+        //     title={''}
+        //     config={{ dataIndex: "header" }}
+        //     draggable={false}
+        //   />
+        // }
+        // itemExtra={(column) => {
+        //   return (
+        //     <div
+        //       style={{
+        //         display: "flex",
+        //         alignItems: "center",
+        //         height: "100%",
+        //       }}
+        //       onClick={(e) => e.stopPropagation()}
+        //     >
+        //       {ColumnBatchView[columnBatchType](column)}
+        //     </div>
+        //   );
+        // }}
+        items={columnsView}
+        itemExtra={() => <></>}
+        optionToolbar={<></>}
+        itemTitle={(column) => {
+          const columnView = column.getView();
+          if (columnView.hide) {
+            return <span style={{ color: GreyTextColor }}>{columnView.title}</span>;
+          }
+          return columnView.title;
+        }}
+        popoverTitle={(column) => {
+          const columnView = column.getView();
+          return columnView.isCustom ? trans("table.customColumn") : columnView.dataIndex;
+        }}
+        content={(column, index) => (
+          <>
+            {column.propertyView('')}
+          </>
+        )}
+        onAdd={() => {
+          // comp.children.columns.dispatch(comp.children.columns.pushAction(newCustomColumn()));
+        }}
+        onMove={(fromIndex, toIndex) => {
+          // const action = comp.children.columns.arrayMoveAction(fromIndex, toIndex);
+          // comp.children.columns.dispatch(action);
+        }}
+        dataIndex={(column) => column.getView().dataIndex}
+        scrollable={true}
+      />
+    </>
+  );
+}
+
+export function summaryPropertyView<T extends MultiBaseComp<TableSummaryType>>(comp: T) {
+  const columnLabel = trans("table.columnNum");
+  // const dynamicColumn = comp.children.dynamicColumn.getView();
+  return [
+    controlItem(
+      { filterText: columnLabel },
+      <ColumnPropertyView comp={comp} columnLabel={columnLabel} />
+    ),
+    /* comp.children.dynamicColumn.propertyView({ label: trans("table.dynamicColumn") }),
+    dynamicColumn &&
+      comp.children.dynamicColumnConfig.propertyView({
+        label: trans("table.dynamicColumnConfig"),
+        tooltip: trans("table.dynamicColumnConfigDesc"),
+      }), */
+  ];
+}
+
+export const TableSummaryComp = (function () {
+  return new ControlNodeCompBuilder(childrenMap, (props) => {
+    return props;
+  })
+  .setPropertyViewFn((children) => [
+    children.showSummary.propertyView({ label: "Show Summary Row" }),
+    // summaryPropertyView(),
+  ])
+  .build();
+    // .setPropertyViewFn((children) => [
+    //   children.showSummary.propertyView({ label: "Show summary row" }),
+    //   children.showSummary.getView()
+    // ])
+})();
+
+
+export function TableSummary(props: TableSummaryView) {
+  const {
+    showSummary,
+    columns,
+  } = props;
+  // const [filterVisible, setFilterVisible] = useState(false);
+  // const [settingVisible, setSettingVisible] = useState(false);
+  // const visibleColumns = columns.filter((c) => !c.children.hide.getView());
+  // const columnKeyNameTuple = useMemo(() => {
+  //   return visibleColumns.map((column) => {
+  //     const c = column.getView();
+  //     return [c.dataIndex, c.title || c.dataIndex] as [string, string];
+  //   });
+  // }, [columns]);
+  const theme = useContext(ThemeContext)?.theme;
+  const visibleColumns = columns.filter(col => !col.getView().hide);
+  
+  if (!visibleColumns.length) return <></>;
+
+  return (
+    // <SummaryWrapper
+    //   $style={props.$style}
+    //   $theme={theme || defaultTheme}
+    //   $filtered={toolbar.filter.filters.length > 0}
+    //   $position={toolbar.position}
+    //   $fixedToolbar={toolbar.fixedToolbar}
+    // >
+    //   <SummaryWrapper2>
+        <Table.Summary>
+          <Table.Summary.Row>
+            {visibleColumns.map((column, index) => (
+              <Table.Summary.Cell
+                index={index}
+                key={`summary-${column.getView().dataIndex}-${index}`}
+              >
+                {column.getView().render({}, '').getView().view({})}
+                {/* {column.getView().value} */}
+              </Table.Summary.Cell>
+            ))}
+          </Table.Summary.Row>
+        </Table.Summary>
+    //   </SummaryWrapper2>
+    // </SummaryWrapper>
+  );
+}
diff --git a/client/packages/lowcoder/src/comps/comps/tableComp/tableTypes.tsx b/client/packages/lowcoder/src/comps/comps/tableComp/tableTypes.tsx
index 310939f07..f74510430 100644
--- a/client/packages/lowcoder/src/comps/comps/tableComp/tableTypes.tsx
+++ b/client/packages/lowcoder/src/comps/comps/tableComp/tableTypes.tsx
@@ -36,6 +36,7 @@ import { ExpansionControl } from "./expansionControl";
 import { PaginationControl } from "./paginationControl";
 import { SelectionControl } from "./selectionControl";
 import { AutoHeightControl } from "comps/controls/autoHeightControl";
+import { TableSummaryComp } from "./tableSummaryComp";
 
 const sizeOptions = [
   {
@@ -207,6 +208,7 @@ const tableChildrenMap = {
   pagination: PaginationControl,
   sort: valueComp<Array<SortValue>>([]),
   toolbar: TableToolbarComp,
+  showSummary: BoolControl,
   style: styleControl(TableStyle, 'style'),
   rowStyle: styleControl(TableRowStyle, 'rowStyle'),
   toolbarStyle: styleControl(TableToolbarStyle, 'toolbarStyle'),

From 59bca1e5ab09287fe89896c3d3d59fb8b4c96f92 Mon Sep 17 00:00:00 2001
From: RAHEEL <mraheeliftikhar1994@gmail.com>
Date: Sat, 17 Aug 2024 00:34:34 +0500
Subject: [PATCH 02/10] added switch for normal/summary column settings

---
 .../lowcoder/src/comps/comps/avatarGroup.tsx  |  27 +-
 .../tableComp/column/tableColumnComp.tsx      | 232 ++++----
 .../column/tableSummaryColumnComp.tsx         | 107 +---
 .../comps/comps/tableComp/tableCompView.tsx   |  55 +-
 .../comps/tableComp/tablePropertyView.tsx     |  28 +-
 .../comps/tableComp/tableSummaryComp.tsx      | 508 +++++-------------
 .../src/comps/comps/tableComp/tableTypes.tsx  |   4 +-
 .../comps/controls/styleControlConstants.tsx  |  14 +-
 8 files changed, 323 insertions(+), 652 deletions(-)

diff --git a/client/packages/lowcoder/src/comps/comps/avatarGroup.tsx b/client/packages/lowcoder/src/comps/comps/avatarGroup.tsx
index ef6b55fee..cba007ee1 100644
--- a/client/packages/lowcoder/src/comps/comps/avatarGroup.tsx
+++ b/client/packages/lowcoder/src/comps/comps/avatarGroup.tsx
@@ -12,7 +12,7 @@ import { clickEvent, eventHandlerControl, refreshEvent } from "../controls/event
 import styled from "styled-components";
 import { useContext, ReactElement, useEffect } from "react";
 import { MultiCompBuilder, stateComp, withDefault } from "../generators";
-import { CompNameContext, EditorContext } from "comps/editorState";
+import { EditorContext } from "comps/editorState";
 import { IconControl } from "../controls/iconControl";
 import { ColorControl } from "../controls/colorControl";
 import { optionsControl } from "../controls/optionsControl";
@@ -105,30 +105,6 @@ const childrenMap = {
 };
 
 const AvatarGroupView = (props: RecordConstructorToView<typeof childrenMap> & { dispatch: (action: CompAction) => void; }) => {
-  const comp = useContext(EditorContext).getUICompByName(useContext(CompNameContext));
-  
-  const updateAvatars = () => {
-    debugger;
-    if (!comp) return;
-    // comp?.children.comp.children?.avatars?.children.manual.dispatchChangeValueAction({
-    //   initOptions: [
-    //     { src: "https://api.dicebear.com/7.x/miniavs/svg?seed=1", label: String.fromCharCode(65 + Math.ceil(Math.random() * 25)) },
-    //     // { AvatarIcon: "/icon:antd/startwotone" },
-    //     // { label: String.fromCharCode(65 + Math.ceil(Math.random() * 25)) },
-    //     // { label: String.fromCharCode(65 + Math.ceil(Math.random() * 25)) },
-    //   ],
-    // });
-    // comp?.children.comp.children?.avatars.children.manual.children.manual.dispatch([
-    //   { src: "https://api.dicebear.com/7.x/miniavs/svg?seed=1", label: String.fromCharCode(65 + Math.ceil(Math.random() * 25)) }
-    // ])
-    comp?.children.comp.children?.avatars.children.manual.children.manual.dispatch(
-      comp?.children.comp.children?.avatars.children.manual.children.manual.setChildrensAction([
-        { src: "https://api.dicebear.com/7.x/miniavs/svg?seed=1", label: String.fromCharCode(65 + Math.ceil(Math.random() * 25)) }
-      ])
-    );
-  }
-  
-
   return (
     <Container
       $style={props.style}
@@ -151,7 +127,6 @@ const AvatarGroupView = (props: RecordConstructorToView<typeof childrenMap> & {
                     onClick={() => {
                       props.onEvent("click")
                       props.dispatch(changeChildAction("currentAvatar", item as JSONObject, false));
-                      updateAvatars();
                     }}
                   >
                     {item.label}
diff --git a/client/packages/lowcoder/src/comps/comps/tableComp/column/tableColumnComp.tsx b/client/packages/lowcoder/src/comps/comps/tableComp/column/tableColumnComp.tsx
index c9057ed73..5846b74bb 100644
--- a/client/packages/lowcoder/src/comps/comps/tableComp/column/tableColumnComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/tableComp/column/tableColumnComp.tsx
@@ -29,9 +29,11 @@ import styled from "styled-components";
 import { TextOverflowControl } from "comps/controls/textOverflowControl";
 import { default as Divider } from "antd/es/divider";
 import { ColumnValueTooltip } from "./simpleColumnTypeComps";
+import { SummaryColumnComp } from "./tableSummaryColumnComp";
 export type Render = ReturnType<ConstructorToComp<typeof RenderComp>["getOriginalComp"]>;
 export const RenderComp = withSelectedMultiContext(ColumnTypeComp);
 
+
 const columnWidthOptions = [
   {
     label: trans("table.auto"),
@@ -145,6 +147,7 @@ export const columnChildrenMap = {
   linkColor: withDefault(ColorControl, "#3377ff"),
   linkHoverColor: withDefault(ColorControl, ""),
   linkActiveColor: withDefault(ColorControl, ""),
+  summary: SummaryColumnComp,
 };
 
 const StyledBorderRadiusIcon = styled(IconRadius)` width: 24px; margin: 0 8px 0 -3px; padding: 3px;`;
@@ -230,7 +233,7 @@ export class ColumnComp extends ColumnInitComp {
     });
   }
 
-  propertyView(key: string) {
+  propertyView(key: string, viewMode: string) {
     const columnType = this.children.render.getSelectedComp().getComp().children.compType.getView();
     const initialColumns = this.children.render.getSelectedComp().getParams()?.initialColumns as OptionType[] || [];
     const column = this.children.render.getSelectedComp().getComp().toJsonValue();
@@ -243,127 +246,134 @@ export class ColumnComp extends ColumnInitComp {
 
     return (
       <>
-        {this.children.title.propertyView({
-          label: trans("table.columnTitle"),
-          placeholder: this.children.dataIndex.getView(),
-        })}
-        {this.children.titleTooltip.propertyView({
-          label: trans("table.columnTitleTooltip"),
-        })}
-        {this.children.cellTooltip.getPropertyView()}
-        <Dropdown
-          showSearch={true}
-          defaultValue={columnValue}
-          options={initialColumns}
-          label={trans("table.dataMapping")}
-          onChange={(value) => {
-            // Keep the previous text value, some components do not have text, the default value is currentCell
-            const compType = columnType;
-            let comp: Record<string, string> = { text: value};
-            if(columnType === 'image') {
-              comp = { src: value };
-            }
-            this.children.render.dispatchChangeValueAction({
-              compType,
-              comp,
-            } as any);
-          }}
-        />
-        {/* FIXME: cast type currently, return type of withContext should be corrected later */}
-        {this.children.render.getPropertyView()}
-        {this.children.showTitle.propertyView({
-          label: trans("table.showTitle"),
-          tooltip: trans("table.showTitleTooltip"),
-        })}
-        {ColumnTypeCompMap[columnType].canBeEditable() &&
-          this.children.editable.propertyView({ label: trans("table.editable") })}
-        {this.children.sortable.propertyView({
-          label: trans("table.sortable"),
-        })}
-        {this.children.hide.propertyView({
-          label: trans("prop.hide"),
-        })}
-        {this.children.align.propertyView({
-          label: trans("table.align"),
-          radioButton: true,
-        })}
-        {this.children.fixed.propertyView({
-          label: trans("table.fixedColumn"),
-          radioButton: true,
-        })}
-        {this.children.autoWidth.propertyView({
-          label: trans("table.autoWidth"),
-          radioButton: true,
-        })}
-        {this.children.autoWidth.getView() === "fixed" &&
-          this.children.width.propertyView({ label: trans("prop.width") })}
-
-        {(columnType === 'link' || columnType === 'links') && (
+        {viewMode === 'summary' && (
+          this.children.summary.propertyView('')
+        )}
+        {viewMode === 'normal' && (
           <>
+            {this.children.title.propertyView({
+              label: trans("table.columnTitle"),
+              placeholder: this.children.dataIndex.getView(),
+            })}
+            {this.children.titleTooltip.propertyView({
+              label: trans("table.columnTitleTooltip"),
+            })}
+            {this.children.cellTooltip.getPropertyView()}
+            <Dropdown
+              showSearch={true}
+              defaultValue={columnValue}
+              options={initialColumns}
+              label={trans("table.dataMapping")}
+              onChange={(value) => {
+                // Keep the previous text value, some components do not have text, the default value is currentCell
+                const compType = columnType;
+                let comp: Record<string, string> = { text: value};
+                if(columnType === 'image') {
+                  comp = { src: value };
+                }
+                this.children.render.dispatchChangeValueAction({
+                  compType,
+                  comp,
+                } as any);
+              }}
+            />
+            {/* FIXME: cast type currently, return type of withContext should be corrected later */}
+            {this.children.render.getPropertyView()}
+            {this.children.showTitle.propertyView({
+              label: trans("table.showTitle"),
+              tooltip: trans("table.showTitleTooltip"),
+            })}
+            {ColumnTypeCompMap[columnType].canBeEditable() &&
+              this.children.editable.propertyView({ label: trans("table.editable") })}
+            {this.children.sortable.propertyView({
+              label: trans("table.sortable"),
+            })}
+            {this.children.hide.propertyView({
+              label: trans("prop.hide"),
+            })}
+            {this.children.align.propertyView({
+              label: trans("table.align"),
+              radioButton: true,
+            })}
+            {this.children.fixed.propertyView({
+              label: trans("table.fixedColumn"),
+              radioButton: true,
+            })}
+            {this.children.autoWidth.propertyView({
+              label: trans("table.autoWidth"),
+              radioButton: true,
+            })}
+            {this.children.autoWidth.getView() === "fixed" &&
+              this.children.width.propertyView({ label: trans("prop.width") })}
+
+            {(columnType === 'link' || columnType === 'links') && (
+              <>
+                <Divider style={{ margin: '12px 0' }} />
+                {controlItem({}, (
+                  <div>
+                    <b>{"Link Style"}</b>
+                  </div>
+                ))}
+                {this.children.linkColor.propertyView({
+                  label: trans('text') // trans('style.background'),
+                })}
+                {this.children.linkHoverColor.propertyView({
+                  label: "Hover text", // trans('style.background'),
+                })}
+                {this.children.linkActiveColor.propertyView({
+                  label: "Active text", // trans('style.background'),
+                })}
+              </>
+            )}
             <Divider style={{ margin: '12px 0' }} />
             {controlItem({}, (
               <div>
-                <b>{"Link Style"}</b>
+                <b>{"Column Style"}</b>
               </div>
             ))}
-            {this.children.linkColor.propertyView({
-              label: trans('text') // trans('style.background'),
+            {this.children.background.propertyView({
+              label: trans('style.background'),
+            })}
+            {columnType !== 'link' && this.children.text.propertyView({
+              label: trans('text'),
+            })}
+            {this.children.border.propertyView({
+              label: trans('style.border')
+            })}
+            {this.children.borderWidth.propertyView({
+              label: trans('style.borderWidth'),
+              preInputNode: <StyledBorderIcon as={BorderWidthIcon} title="" />,
+              placeholder: '1px',
+            })}
+            {this.children.radius.propertyView({
+              label: trans('style.borderRadius'),
+              preInputNode: <StyledBorderRadiusIcon as={IconRadius} title="" />,
+              placeholder: '3px',
+            })}
+            {this.children.textSize.propertyView({
+              label: trans('style.textSize'),
+              preInputNode: <StyledTextSizeIcon as={TextSizeIcon} title="" />,
+              placeholder: '14px',
+            })}
+            {this.children.textWeight.propertyView({
+              label: trans('style.textWeight'),
+              preInputNode: <StyledTextWeightIcon as={TextWeightIcon} title="" />,
+              placeholder: 'normal',
             })}
-            {this.children.linkHoverColor.propertyView({
-              label: "Hover text", // trans('style.background'),
+            {this.children.fontFamily.propertyView({
+              label: trans('style.fontFamily'),
+              preInputNode: <StyledFontFamilyIcon as={FontFamilyIcon} title="" />,
+              placeholder: 'sans-serif',
             })}
-            {this.children.linkActiveColor.propertyView({
-              label: "Active text", // trans('style.background'),
+            {this.children.fontStyle.propertyView({
+              label: trans('style.fontStyle'),
+              preInputNode: <StyledFontFamilyIcon as={FontFamilyIcon} title="" />,
+              placeholder: 'normal'
             })}
+            {this.children.textOverflow.getPropertyView()}
+            {this.children.cellColor.getPropertyView()}
           </>
         )}
-        <Divider style={{ margin: '12px 0' }} />
-        {controlItem({}, (
-          <div>
-            <b>{"Column Style"}</b>
-          </div>
-        ))}
-        {this.children.background.propertyView({
-          label: trans('style.background'),
-        })}
-        {columnType !== 'link' && this.children.text.propertyView({
-          label: trans('text'),
-        })}
-        {this.children.border.propertyView({
-          label: trans('style.border')
-        })}
-        {this.children.borderWidth.propertyView({
-          label: trans('style.borderWidth'),
-          preInputNode: <StyledBorderIcon as={BorderWidthIcon} title="" />,
-          placeholder: '1px',
-        })}
-        {this.children.radius.propertyView({
-          label: trans('style.borderRadius'),
-          preInputNode: <StyledBorderRadiusIcon as={IconRadius} title="" />,
-          placeholder: '3px',
-        })}
-        {this.children.textSize.propertyView({
-          label: trans('style.textSize'),
-          preInputNode: <StyledTextSizeIcon as={TextSizeIcon} title="" />,
-          placeholder: '14px',
-        })}
-        {this.children.textWeight.propertyView({
-          label: trans('style.textWeight'),
-          preInputNode: <StyledTextWeightIcon as={TextWeightIcon} title="" />,
-          placeholder: 'normal',
-        })}
-        {this.children.fontFamily.propertyView({
-          label: trans('style.fontFamily'),
-          preInputNode: <StyledFontFamilyIcon as={FontFamilyIcon} title="" />,
-          placeholder: 'sans-serif',
-        })}
-        {this.children.fontStyle.propertyView({
-          label: trans('style.fontStyle'),
-          preInputNode: <StyledFontFamilyIcon as={FontFamilyIcon} title="" />,
-          placeholder: 'normal'
-        })}
-        {this.children.textOverflow.getPropertyView()}
-        {this.children.cellColor.getPropertyView()}
       </>
     );
   }
diff --git a/client/packages/lowcoder/src/comps/comps/tableComp/column/tableSummaryColumnComp.tsx b/client/packages/lowcoder/src/comps/comps/tableComp/column/tableSummaryColumnComp.tsx
index c2b6087f8..cccfb03ad 100644
--- a/client/packages/lowcoder/src/comps/comps/tableComp/column/tableSummaryColumnComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/tableComp/column/tableSummaryColumnComp.tsx
@@ -112,25 +112,16 @@ export type CellTooltipViewType = (param: {
 
 
 export const columnChildrenMap = {
-  // column title
-  // title: valueComp<string>(""),
   value: StringControl,
-  // titleTooltip: StringControl,
-  // showTitle: withDefault(BoolControl, true),
   cellTooltip: CellTooltipComp,
   // a custom column or a data column
   isCustom: valueComp<boolean>(false),
   // If it is a data column, it must be the name of the column and cannot be duplicated as a react key
   dataIndex: valueComp<string>(""),
   hide: BoolControl,
-  // sortable: BoolControl,
-  // width: NumberControl,
-  // autoWidth: dropdownControl(columnWidthOptions, "auto"),
   render: RenderComp,
   align: HorizontalAlignmentControl,
-  // tempHide: stateComp<boolean>(false),
   fixed: dropdownControl(columnFixOptions, "close"),
-  // editable: BoolControl,
   background: withDefault(ColorControl, ""),
   margin: withDefault(RadiusControl, ""),
   text: withDefault(ColorControl, ""),
@@ -162,14 +153,6 @@ const StyledBackgroundImageIcon = styled(ImageCompIcon)` width: 24px; margin: 0
 const ColumnInitComp = new MultiCompBuilder(columnChildrenMap, (props, dispatch) => {
   return {
     ...props,
-    // onWidthResize: (width: number) => {
-    //   dispatch(
-    //     multiChangeAction({
-    //       width: changeValueAction(width, true),
-    //       autoWidth: changeValueAction("fixed", true),
-    //     })
-    //   );
-    // },
   };
 })
   .setPropertyViewFn(() => <></>)
@@ -199,13 +182,6 @@ export class SummaryColumnComp extends ColumnInitComp {
         )
       );
     }
-    // if (action.type === CompActionTypes.CHANGE_VALUE) {
-    //   const title = comp.children.title.unevaledValue;
-    //   const dataIndex = comp.children.dataIndex.getView();
-    //   if (!Boolean(title)) {
-    //     comp.children.title.dispatchChangeValueAction(dataIndex);
-    //   }
-    // }
     return comp;
   }
 
@@ -214,6 +190,7 @@ export class SummaryColumnComp extends ColumnInitComp {
     const columnType = this.children.render.getSelectedComp().getComp().children.compType.getView();
     return {
       ...superView,
+      columnType,
     };
   }
 
@@ -232,7 +209,6 @@ export class SummaryColumnComp extends ColumnInitComp {
 
   propertyView(key: string) {
     const columnType = this.children.render.getSelectedComp().getComp().children.compType.getView();
-    const initialColumns = this.children.render.getSelectedComp().getParams()?.initialColumns as OptionType[] || [];
     const column = this.children.render.getSelectedComp().getComp().toJsonValue();
     let columnValue = '{{currentCell}}';
     if (column.comp?.hasOwnProperty('src')) {
@@ -243,46 +219,12 @@ export class SummaryColumnComp extends ColumnInitComp {
 
     return (
       <>
-        {/* {this.children.title.propertyView({
-          label: trans("table.columnTitle"),
-          placeholder: this.children.dataIndex.getView(),
-        })}
-        {this.children.titleTooltip.propertyView({
-          label: trans("table.columnTitleTooltip"),
-        })} */}
-        {/* <Dropdown
-          showSearch={true}
-          defaultValue={columnValue}
-          options={initialColumns}
-          label={trans("table.dataMapping")}
-          onChange={(value) => {
-            // Keep the previous text value, some components do not have text, the default value is currentCell
-            const compType = columnType;
-            let comp: Record<string, string> = { text: value};
-            if(columnType === 'image') {
-              comp = { src: value };
-            }
-            this.children.render.dispatchChangeValueAction({
-              compType,
-              comp,
-            } as any);
-          }}
-        /> */}
         {this.children.cellTooltip.getPropertyView()}
         {this.children.value.propertyView({
           label: "Column Value"
         })}
         {/* FIXME: cast type currently, return type of withContext should be corrected later */}
         {this.children.render.getPropertyView()}
-        {/* {this.children.showTitle.propertyView({
-          label: trans("table.showTitle"),
-          tooltip: trans("table.showTitleTooltip"),
-        })} */}
-        {/* {ColumnTypeCompMap[columnType].canBeEditable() &&
-          this.children.editable.propertyView({ label: trans("table.editable") })}
-        {this.children.sortable.propertyView({
-          label: trans("table.sortable"),
-        })} */}
         {this.children.hide.propertyView({
           label: trans("prop.hide"),
         })}
@@ -294,13 +236,6 @@ export class SummaryColumnComp extends ColumnInitComp {
           label: trans("table.fixedColumn"),
           radioButton: true,
         })}
-        {/* {this.children.autoWidth.propertyView({
-          label: trans("table.autoWidth"),
-          radioButton: true,
-        })}
-        {this.children.autoWidth.getView() === "fixed" &&
-          this.children.width.propertyView({ label: trans("prop.width") })} */}
-
         {(columnType === 'link' || columnType === 'links') && (
           <>
             <Divider style={{ margin: '12px 0' }} />
@@ -310,13 +245,13 @@ export class SummaryColumnComp extends ColumnInitComp {
               </div>
             ))}
             {this.children.linkColor.propertyView({
-              label: trans('text') // trans('style.background'),
+              label: trans('text')
             })}
             {this.children.linkHoverColor.propertyView({
-              label: "Hover text", // trans('style.background'),
+              label: "Hover text",
             })}
             {this.children.linkActiveColor.propertyView({
-              label: "Active text", // trans('style.background'),
+              label: "Active text",
             })}
           </>
         )}
@@ -396,37 +331,3 @@ export class SummaryColumnComp extends ColumnInitComp {
     return wrapChildAction("render", RenderComp.setSelectionAction(key));
   }
 }
-
-export type RawColumnType = ConstructorToView<typeof SummaryColumnComp>;
-export type ColumNodeType = ConstructorToNodeType<typeof SummaryColumnComp>;
-export type ColumnCompType = ConstructorToComp<typeof SummaryColumnComp>;
-
-/**
- * Custom column initialization data
- */
-// export function newCustomColumn(): ConstructorToDataType<typeof SummaryColumnComp> {
-//   return {
-//     // title: trans("table.customColumn"),
-//     dataIndex: genRandomKey(),
-//     isCustom: true,
-//   };
-// }
-
-/**
- * Initialization data of primary column
- */
-// export function newPrimaryColumn(
-//   key: string,
-//   width: number,
-//   title?: string,
-//   isTag?: boolean
-// ): ConstructorToDataType<typeof ColumnComp> {
-//   return {
-//     title: title ?? key,
-//     dataIndex: key,
-//     isCustom: false,
-//     autoWidth: "fixed",
-//     width: width + "",
-//     render: { compType: isTag ? "tag" : "text", comp: { text: "{{currentCell}}" } },
-//   };
-// }
diff --git a/client/packages/lowcoder/src/comps/comps/tableComp/tableCompView.tsx b/client/packages/lowcoder/src/comps/comps/tableComp/tableCompView.tsx
index f2abd7dae..ea57de46a 100644
--- a/client/packages/lowcoder/src/comps/comps/tableComp/tableCompView.tsx
+++ b/client/packages/lowcoder/src/comps/comps/tableComp/tableCompView.tsx
@@ -743,6 +743,7 @@ export function TableCompView(props: {
   const visibleResizables = compChildren.visibleResizables.getView();
   const showHRowGridBorder = compChildren.showHRowGridBorder.getView();
   const columnsStyle = compChildren.columnsStyle.getView();
+  const summaryRowStyle = compChildren.summaryRowStyle.getView();
   const changeSet = useMemo(() => compChildren.columns.getChangeSet(), [compChildren.columns]);
   const hasChange = useMemo(() => !_.isEmpty(changeSet), [changeSet]);
   const columns = useMemo(() => compChildren.columns.getView(), [compChildren.columns]);
@@ -751,6 +752,7 @@ export function TableCompView(props: {
   const sort = useMemo(() => compChildren.sort.getView(), [compChildren.sort]);
   const toolbar = useMemo(() => compChildren.toolbar.getView(), [compChildren.toolbar]);
   // const summary = useMemo(() => compChildren.summary.getView(), [compChildren.summary]);
+  const showSummary = useMemo(() => compChildren.showSummary.getView(), [compChildren.showSummary]);
   const pagination = useMemo(() => compChildren.pagination.getView(), [compChildren.pagination]);
   const size = useMemo(() => compChildren.size.getView(), [compChildren.size]);
   const onEvent = useMemo(() => compChildren.onEvent.getView(), [compChildren.onEvent]);
@@ -789,37 +791,6 @@ export function TableCompView(props: {
     [compChildren.data]
   );
 
-  // const summaryColumnsMap = useMemo(() => {
-  //   const columnsMap: Record<string, any> = {};
-  //   summary.columns.forEach(column => {
-  //     const columnData = column.toJsonValue();
-  //     columnsMap[columnData.dataIndex!] = columnData;
-  //   });
-  //   return columnsMap;
-  // }, [summary.columns]) 
-
-  // useEffect(() => {
-  //   // if (columns.length === comp.children.summary.children.columns.getView().length) return;
-  //   console.log('useEffect', columns);
-  //   const summaryColumns: any[] = [];
-  //   columns.forEach(col => {
-  //     const colData = col.toJsonValue();
-  //     const summaryColData = summaryColumnsMap[colData.dataIndex!];
-  //     console.log('colData Render', colData.render);
-  //     console.log('summaryColData Render', summaryColData?.render);
-  //     summaryColumns.push(new SummaryColumnComp({
-  //       value: {
-  //         title: colData.title,
-  //         dataIndex: colData.dataIndex,
-  //         render: summaryColData?.render || {} 
-  //       }
-  //     }))
-  //   })
-  //   comp.children.summary.children.columns.dispatch(
-  //     comp.children.summary.children.columns.setChildrensAction(summaryColumns as any[])
-  //   );
-  // }, [compChildren.columns]);
-
   const pageDataInfo = useMemo(() => {
     // Data pagination
     let pagedData = data;
@@ -882,15 +853,17 @@ export function TableCompView(props: {
     />
   );
 
-  // const summaryView = () => {
-  //   if (!summary.showSummary) return undefined;
-  //   return (
-  //     <TableSummary
-  //       showSummary={summary.showSummary}
-  //       columns={summary.columns}
-  //     />
-  //   );
-  // }
+  const summaryView = () => {
+    if (!showSummary) return undefined;
+    return (
+      <TableSummary
+        // showSummary={showSummary}
+        tableSize={size}
+        columns={columns}
+        summaryRowStyle={summaryRowStyle}
+      />
+    );
+  }
 
   if (antdColumns.length === 0) {
     return <EmptyContent text={trans("table.emptyColumns")} />;
@@ -970,7 +943,7 @@ export function TableCompView(props: {
                   dataIndex: dataIndex,
                 });
               }}
-              // summary={summaryView}
+              summary={summaryView}
             />
 
             <SlotConfigContext.Provider value={{ modalWidth: width && Math.max(width, 300) }}>
diff --git a/client/packages/lowcoder/src/comps/comps/tableComp/tablePropertyView.tsx b/client/packages/lowcoder/src/comps/comps/tableComp/tablePropertyView.tsx
index 9675c35d1..03bb352ba 100644
--- a/client/packages/lowcoder/src/comps/comps/tableComp/tablePropertyView.tsx
+++ b/client/packages/lowcoder/src/comps/comps/tableComp/tablePropertyView.tsx
@@ -33,8 +33,7 @@ import React, { useMemo, useState } from "react";
 import { GreyTextColor } from "constants/style";
 import { alignOptions } from "comps/controls/dropdownControl";
 import { ColumnTypeCompMap } from "comps/comps/tableComp/column/columnTypeComp";
-import { changeChildAction } from "lowcoder-core";
-import { summaryPropertyView } from "./tableSummaryComp";
+import Segmented from "antd/es/segmented";
 
 const InsertDiv = styled.div`
   display: flex;
@@ -105,6 +104,19 @@ const ColumnBatchOptionWrapper = styled.div`
   font-size: 13px;
 `;
 
+type ViewOptionType = "normal" | "summary";
+
+const columnViewOptions = [
+  {
+    label: "Normal",
+    value: "normal",
+  },
+  {
+    label: "Summary",
+    value: "summary",
+  },
+];
+
 const columnFilterOptions = [
   { label: trans("table.allColumn"), value: "all" },
   { label: trans("table.visibleColumn"), value: "visible" },
@@ -250,6 +262,7 @@ function ColumnPropertyView<T extends MultiBaseComp<TableChildrenType>>(props: {
   comp: T;
   columnLabel: string;
 }) {
+  const [viewMode, setViewMode] = useState('normal');
   const { comp } = props;
   const selection = getSelectedRowKeys(comp.children.selection)[0] ?? "0";
   const [columnFilterType, setColumnFilterType] = useState<ColumnFilterOptionValueType>("all");
@@ -366,7 +379,13 @@ function ColumnPropertyView<T extends MultiBaseComp<TableChildrenType>>(props: {
         }}
         content={(column, index) => (
           <>
-            {column.propertyView(selection)}
+            <Segmented
+              block
+              options={columnViewOptions}
+              value={viewMode}
+              onChange={(k) => setViewMode(k as ViewOptionType)}
+            />
+            {column.propertyView(selection, viewMode)}
             {column.getView().isCustom && (
               <RedButton
                 onClick={() => {
@@ -546,6 +565,9 @@ export function compTablePropertyView<T extends MultiBaseComp<TableChildrenType>
           <Section name={"Column Style"}>
             {comp.children.columnsStyle.getPropertyView()}
           </Section>
+          <Section name={"Summary Row Style"}>
+            {comp.children.summaryRowStyle.getPropertyView()}
+          </Section>
         </>
       )}
     </>
diff --git a/client/packages/lowcoder/src/comps/comps/tableComp/tableSummaryComp.tsx b/client/packages/lowcoder/src/comps/comps/tableComp/tableSummaryComp.tsx
index bbda97436..5cc2541be 100644
--- a/client/packages/lowcoder/src/comps/comps/tableComp/tableSummaryComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/tableComp/tableSummaryComp.tsx
@@ -1,391 +1,169 @@
-import { default as Button } from "antd/es/button";
-import { default as Pagination, PaginationProps } from "antd/es/pagination";
-import { default as Popover } from "antd/es/popover";
 import { ThemeDetail } from "api/commonSettingApi";
-import { ColumnCompType } from "comps/comps/tableComp/column/tableColumnComp";
-import { TableChildrenType, TableOnEventView } from "comps/comps/tableComp/tableTypes";
-import { BoolControl } from "comps/controls/boolControl";
-import { StringControl } from "comps/controls/codeControl";
-import { dropdownControl } from "comps/controls/dropdownControl";
-import { TableToolbarStyleType } from "comps/controls/styleControlConstants";
-import { stateComp, withDefault } from "comps/generators";
-import { genRandomKey } from "comps/utils/idGenerator";
-import { ThemeContext } from "comps/utils/themeContext";
-import { trans } from "i18n";
-import _, { isNil } from "lodash";
-import { changeChildAction, ConstructorToView, MultiBaseComp, RecordConstructorToComp, RecordConstructorToView } from "lowcoder-core";
-import {
-  AlignBottom,
-  AlignClose,
-  AlignTop,
-  BluePlusIcon,
-  CheckBox,
-  CommonTextLabel,
-  CustomSelect,
-  DeleteIcon,
-  DownloadIcon,
-  FilterIcon,
-  LinkButton,
-  pageItemRender,
-  RefreshIcon,
-  TableColumnVisibilityIcon,
-  SuspensionBox,
-  TacoButton,
-  TacoInput,
-  ValueFromOption,
-  Option,
-  OptionItem,
-  controlItem,
-} from "lowcoder-design";
-import React, { useContext, useEffect, useMemo, useRef, useState } from "react";
-import styled, { css } from "styled-components";
-import { JSONValue } from "util/jsonTypes";
-import { ControlNodeCompBuilder } from "comps/generators/controlCompBuilder";
+import { ColumnComp } from "comps/comps/tableComp/column/tableColumnComp";
+import { TableColumnStyleType, TableSummaryRowStyleType } from "comps/controls/styleControlConstants";
+import styled from "styled-components";
 import { defaultTheme } from "@lowcoder-ee/constants/themeConstants";
 import Table from "antd/es/table";
-import { ColumnListComp, SummaryColumnListComp } from "./column/tableColumnListComp";
-import { GreyTextColor } from "@lowcoder-ee/constants/style";
-import { getSelectedRowKeys } from "./selectionControl";
-import { CompNameContext, EditorContext } from "@lowcoder-ee/comps/editorState";
-import { SummaryColumnComp } from "./column/tableSummaryColumnComp";
 
-const SaveChangeButtons = styled.div`
-  display: flex;
-  align-items: center;
-  gap: 8px;
+const TableSummaryRow = styled(Table.Summary.Row)`
+  td:last-child {
+    border-right: unset !important;
+  }
 `;
 
-// const getStyle = (
-//   style: TableToolbarStyleType,
-//   filtered: boolean,
-//   theme: ThemeDetail,
-//   position: TableSummaryType["position"],
-//   fixedToolbar: boolean,
-// ) => {
-//   return css`
-//     background-color: ${style.background};
-//     // Implement horizontal scrollbar and vertical page number selection is not blocked
-//     padding: 13px 12px;
-//     position: sticky;
-//     postion: -webkit-sticky;
-//     left: 0px !important;
-//     margin: ${style.margin} !important;
-//     z-index: 999;
-
-//     ${fixedToolbar && position === 'below' && `bottom: 0;`};
-//     ${fixedToolbar && position === 'above' && `top: 0;` };
-
-//     .toolbar-icons {
-//       .refresh,
-//       .download {
-//         cursor: pointer;
-
-//         * {
-//           ${style.toolbarText !== defaultTheme.textDark ? `stroke: ${style.toolbarText}` : null};
-//         }
-
-//         &:hover * {
-//           stroke: ${theme?.primary};
-//         }
-//       }
-
-//       .filter {
-//         cursor: pointer;
-
-//         * {
-//           ${filtered
-//             ? `stroke: ${defaultTheme.primary}`
-//             : style.toolbarText !== defaultTheme.textDark
-//             ? `stroke: ${style.toolbarText}`
-//             : null}
-//         }
-
-//         &:hover * {
-//           stroke: ${theme?.primary};
-//         }
-//       }
-
-//       .column-setting {
-//         width: 20px;
-//         cursor: pointer;
-
-//         * {
-//           ${style.toolbarText && style.toolbarText !== defaultTheme.textDark ? `fill: ${style.toolbarText}` : `fill: #8b8fa3`} 
-//         }
-
-//         &:hover * {
-//           fill: ${theme?.primary};
-//         }
-//       }
-//     }
-
-//     .ant-pagination-prev,
-//     .ant-pagination-next {
-//       path {
-//         ${style.toolbarText !== defaultTheme.textDark ? `fill: ${style.toolbarText}` : null};
-//       }
-
-//       svg:hover {
-//         path {
-//           fill: ${theme?.primary};
-//         }
-//       }
-//     }
-
-//     .ant-pagination {
-//       color: ${style.toolbarText};
-//     }
-
-//     .ant-pagination-item-active {
-//       border-color: ${style.border || theme?.primary};
-
-//       a {
-//         color: ${theme?.textDark};
-//       }
-//     }
-
-//     .ant-pagination-item:not(.ant-pagination-item-active) a {
-//       color: ${style.toolbarText};
-
-//       &:hover {
-//         color: ${theme?.primary};
-//       }
-//     }
-
-//     .ant-select:not(.ant-select-disabled):hover .ant-select-selector,
-//     .ant-select-focused:not(.ant-select-disabled).ant-select:not(.ant-select-customize-input)
-//       .ant-select-selector,
-//     .ant-pagination-options-quick-jumper input:hover,
-//     .ant-pagination-options-quick-jumper input:focus {
-//       border-color: ${style.border || theme?.primary};
-//     }
-//   `;
-// };
-
-// // overflow: auto;
-// ${(props) => props.$style && getStyle(
-//   props.$style,
-//   props.$filtered,
-//   props.$theme,
-//   props.$position,
-//   props.$fixedToolbar,
-// )}
-const SummaryWrapper = styled.div<{
-  // $style: TableToolbarStyleType;
-  // $filtered: boolean;
-  // $theme: ThemeDetail;
-  // $position: ToolbarRowType["position"];
-  // $fixedToolbar: boolean;
+const TableSummarCell = styled(Table.Summary.Cell)<{
+  $style: TableSummaryRowStyleType;
+  $defaultThemeDetail: ThemeDetail;
+  // $linkStyle?: TableColumnLinkStyleType;
+  $tableSize?: string;
+  $autoHeight?: boolean;
 }>`
+  background: ${(props) => props.$style.background} !important;
+  border-color: ${(props) => props.$style.border} !important;
+  // border-width: ${(props) => props.$style.borderWidth} !important;
+  // border-style: ${(props) => props.$style.borderStyle} !important;
+  border-radius: ${(props) => props.$style.radius};
+  padding: 0 !important;
+
+  > div {
+    margin: ${(props) => props.$style.margin};
+    color: ${(props) => props.$style.text};
+    font-weight: ${(props) => props.$style.textWeight};
+    font-family: ${(props) => props.$style.fontFamily};
+    overflow: hidden; 
+    ${(props) => props.$tableSize === 'small' && `
+      padding: 1px 8px;
+      font-size: ${props.$defaultThemeDetail.textSize == props.$style.textSize ? '14px !important' : props.$style.textSize + ' !important'};
+      font-style:${props.$style.fontStyle} !important;
+      min-height: 14px;
+      line-height: 20px;
+      ${!props.$autoHeight && `
+        overflow-y: auto;
+        max-height: 28px;
+      `};
+    `};
+    ${(props) => props.$tableSize === 'middle' && `
+      padding: 8px 8px;
+      font-size: ${props.$defaultThemeDetail.textSize == props.$style.textSize ? '16px !important' : props.$style.textSize + ' !important'};
+      font-style:${props.$style.fontStyle} !important;
+      min-height: 24px;
+      line-height: 24px;
+      ${!props.$autoHeight && `
+        overflow-y: auto;
+        max-height: 48px;
+      `};
+    `};
+    ${(props) => props.$tableSize === 'large' && `
+      padding: 16px 16px;
+      font-size: ${props.$defaultThemeDetail.textSize == props.$style.textSize ? '18px !important' : props.$style.textSize + ' !important'};
+      font-style:${props.$style.fontStyle} !important;
+      min-height: 48px;
+      ${!props.$autoHeight && `
+        overflow-y: auto;
+        max-height: 96px;
+      `};
+    `};
+    
+    > .ant-badge > .ant-badge-status-text,
+    > div > .markdown-body {
+      color: ${(props) => props.$style.text};
+    }
+
+    > div > svg g {
+      stroke: ${(props) => props.$style.text};
+    }
+  }
 `;
 
-const SummaryWrapper2 = styled.div`
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  min-width: max-content;
-  // height: 21px;
-  width: 100%;
-`;
-
-const childrenMap = {
-  showSummary: BoolControl,
-  columns: SummaryColumnListComp,
-};
-
-type TableSummaryType = RecordConstructorToComp<typeof childrenMap>;
-type TableSummaryView = RecordConstructorToView<typeof childrenMap>;
-
-function ColumnPropertyView<T extends MultiBaseComp<TableSummaryType>>(props: {
-  comp: T;
-  columnLabel: string;
+function TableSummaryCellView(props: {
+  index: number;
+  key: string;
+  children: any;
+  rowStyle: TableSummaryRowStyleType;
+  columnStyle: TableColumnStyleType;
+  tableSize?: string;
+  autoHeight?: boolean;
 }) {
-  const { comp } = props;
-  const comp2 = useContext(EditorContext).getUICompByName(useContext(CompNameContext));
-  // const selection = getSelectedRowKeys(comp.children.selection)[0] ?? "0";
-  // const [columnFilterType, setColumnFilterType] = useState<ColumnFilterOptionValueType>("all");
-  const columns: SummaryColumnListComp  = comp2?.children.comp.children.summary.children.columns;
-  const columnsView = columns.getView();
-
-  // const rowExample = comp.children.dataRowExample.getView();
-  // const dynamicColumn = comp.children.dynamicColumn.getView();
-  // const data = comp.children.data.getView();
-  // const [columnBatchType, setColumnBatchType] = useState<ColumnBatchOptionValueType>("hide");
-  // const columnOptionItems = useMemo(
-  //   () => columns.filter((c) => columnFilterType === "all" || !c.children.hide.getView()),
-  //   [columnFilterType, columns]
-  // );
+  const {
+    children,
+    rowStyle,
+    columnStyle,
+    tableSize,
+    autoHeight,
+    ...restProps
+  } = props;
 
-  // const columnOptionToolbar = (
-  //   <InsertDiv>
-  //     <div style={{ display: "flex", alignItems: "center", marginRight: "auto" }}>
-  //       <TextLabel label={props.columnLabel} />
-  //       <Graylabel>{" (" + columns.length + ")"}</Graylabel>
-  //     </div>
-  //     {rowExample && (
-  //       <ToolTipLabel title={trans("table.refreshButtonTooltip")}>
-  //         <StyledRefreshIcon
-  //           onClick={() => {
-  //             // console.log("comp", comp);
-  //             comp.dispatch(
-  //               wrapChildAction(
-  //                 "columns",
-  //                 comp.children.columns.dataChangedAction({
-  //                   rowExample,
-  //                   doGeneColumn: true,
-  //                   dynamicColumn: dynamicColumn,
-  //                   data: data,
-  //                 })
-  //               )
-  //             );
-  //             // the function below is not working
-  //             // comp.dispatch(comp.changeChildAction("dataRowExample", null));
-  //           }}
-  //         />
-  //       </ToolTipLabel>
-  //     )}
-  //     <LinkButton
-  //       icon={<BluePlusIcon />}
-  //       text={trans("addItem")}
-  //       onClick={() => {
-  //         comp.children.columns.dispatch(comp.children.columns.pushAction(newCustomColumn()));
-  //       }}
-  //     />
-  //   </InsertDiv>
-  // );
+  const style = {
+    background: columnStyle.background || rowStyle.background,
+    margin: columnStyle.margin || rowStyle.margin,
+    text: columnStyle.text || rowStyle.text,
+    border: columnStyle.border || rowStyle.border,
+    borderWidth: rowStyle.borderWidth,
+    borderStyle: rowStyle.borderStyle,
+    radius: columnStyle.radius || rowStyle.radius,
+    // borderWidth: columnStyle.borderWidth || rowStyle.borderWidth,
+    textSize: columnStyle.textSize || rowStyle.textSize,
+    textWeight: rowStyle.textWeight || columnStyle.textWeight,
+    fontFamily: rowStyle.fontFamily || columnStyle.fontFamily,
+    fontStyle: rowStyle.fontStyle || columnStyle.fontStyle,
+  }
 
   return (
-    <>
-      <Option
-        // headerItem={
-        //   <OptionItem
-        //     title={''}
-        //     config={{ dataIndex: "header" }}
-        //     draggable={false}
-        //   />
-        // }
-        // itemExtra={(column) => {
-        //   return (
-        //     <div
-        //       style={{
-        //         display: "flex",
-        //         alignItems: "center",
-        //         height: "100%",
-        //       }}
-        //       onClick={(e) => e.stopPropagation()}
-        //     >
-        //       {ColumnBatchView[columnBatchType](column)}
-        //     </div>
-        //   );
-        // }}
-        items={columnsView}
-        itemExtra={() => <></>}
-        optionToolbar={<></>}
-        itemTitle={(column) => {
-          const columnView = column.getView();
-          if (columnView.hide) {
-            return <span style={{ color: GreyTextColor }}>{columnView.title}</span>;
-          }
-          return columnView.title;
-        }}
-        popoverTitle={(column) => {
-          const columnView = column.getView();
-          return columnView.isCustom ? trans("table.customColumn") : columnView.dataIndex;
-        }}
-        content={(column, index) => (
-          <>
-            {column.propertyView('')}
-          </>
-        )}
-        onAdd={() => {
-          // comp.children.columns.dispatch(comp.children.columns.pushAction(newCustomColumn()));
-        }}
-        onMove={(fromIndex, toIndex) => {
-          // const action = comp.children.columns.arrayMoveAction(fromIndex, toIndex);
-          // comp.children.columns.dispatch(action);
-        }}
-        dataIndex={(column) => column.getView().dataIndex}
-        scrollable={true}
-      />
-    </>
+    <TableSummarCell
+      {...restProps}
+      $style={style}
+      $defaultThemeDetail={defaultTheme}
+      $tableSize={tableSize}
+      $autoHeight={autoHeight}
+    >
+      {children}
+    </TableSummarCell>
   );
 }
 
-export function summaryPropertyView<T extends MultiBaseComp<TableSummaryType>>(comp: T) {
-  const columnLabel = trans("table.columnNum");
-  // const dynamicColumn = comp.children.dynamicColumn.getView();
-  return [
-    controlItem(
-      { filterText: columnLabel },
-      <ColumnPropertyView comp={comp} columnLabel={columnLabel} />
-    ),
-    /* comp.children.dynamicColumn.propertyView({ label: trans("table.dynamicColumn") }),
-    dynamicColumn &&
-      comp.children.dynamicColumnConfig.propertyView({
-        label: trans("table.dynamicColumnConfig"),
-        tooltip: trans("table.dynamicColumnConfigDesc"),
-      }), */
-  ];
-}
-
-export const TableSummaryComp = (function () {
-  return new ControlNodeCompBuilder(childrenMap, (props) => {
-    return props;
-  })
-  .setPropertyViewFn((children) => [
-    children.showSummary.propertyView({ label: "Show Summary Row" }),
-    // summaryPropertyView(),
-  ])
-  .build();
-    // .setPropertyViewFn((children) => [
-    //   children.showSummary.propertyView({ label: "Show summary row" }),
-    //   children.showSummary.getView()
-    // ])
-})();
-
-
-export function TableSummary(props: TableSummaryView) {
+export function TableSummary(props: {
+  tableSize: string;
+  columns: ColumnComp[];
+  summaryRowStyle: TableSummaryRowStyleType;
+}) {
   const {
-    showSummary,
     columns,
+    summaryRowStyle,
+    tableSize,
   } = props;
-  // const [filterVisible, setFilterVisible] = useState(false);
-  // const [settingVisible, setSettingVisible] = useState(false);
-  // const visibleColumns = columns.filter((c) => !c.children.hide.getView());
-  // const columnKeyNameTuple = useMemo(() => {
-  //   return visibleColumns.map((column) => {
-  //     const c = column.getView();
-  //     return [c.dataIndex, c.title || c.dataIndex] as [string, string];
-  //   });
-  // }, [columns]);
-  const theme = useContext(ThemeContext)?.theme;
   const visibleColumns = columns.filter(col => !col.getView().hide);
   
   if (!visibleColumns.length) return <></>;
 
   return (
-    // <SummaryWrapper
-    //   $style={props.$style}
-    //   $theme={theme || defaultTheme}
-    //   $filtered={toolbar.filter.filters.length > 0}
-    //   $position={toolbar.position}
-    //   $fixedToolbar={toolbar.fixedToolbar}
-    // >
-    //   <SummaryWrapper2>
-        <Table.Summary>
-          <Table.Summary.Row>
-            {visibleColumns.map((column, index) => (
-              <Table.Summary.Cell
-                index={index}
-                key={`summary-${column.getView().dataIndex}-${index}`}
-              >
-                {column.getView().render({}, '').getView().view({})}
-                {/* {column.getView().value} */}
-              </Table.Summary.Cell>
-            ))}
-          </Table.Summary.Row>
-        </Table.Summary>
-    //   </SummaryWrapper2>
-    // </SummaryWrapper>
+    <Table.Summary>
+      <TableSummaryRow>
+        {visibleColumns.map((column, index) => {
+          const summaryColumn = column.children.summary.getView();
+          return (
+            <TableSummaryCellView
+              index={index}
+              key={`summary-${column.getView().dataIndex}-${index}`}
+              tableSize={tableSize}
+              rowStyle={summaryRowStyle}
+              columnStyle={{
+                background: summaryColumn.background,
+                margin: summaryColumn.margin,
+                text: summaryColumn.text,
+                border: summaryColumn.border,
+                radius: summaryColumn.radius,
+                textSize: summaryColumn.textSize,
+                textWeight: summaryColumn.textWeight,
+                fontStyle:summaryColumn.fontStyle,
+                fontFamily: summaryColumn.fontFamily,
+                // borderWidth: summaryColumn.borderWidth,
+              }}
+            >
+              {summaryColumn.render({}, '').getView().view({})}
+            </TableSummaryCellView>
+          )
+        })}
+      </TableSummaryRow>
+    </Table.Summary>
   );
 }
diff --git a/client/packages/lowcoder/src/comps/comps/tableComp/tableTypes.tsx b/client/packages/lowcoder/src/comps/comps/tableComp/tableTypes.tsx
index f74510430..526f623cf 100644
--- a/client/packages/lowcoder/src/comps/comps/tableComp/tableTypes.tsx
+++ b/client/packages/lowcoder/src/comps/comps/tableComp/tableTypes.tsx
@@ -13,7 +13,7 @@ import {
 import { dropdownControl } from "comps/controls/dropdownControl";
 import { eventHandlerControl } from "comps/controls/eventHandlerControl";
 import { styleControl } from "comps/controls/styleControl";
-import { TableColumnStyle, TableRowStyle, TableStyle, TableToolbarStyle, TableHeaderStyle } from "comps/controls/styleControlConstants";
+import { TableColumnStyle, TableRowStyle, TableStyle, TableToolbarStyle, TableHeaderStyle, TableSummaryRowStyle } from "comps/controls/styleControlConstants";
 import {
   MultiCompBuilder,
   stateComp,
@@ -36,7 +36,6 @@ import { ExpansionControl } from "./expansionControl";
 import { PaginationControl } from "./paginationControl";
 import { SelectionControl } from "./selectionControl";
 import { AutoHeightControl } from "comps/controls/autoHeightControl";
-import { TableSummaryComp } from "./tableSummaryComp";
 
 const sizeOptions = [
   {
@@ -211,6 +210,7 @@ const tableChildrenMap = {
   showSummary: BoolControl,
   style: styleControl(TableStyle, 'style'),
   rowStyle: styleControl(TableRowStyle, 'rowStyle'),
+  summaryRowStyle: styleControl(TableSummaryRowStyle, 'summaryRowStyle'),
   toolbarStyle: styleControl(TableToolbarStyle, 'toolbarStyle'),
   headerStyle: styleControl(TableHeaderStyle, 'headerStyle'),
   searchText: StringControl,
diff --git a/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx b/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx
index c82d6aa58..b9a6d37fa 100644
--- a/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx
+++ b/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx
@@ -1545,7 +1545,6 @@ export const TableColumnStyle = [
   getStaticBackground("#00000000"),
   getStaticBorder(),
   MARGIN,
-
   RADIUS,
   TEXT,
   TEXT_SIZE,
@@ -1556,6 +1555,18 @@ export const TableColumnStyle = [
 
 export const TableColumnLinkStyle = [...LinkTextStyle] as const;
 
+export const TableSummaryRowStyle = [
+  BORDER_WIDTH,
+  BORDER_STYLE,
+  ...BG_STATIC_BORDER_RADIUS,
+  MARGIN,
+  TEXT,
+  TEXT_SIZE,
+  TEXT_WEIGHT,
+  FONT_FAMILY,
+  FONT_STYLE,
+] as const;
+
 export const FileStyle = [
   // ...getStaticBgBorderRadiusByBg(SURFACE_COLOR),
   getStaticBackground(SURFACE_COLOR),
@@ -2020,6 +2031,7 @@ export type TableColumnStyleType = StyleConfigType<typeof TableColumnStyle>;
 export type TableColumnLinkStyleType = StyleConfigType<
   typeof TableColumnLinkStyle
 >;
+export type TableSummaryRowStyleType = StyleConfigType<typeof TableSummaryRowStyle>;
 export type FileStyleType = StyleConfigType<typeof FileStyle>;
 export type FileViewerStyleType = StyleConfigType<typeof FileViewerStyle>;
 export type IframeStyleType = StyleConfigType<typeof IframeStyle>;

From 94023b4eed4d55fc00781787dee9294be2e28eff Mon Sep 17 00:00:00 2001
From: RAHEEL <mraheeliftikhar1994@gmail.com>
Date: Tue, 20 Aug 2024 00:55:53 +0500
Subject: [PATCH 03/10] allow multiple (max. 3) summary rows

---
 .../tableComp/column/tableColumnComp.tsx      | 13 +++--
 .../column/tableSummaryColumnComp.tsx         |  4 --
 .../comps/comps/tableComp/tableCompView.tsx   |  3 +-
 .../comps/tableComp/tablePropertyView.tsx     | 31 +++++++++-
 .../comps/tableComp/tableSummaryComp.tsx      | 58 ++++++++++---------
 .../src/comps/comps/tableComp/tableTypes.tsx  | 16 +++++
 6 files changed, 88 insertions(+), 37 deletions(-)

diff --git a/client/packages/lowcoder/src/comps/comps/tableComp/column/tableColumnComp.tsx b/client/packages/lowcoder/src/comps/comps/tableComp/column/tableColumnComp.tsx
index 5846b74bb..b4e5b15c1 100644
--- a/client/packages/lowcoder/src/comps/comps/tableComp/column/tableColumnComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/tableComp/column/tableColumnComp.tsx
@@ -30,10 +30,11 @@ import { TextOverflowControl } from "comps/controls/textOverflowControl";
 import { default as Divider } from "antd/es/divider";
 import { ColumnValueTooltip } from "./simpleColumnTypeComps";
 import { SummaryColumnComp } from "./tableSummaryColumnComp";
+import Segmented from "antd/es/segmented";
+import { list } from "@lowcoder-ee/comps/generators/list";
 export type Render = ReturnType<ConstructorToComp<typeof RenderComp>["getOriginalComp"]>;
 export const RenderComp = withSelectedMultiContext(ColumnTypeComp);
 
-
 const columnWidthOptions = [
   {
     label: trans("table.auto"),
@@ -147,7 +148,9 @@ export const columnChildrenMap = {
   linkColor: withDefault(ColorControl, "#3377ff"),
   linkHoverColor: withDefault(ColorControl, ""),
   linkActiveColor: withDefault(ColorControl, ""),
-  summary: SummaryColumnComp,
+  summaryColumns: withDefault(list(SummaryColumnComp), [
+    {}, {}, {}
+  ])
 };
 
 const StyledBorderRadiusIcon = styled(IconRadius)` width: 24px; margin: 0 8px 0 -3px; padding: 3px;`;
@@ -233,7 +236,7 @@ export class ColumnComp extends ColumnInitComp {
     });
   }
 
-  propertyView(key: string, viewMode: string) {
+  propertyView(key: string, viewMode: string, summaryRowIndex: number) {
     const columnType = this.children.render.getSelectedComp().getComp().children.compType.getView();
     const initialColumns = this.children.render.getSelectedComp().getParams()?.initialColumns as OptionType[] || [];
     const column = this.children.render.getSelectedComp().getComp().toJsonValue();
@@ -244,10 +247,12 @@ export class ColumnComp extends ColumnInitComp {
       columnValue = (column.comp as any).text;
     }
 
+    const summaryColumns = this.children.summaryColumns.getView();
+  
     return (
       <>
         {viewMode === 'summary' && (
-          this.children.summary.propertyView('')
+          summaryColumns[summaryRowIndex].propertyView('')
         )}
         {viewMode === 'normal' && (
           <>
diff --git a/client/packages/lowcoder/src/comps/comps/tableComp/column/tableSummaryColumnComp.tsx b/client/packages/lowcoder/src/comps/comps/tableComp/column/tableSummaryColumnComp.tsx
index cccfb03ad..9d772b364 100644
--- a/client/packages/lowcoder/src/comps/comps/tableComp/column/tableSummaryColumnComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/tableComp/column/tableSummaryColumnComp.tsx
@@ -112,7 +112,6 @@ export type CellTooltipViewType = (param: {
 
 
 export const columnChildrenMap = {
-  value: StringControl,
   cellTooltip: CellTooltipComp,
   // a custom column or a data column
   isCustom: valueComp<boolean>(false),
@@ -220,9 +219,6 @@ export class SummaryColumnComp extends ColumnInitComp {
     return (
       <>
         {this.children.cellTooltip.getPropertyView()}
-        {this.children.value.propertyView({
-          label: "Column Value"
-        })}
         {/* FIXME: cast type currently, return type of withContext should be corrected later */}
         {this.children.render.getPropertyView()}
         {this.children.hide.propertyView({
diff --git a/client/packages/lowcoder/src/comps/comps/tableComp/tableCompView.tsx b/client/packages/lowcoder/src/comps/comps/tableComp/tableCompView.tsx
index ea57de46a..c43474dee 100644
--- a/client/packages/lowcoder/src/comps/comps/tableComp/tableCompView.tsx
+++ b/client/packages/lowcoder/src/comps/comps/tableComp/tableCompView.tsx
@@ -753,6 +753,7 @@ export function TableCompView(props: {
   const toolbar = useMemo(() => compChildren.toolbar.getView(), [compChildren.toolbar]);
   // const summary = useMemo(() => compChildren.summary.getView(), [compChildren.summary]);
   const showSummary = useMemo(() => compChildren.showSummary.getView(), [compChildren.showSummary]);
+  const summaryRows = useMemo(() => compChildren.summaryRows.getView(), [compChildren.summaryRows]);
   const pagination = useMemo(() => compChildren.pagination.getView(), [compChildren.pagination]);
   const size = useMemo(() => compChildren.size.getView(), [compChildren.size]);
   const onEvent = useMemo(() => compChildren.onEvent.getView(), [compChildren.onEvent]);
@@ -857,8 +858,8 @@ export function TableCompView(props: {
     if (!showSummary) return undefined;
     return (
       <TableSummary
-        // showSummary={showSummary}
         tableSize={size}
+        summaryRows={parseInt(summaryRows)}
         columns={columns}
         summaryRowStyle={summaryRowStyle}
       />
diff --git a/client/packages/lowcoder/src/comps/comps/tableComp/tablePropertyView.tsx b/client/packages/lowcoder/src/comps/comps/tableComp/tablePropertyView.tsx
index 03bb352ba..3fdd0220a 100644
--- a/client/packages/lowcoder/src/comps/comps/tableComp/tablePropertyView.tsx
+++ b/client/packages/lowcoder/src/comps/comps/tableComp/tablePropertyView.tsx
@@ -106,6 +106,21 @@ const ColumnBatchOptionWrapper = styled.div`
 
 type ViewOptionType = "normal" | "summary";
 
+const summaryRowOptions = [
+  {
+    label: "Row 1",
+    value: 0,
+  },
+  {
+    label: "Row 2",
+    value: 1,
+  },
+  {
+    label: "Row 3",
+    value: 2,
+  },
+];
+
 const columnViewOptions = [
   {
     label: "Normal",
@@ -263,6 +278,7 @@ function ColumnPropertyView<T extends MultiBaseComp<TableChildrenType>>(props: {
   columnLabel: string;
 }) {
   const [viewMode, setViewMode] = useState('normal');
+  const [summaryRow, setSummaryRow] = useState(0);
   const { comp } = props;
   const selection = getSelectedRowKeys(comp.children.selection)[0] ?? "0";
   const [columnFilterType, setColumnFilterType] = useState<ColumnFilterOptionValueType>("all");
@@ -275,6 +291,7 @@ function ColumnPropertyView<T extends MultiBaseComp<TableChildrenType>>(props: {
     () => columns.filter((c) => columnFilterType === "all" || !c.children.hide.getView()),
     [columnFilterType, columns]
   );
+  const summaryRows = parseInt(comp.children.summaryRows.getView());
 
   const columnOptionToolbar = (
     <InsertDiv>
@@ -385,7 +402,15 @@ function ColumnPropertyView<T extends MultiBaseComp<TableChildrenType>>(props: {
               value={viewMode}
               onChange={(k) => setViewMode(k as ViewOptionType)}
             />
-            {column.propertyView(selection, viewMode)}
+            {viewMode === 'summary' && (
+              <Segmented
+                block
+                options={summaryRowOptions.slice(0, summaryRows)}
+                value={summaryRow}
+                onChange={(k) => setSummaryRow(k)}
+              />
+            )}
+            {column.propertyView(selection, viewMode, summaryRow)}
             {column.getView().isCustom && (
               <RedButton
                 onClick={() => {
@@ -473,6 +498,10 @@ export function compTablePropertyView<T extends MultiBaseComp<TableChildrenType>
             {comp.children.showSummary.propertyView({
               label: "Show Summary Row"
             })}
+            {comp.children.summaryRows.propertyView({
+              label: "Summary Rows",
+              radioButton: true,
+            })}
             {/* {comp.children.summary.getView().showSummary && summaryPropertyView(comp.children.summary)} */}
           </Section>
 
diff --git a/client/packages/lowcoder/src/comps/comps/tableComp/tableSummaryComp.tsx b/client/packages/lowcoder/src/comps/comps/tableComp/tableSummaryComp.tsx
index 5cc2541be..6096ef7a0 100644
--- a/client/packages/lowcoder/src/comps/comps/tableComp/tableSummaryComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/tableComp/tableSummaryComp.tsx
@@ -123,11 +123,13 @@ function TableSummaryCellView(props: {
 
 export function TableSummary(props: {
   tableSize: string;
+  summaryRows: number;
   columns: ColumnComp[];
   summaryRowStyle: TableSummaryRowStyleType;
 }) {
   const {
     columns,
+    summaryRows,
     summaryRowStyle,
     tableSize,
   } = props;
@@ -137,33 +139,35 @@ export function TableSummary(props: {
 
   return (
     <Table.Summary>
-      <TableSummaryRow>
-        {visibleColumns.map((column, index) => {
-          const summaryColumn = column.children.summary.getView();
-          return (
-            <TableSummaryCellView
-              index={index}
-              key={`summary-${column.getView().dataIndex}-${index}`}
-              tableSize={tableSize}
-              rowStyle={summaryRowStyle}
-              columnStyle={{
-                background: summaryColumn.background,
-                margin: summaryColumn.margin,
-                text: summaryColumn.text,
-                border: summaryColumn.border,
-                radius: summaryColumn.radius,
-                textSize: summaryColumn.textSize,
-                textWeight: summaryColumn.textWeight,
-                fontStyle:summaryColumn.fontStyle,
-                fontFamily: summaryColumn.fontFamily,
-                // borderWidth: summaryColumn.borderWidth,
-              }}
-            >
-              {summaryColumn.render({}, '').getView().view({})}
-            </TableSummaryCellView>
-          )
-        })}
-      </TableSummaryRow>
+      {Array.from(Array(summaryRows)).map((_, rowIndex) => (
+        <TableSummaryRow key={rowIndex}>
+          {visibleColumns.map((column, index) => {
+            const summaryColumn = column.children.summaryColumns.getView()[rowIndex].getView();
+            return (
+              <TableSummaryCellView
+                index={index}
+                key={`summary-${rowIndex}-${column.getView().dataIndex}-${index}`}
+                tableSize={tableSize}
+                rowStyle={summaryRowStyle}
+                columnStyle={{
+                  background: summaryColumn.background,
+                  margin: summaryColumn.margin,
+                  text: summaryColumn.text,
+                  border: summaryColumn.border,
+                  radius: summaryColumn.radius,
+                  textSize: summaryColumn.textSize,
+                  textWeight: summaryColumn.textWeight,
+                  fontStyle:summaryColumn.fontStyle,
+                  fontFamily: summaryColumn.fontFamily,
+                  // borderWidth: summaryColumn.borderWidth,
+                }}
+              >
+                {summaryColumn.render({}, '').getView().view({})}
+              </TableSummaryCellView>
+            )
+          })}
+        </TableSummaryRow>
+      ))}
     </Table.Summary>
   );
 }
diff --git a/client/packages/lowcoder/src/comps/comps/tableComp/tableTypes.tsx b/client/packages/lowcoder/src/comps/comps/tableComp/tableTypes.tsx
index 526f623cf..8751012c9 100644
--- a/client/packages/lowcoder/src/comps/comps/tableComp/tableTypes.tsx
+++ b/client/packages/lowcoder/src/comps/comps/tableComp/tableTypes.tsx
@@ -37,6 +37,21 @@ import { PaginationControl } from "./paginationControl";
 import { SelectionControl } from "./selectionControl";
 import { AutoHeightControl } from "comps/controls/autoHeightControl";
 
+const summarRowsOptions = [
+  {
+    label: "1",
+    value: "1",
+  },
+  {
+    label: "2",
+    value: "2",
+  },
+  {
+    label: "3",
+    value: "3",
+  },
+] as const;
+
 const sizeOptions = [
   {
     label: trans("table.small"),
@@ -208,6 +223,7 @@ const tableChildrenMap = {
   sort: valueComp<Array<SortValue>>([]),
   toolbar: TableToolbarComp,
   showSummary: BoolControl,
+  summaryRows: dropdownControl(summarRowsOptions, "1"),
   style: styleControl(TableStyle, 'style'),
   rowStyle: styleControl(TableRowStyle, 'rowStyle'),
   summaryRowStyle: styleControl(TableSummaryRowStyle, 'summaryRowStyle'),

From 525875909bc1a8a72f27c4321bfe9f0df7c585ab Mon Sep 17 00:00:00 2001
From: RAHEEL <mraheeliftikhar1994@gmail.com>
Date: Tue, 20 Aug 2024 16:31:49 +0500
Subject: [PATCH 04/10] cleanup table summary row

---
 .../column/tableSummaryColumnComp.tsx         | 154 ++----------------
 .../comps/tableComp/tablePropertyView.tsx     |   5 +-
 .../comps/tableComp/tableSummaryComp.tsx      |  61 ++++++-
 .../lowcoder/src/constants/themeConstants.ts  |   3 +
 .../packages/lowcoder/src/i18n/locales/en.ts  |   4 +-
 5 files changed, 78 insertions(+), 149 deletions(-)

diff --git a/client/packages/lowcoder/src/comps/comps/tableComp/column/tableSummaryColumnComp.tsx b/client/packages/lowcoder/src/comps/comps/tableComp/column/tableSummaryColumnComp.tsx
index 9d772b364..13f4f2d5b 100644
--- a/client/packages/lowcoder/src/comps/comps/tableComp/column/tableSummaryColumnComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/tableComp/column/tableSummaryColumnComp.tsx
@@ -1,137 +1,45 @@
-import { BoolControl } from "comps/controls/boolControl";
-import { ColorOrBoolCodeControl, NumberControl, RadiusControl, StringControl } from "comps/controls/codeControl";
-import { dropdownControl, HorizontalAlignmentControl } from "comps/controls/dropdownControl";
-import { MultiCompBuilder, stateComp, valueComp, withContext, withDefault } from "comps/generators";
+import { RadiusControl, StringControl } from "comps/controls/codeControl";
+import { HorizontalAlignmentControl } from "comps/controls/dropdownControl";
+import { MultiCompBuilder, valueComp, withDefault } from "comps/generators";
 import { withSelectedMultiContext } from "comps/generators/withSelectedMultiContext";
-import { genRandomKey } from "comps/utils/idGenerator";
 import { trans } from "i18n";
 import _ from "lodash";
 import {
   changeChildAction,
-  changeValueAction,
   CompAction,
-  CompActionTypes,
   ConstructorToComp,
-  ConstructorToDataType,
-  ConstructorToNodeType,
-  ConstructorToView,
   deferAction,
   fromRecord,
-  multiChangeAction,
   withFunction,
   wrapChildAction,
 } from "lowcoder-core";
-import { AlignClose, AlignLeft, AlignRight, IconRadius, BorderWidthIcon, TextSizeIcon, FontFamilyIcon, TextWeightIcon, ImageCompIcon, controlItem, Dropdown, OptionType } from "lowcoder-design";
-import { ColumnTypeComp, ColumnTypeCompMap } from "./columnTypeComp";
+import { IconRadius, TextSizeIcon, FontFamilyIcon, TextWeightIcon, controlItem } from "lowcoder-design";
+import { ColumnTypeComp } from "./columnTypeComp";
 import { ColorControl } from "comps/controls/colorControl";
-import { JSONValue } from "util/jsonTypes";
 import styled from "styled-components";
 import { TextOverflowControl } from "comps/controls/textOverflowControl";
 import { default as Divider } from "antd/es/divider";
-import { ColumnValueTooltip } from "./simpleColumnTypeComps";
 export type Render = ReturnType<ConstructorToComp<typeof RenderComp>["getOriginalComp"]>;
 export const RenderComp = withSelectedMultiContext(ColumnTypeComp);
 
-const columnWidthOptions = [
-  {
-    label: trans("table.auto"),
-    value: "auto",
-  },
-  {
-    label: trans("table.fixed"),
-    value: "fixed",
-  },
-] as const;
-
-const columnFixOptions = [
-  {
-    label: <AlignLeft />,
-    value: "left",
-  },
-  {
-    label: <AlignClose />,
-    value: "close",
-  },
-  {
-    label: <AlignRight />,
-    value: "right",
-  },
-] as const;
-
-const cellColorLabel = trans("table.cellColor");
-const CellColorTempComp = withContext(
-  new MultiCompBuilder({ color: ColorOrBoolCodeControl }, (props) => props.color)
-    .setPropertyViewFn((children) =>
-      children.color.propertyView({
-        label: cellColorLabel,
-        tooltip: trans("table.cellColorDesc"),
-      })
-    )
-    .build(),
-  ["currentCell", "currentRow"] as const
-);
-
-// @ts-ignore
-export class CellColorComp extends CellColorTempComp {
-  override getPropertyView() {
-    return controlItem({ filterText: cellColorLabel }, super.getPropertyView());
-  }
-}
-
-// fixme, should be infer from RowColorComp, but withContext type incorrect
-export type CellColorViewType = (param: {
-  currentRow: any;
-  currentCell: JSONValue | undefined; //number | string;
-}) => string;
-
-const cellTooltipLabel = trans("table.columnTooltip");
-const CellTooltipTempComp = withContext(
-  new MultiCompBuilder({ tooltip: StringControl }, (props) => props.tooltip)
-    .setPropertyViewFn((children) =>
-      children.tooltip.propertyView({
-        label: cellTooltipLabel,
-        tooltip: ColumnValueTooltip,
-      })
-    )
-    .build(),
-  ["currentCell", "currentRow", "currentIndex"] as const
-);
-
-// @ts-ignore
-export class CellTooltipComp extends CellTooltipTempComp {
-  override getPropertyView() {
-    return controlItem({ filterText: cellTooltipLabel }, super.getPropertyView());
-  }
-}
-
-// fixme, should be infer from RowColorComp, but withContext type incorrect
-export type CellTooltipViewType = (param: {
-  currentRow: any;
-  currentCell: JSONValue | undefined; //number | string;
-}) => string;
-
-
 export const columnChildrenMap = {
-  cellTooltip: CellTooltipComp,
+  cellTooltip: StringControl,
   // a custom column or a data column
   isCustom: valueComp<boolean>(false),
   // If it is a data column, it must be the name of the column and cannot be duplicated as a react key
   dataIndex: valueComp<string>(""),
-  hide: BoolControl,
   render: RenderComp,
   align: HorizontalAlignmentControl,
-  fixed: dropdownControl(columnFixOptions, "close"),
   background: withDefault(ColorControl, ""),
   margin: withDefault(RadiusControl, ""),
   text: withDefault(ColorControl, ""),
   border: withDefault(ColorControl, ""),
-  borderWidth: withDefault(RadiusControl, ""),
   radius: withDefault(RadiusControl, ""),
   textSize: withDefault(RadiusControl, ""),
   textWeight: withDefault(StringControl, "normal"),
   fontFamily: withDefault(StringControl, "sans-serif"),
   fontStyle: withDefault(StringControl, 'normal'),
-  cellColor: CellColorComp,
+  cellColor: StringControl,
   textOverflow: withDefault(TextOverflowControl, "ellipsis"),
   linkColor: withDefault(ColorControl, "#3377ff"),
   linkHoverColor: withDefault(ColorControl, ""),
@@ -139,11 +47,9 @@ export const columnChildrenMap = {
 };
 
 const StyledBorderRadiusIcon = styled(IconRadius)` width: 24px; margin: 0 8px 0 -3px; padding: 3px;`;
-const StyledBorderIcon = styled(BorderWidthIcon)` width: 24px; margin: 0 8px 0 -3px; padding: 3px;`;
 const StyledTextSizeIcon = styled(TextSizeIcon)` width: 24px; margin: 0 8px 0 -3px; padding: 3px;`;
 const StyledFontFamilyIcon = styled(FontFamilyIcon)` width: 24px; margin: 0 8px 0 -3px; padding: 3px;`;
 const StyledTextWeightIcon = styled(TextWeightIcon)` width: 24px; margin: 0 8px 0 -3px; padding: 3px;`;
-const StyledBackgroundImageIcon = styled(ImageCompIcon)` width: 24px; margin: 0 0px 0 -12px;`;
 
 /**
  * export for test.
@@ -159,28 +65,7 @@ const ColumnInitComp = new MultiCompBuilder(columnChildrenMap, (props, dispatch)
 
 export class SummaryColumnComp extends ColumnInitComp {
   override reduce(action: CompAction) {
-    let comp = super.reduce(action);
-    if (action.type === CompActionTypes.UPDATE_NODES_V2) {
-      comp = comp.setChild(
-        "cellColor",
-        comp.children.cellColor.reduce(
-          CellColorComp.changeContextDataAction({
-            currentCell: undefined,
-            currentRow: {},
-          })
-        )
-      );
-      comp = comp.setChild(
-        "cellTooltip",
-        comp.children.cellTooltip.reduce(
-          CellTooltipComp.changeContextDataAction({
-            currentCell: undefined,
-            currentRow: {},
-            currentIndex: 0,
-          })
-        )
-      );
-    }
+    const comp = super.reduce(action);
     return comp;
   }
 
@@ -218,20 +103,14 @@ export class SummaryColumnComp extends ColumnInitComp {
 
     return (
       <>
-        {this.children.cellTooltip.getPropertyView()}
-        {/* FIXME: cast type currently, return type of withContext should be corrected later */}
-        {this.children.render.getPropertyView()}
-        {this.children.hide.propertyView({
-          label: trans("prop.hide"),
+        {this.children.cellTooltip.propertyView({
+          label: trans("table.columnTooltip"),
         })}
+        {this.children.render.getPropertyView()}
         {this.children.align.propertyView({
           label: trans("table.align"),
           radioButton: true,
         })}
-        {this.children.fixed.propertyView({
-          label: trans("table.fixedColumn"),
-          radioButton: true,
-        })}
         {(columnType === 'link' || columnType === 'links') && (
           <>
             <Divider style={{ margin: '12px 0' }} />
@@ -266,11 +145,6 @@ export class SummaryColumnComp extends ColumnInitComp {
         {this.children.border.propertyView({
           label: trans('style.border')
         })}
-        {this.children.borderWidth.propertyView({
-          label: trans('style.borderWidth'),
-          preInputNode: <StyledBorderIcon as={BorderWidthIcon} title="" />,
-          placeholder: '1px',
-        })}
         {this.children.radius.propertyView({
           label: trans('style.borderRadius'),
           preInputNode: <StyledBorderRadiusIcon as={IconRadius} title="" />,
@@ -296,8 +170,10 @@ export class SummaryColumnComp extends ColumnInitComp {
           preInputNode: <StyledFontFamilyIcon as={FontFamilyIcon} title="" />,
           placeholder: 'normal'
         })}
-        {this.children.textOverflow.getPropertyView()}
-        {this.children.cellColor.getPropertyView()}
+        {/* {this.children.textOverflow.getPropertyView()} */}
+        {this.children.cellColor.propertyView({
+          label: trans("table.cellColor"),
+        })}
       </>
     );
   }
diff --git a/client/packages/lowcoder/src/comps/comps/tableComp/tablePropertyView.tsx b/client/packages/lowcoder/src/comps/comps/tableComp/tablePropertyView.tsx
index 3fdd0220a..f4bc9ec1f 100644
--- a/client/packages/lowcoder/src/comps/comps/tableComp/tablePropertyView.tsx
+++ b/client/packages/lowcoder/src/comps/comps/tableComp/tablePropertyView.tsx
@@ -496,13 +496,12 @@ export function compTablePropertyView<T extends MultiBaseComp<TableChildrenType>
 
           <Section name={"Summary"}>
             {comp.children.showSummary.propertyView({
-              label: "Show Summary Row"
+              label: trans("table.showSummary")
             })}
             {comp.children.summaryRows.propertyView({
-              label: "Summary Rows",
+              label: trans("table.totalSummaryRows"),
               radioButton: true,
             })}
-            {/* {comp.children.summary.getView().showSummary && summaryPropertyView(comp.children.summary)} */}
           </Section>
 
           <Section name={trans("prop.toolbar")}>
diff --git a/client/packages/lowcoder/src/comps/comps/tableComp/tableSummaryComp.tsx b/client/packages/lowcoder/src/comps/comps/tableComp/tableSummaryComp.tsx
index 6096ef7a0..9fd9565c4 100644
--- a/client/packages/lowcoder/src/comps/comps/tableComp/tableSummaryComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/tableComp/tableSummaryComp.tsx
@@ -1,9 +1,11 @@
 import { ThemeDetail } from "api/commonSettingApi";
 import { ColumnComp } from "comps/comps/tableComp/column/tableColumnComp";
-import { TableColumnStyleType, TableSummaryRowStyleType } from "comps/controls/styleControlConstants";
+import { TableColumnLinkStyleType, TableColumnStyleType, TableSummaryRowStyleType } from "comps/controls/styleControlConstants";
 import styled from "styled-components";
 import { defaultTheme } from "@lowcoder-ee/constants/themeConstants";
 import Table from "antd/es/table";
+import { ReactNode } from "react";
+import Tooltip from "antd/es/tooltip";
 
 const TableSummaryRow = styled(Table.Summary.Row)`
   td:last-child {
@@ -14,7 +16,7 @@ const TableSummaryRow = styled(Table.Summary.Row)`
 const TableSummarCell = styled(Table.Summary.Cell)<{
   $style: TableSummaryRowStyleType;
   $defaultThemeDetail: ThemeDetail;
-  // $linkStyle?: TableColumnLinkStyleType;
+  $linkStyle?: TableColumnLinkStyleType;
   $tableSize?: string;
   $autoHeight?: boolean;
 }>`
@@ -72,17 +74,53 @@ const TableSummarCell = styled(Table.Summary.Cell)<{
     > div > svg g {
       stroke: ${(props) => props.$style.text};
     }
+
+    > a,
+    > div  a {
+      color: ${(props) => props.$linkStyle?.text};
+
+      &:hover {
+        color: ${(props) => props.$linkStyle?.hoverText};
+      }
+
+      &:active {
+        color: ${(props) => props.$linkStyle?.activeText}};
+      }
+    }
   }
 `;
 
+const CellWrapper = ({
+  children,
+  tooltipTitle,
+}: {
+  children: ReactNode,
+  tooltipTitle?: string,
+}) => {
+  if (tooltipTitle) {
+    return (
+      <Tooltip title={tooltipTitle} placement="topLeft">
+        {children}
+      </Tooltip>
+    )
+  }
+  return (
+    <>{children}</>
+  )
+};
+
 function TableSummaryCellView(props: {
   index: number;
   key: string;
   children: any;
+  align?: any;
   rowStyle: TableSummaryRowStyleType;
   columnStyle: TableColumnStyleType;
+  linkStyle: TableColumnLinkStyleType;
   tableSize?: string;
   autoHeight?: boolean;
+  cellColor: string;
+  cellTooltip: string;
 }) {
   const {
     children,
@@ -90,18 +128,19 @@ function TableSummaryCellView(props: {
     columnStyle,
     tableSize,
     autoHeight,
+    cellColor,
+    cellTooltip,
     ...restProps
   } = props;
 
   const style = {
-    background: columnStyle.background || rowStyle.background,
+    background: cellColor || columnStyle.background || rowStyle.background,
     margin: columnStyle.margin || rowStyle.margin,
     text: columnStyle.text || rowStyle.text,
     border: columnStyle.border || rowStyle.border,
     borderWidth: rowStyle.borderWidth,
     borderStyle: rowStyle.borderStyle,
     radius: columnStyle.radius || rowStyle.radius,
-    // borderWidth: columnStyle.borderWidth || rowStyle.borderWidth,
     textSize: columnStyle.textSize || rowStyle.textSize,
     textWeight: rowStyle.textWeight || columnStyle.textWeight,
     fontFamily: rowStyle.fontFamily || columnStyle.fontFamily,
@@ -116,7 +155,9 @@ function TableSummaryCellView(props: {
       $tableSize={tableSize}
       $autoHeight={autoHeight}
     >
-      {children}
+      <CellWrapper tooltipTitle={cellTooltip}>
+        <div>{children}</div>
+      </CellWrapper>
     </TableSummarCell>
   );
 }
@@ -143,12 +184,16 @@ export function TableSummary(props: {
         <TableSummaryRow key={rowIndex}>
           {visibleColumns.map((column, index) => {
             const summaryColumn = column.children.summaryColumns.getView()[rowIndex].getView();
+            console.log(summaryColumn.cellTooltip)
             return (
               <TableSummaryCellView
                 index={index}
                 key={`summary-${rowIndex}-${column.getView().dataIndex}-${index}`}
                 tableSize={tableSize}
                 rowStyle={summaryRowStyle}
+                align={summaryColumn.align}
+                cellColor={summaryColumn.cellColor}
+                cellTooltip={summaryColumn.cellTooltip}
                 columnStyle={{
                   background: summaryColumn.background,
                   margin: summaryColumn.margin,
@@ -159,7 +204,11 @@ export function TableSummary(props: {
                   textWeight: summaryColumn.textWeight,
                   fontStyle:summaryColumn.fontStyle,
                   fontFamily: summaryColumn.fontFamily,
-                  // borderWidth: summaryColumn.borderWidth,
+                }}
+                linkStyle={{
+                  text: summaryColumn.linkColor,
+                  hoverText: summaryColumn.linkHoverColor,
+                  activeText: summaryColumn.linkActiveColor,
                 }}
               >
                 {summaryColumn.render({}, '').getView().view({})}
diff --git a/client/packages/lowcoder/src/constants/themeConstants.ts b/client/packages/lowcoder/src/constants/themeConstants.ts
index 7d0b4062e..455046fce 100644
--- a/client/packages/lowcoder/src/constants/themeConstants.ts
+++ b/client/packages/lowcoder/src/constants/themeConstants.ts
@@ -71,6 +71,9 @@ const table = {
   },
   columnsStyle: {
     radius: '0px'
+  },
+  summaryRowStyle: {
+    radius: '0px'
   }
 }
 
diff --git a/client/packages/lowcoder/src/i18n/locales/en.ts b/client/packages/lowcoder/src/i18n/locales/en.ts
index 3c39a4cc5..15bbce690 100644
--- a/client/packages/lowcoder/src/i18n/locales/en.ts
+++ b/client/packages/lowcoder/src/i18n/locales/en.ts
@@ -1998,7 +1998,9 @@ export const en = {
     "iconNull": "Icon When Null",
     "allColumn": "All",
     "visibleColumn": "Visible",
-    "emptyColumns": "No Columns Are Currently Visible"
+    "emptyColumns": "No Columns Are Currently Visible",
+    "showSummary": "Show Summary Row",
+    "totalSummaryRows": "Total Rows",
   },
 
 

From 52e9166bdb971ef19be8302068fff24fb08cc4be Mon Sep 17 00:00:00 2001
From: RAHEEL <mraheeliftikhar1994@gmail.com>
Date: Tue, 20 Aug 2024 23:22:12 +0500
Subject: [PATCH 05/10] handle summary rows when expandable is enabled

---
 .../lowcoder/src/comps/comps/tableComp/tableCompView.tsx  | 1 +
 .../src/comps/comps/tableComp/tableSummaryComp.tsx        | 8 ++++++--
 2 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/client/packages/lowcoder/src/comps/comps/tableComp/tableCompView.tsx b/client/packages/lowcoder/src/comps/comps/tableComp/tableCompView.tsx
index c43474dee..7b13595b8 100644
--- a/client/packages/lowcoder/src/comps/comps/tableComp/tableCompView.tsx
+++ b/client/packages/lowcoder/src/comps/comps/tableComp/tableCompView.tsx
@@ -859,6 +859,7 @@ export function TableCompView(props: {
     return (
       <TableSummary
         tableSize={size}
+        expandableRows={Boolean(expansion.expandModalView)}
         summaryRows={parseInt(summaryRows)}
         columns={columns}
         summaryRowStyle={summaryRowStyle}
diff --git a/client/packages/lowcoder/src/comps/comps/tableComp/tableSummaryComp.tsx b/client/packages/lowcoder/src/comps/comps/tableComp/tableSummaryComp.tsx
index 9fd9565c4..da75ef5eb 100644
--- a/client/packages/lowcoder/src/comps/comps/tableComp/tableSummaryComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/tableComp/tableSummaryComp.tsx
@@ -164,6 +164,7 @@ function TableSummaryCellView(props: {
 
 export function TableSummary(props: {
   tableSize: string;
+  expandableRows: boolean;
   summaryRows: number;
   columns: ColumnComp[];
   summaryRowStyle: TableSummaryRowStyleType;
@@ -173,8 +174,12 @@ export function TableSummary(props: {
     summaryRows,
     summaryRowStyle,
     tableSize,
+    expandableRows,
   } = props;
-  const visibleColumns = columns.filter(col => !col.getView().hide);
+  let visibleColumns = columns.filter(col => !col.getView().hide);
+  if (expandableRows) {
+    visibleColumns.unshift(new ColumnComp({}));
+  }
   
   if (!visibleColumns.length) return <></>;
 
@@ -184,7 +189,6 @@ export function TableSummary(props: {
         <TableSummaryRow key={rowIndex}>
           {visibleColumns.map((column, index) => {
             const summaryColumn = column.children.summaryColumns.getView()[rowIndex].getView();
-            console.log(summaryColumn.cellTooltip)
             return (
               <TableSummaryCellView
                 index={index}

From 2a08d403e4a651317abb2348e3cf4d8bb5d02ca6 Mon Sep 17 00:00:00 2001
From: RAHEEL <mraheeliftikhar1994@gmail.com>
Date: Sat, 24 Aug 2024 01:55:51 +0500
Subject: [PATCH 06/10] allow inline new row addition

---
 .../src/components/table/EditableCell.tsx     |  3 +-
 .../column/columnTypeComps/columnTagsComp.tsx |  2 +-
 .../tableComp/column/tableColumnComp.tsx      | 17 +++-
 .../tableComp/column/tableColumnListComp.tsx  | 13 ++-
 .../src/comps/comps/tableComp/tableComp.tsx   | 92 ++++++++++++++++---
 .../comps/comps/tableComp/tableCompView.tsx   | 89 ++++++++++++++++--
 .../comps/tableComp/tablePropertyView.tsx     |  3 +
 .../src/comps/comps/tableComp/tableTypes.tsx  |  4 +-
 .../src/comps/comps/tableComp/tableUtils.tsx  |  3 +-
 .../packages/lowcoder/src/i18n/locales/en.ts  |  1 +
 10 files changed, 198 insertions(+), 29 deletions(-)

diff --git a/client/packages/lowcoder/src/components/table/EditableCell.tsx b/client/packages/lowcoder/src/components/table/EditableCell.tsx
index 3e68cfdff..b393e1d66 100644
--- a/client/packages/lowcoder/src/components/table/EditableCell.tsx
+++ b/client/packages/lowcoder/src/components/table/EditableCell.tsx
@@ -164,7 +164,8 @@ export function EditableCell<T extends JSONValue>(props: EditableCellProps<T>) {
                 width: '100%',
                 height: '100%',
               }}
-              onDoubleClick={enterEditFn}
+              // onDoubleClick={enterEditFn}
+              onClick={enterEditFn}
             >
             </div>
           </CellWrapper>
diff --git a/client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnTagsComp.tsx b/client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnTagsComp.tsx
index 97278acf8..dd7747a46 100644
--- a/client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnTagsComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnTagsComp.tsx
@@ -259,7 +259,7 @@ export const ColumnTagsComp = (function () {
       tagOptionsList = props.tagColors;
       let value = props.changeValue ?? getBaseValue(props, dispatch);
       value = typeof value === "string" && value.split(",")[1] ? value.split(",") : value;
-      const tags = _.isArray(value) ? value : [value];
+      const tags = _.isArray(value) ? value : (value.length ? [value] : []);
       const view = tags.map((tag, index) => {
         // The actual eval value is of type number or boolean
         const tagText = String(tag);
diff --git a/client/packages/lowcoder/src/comps/comps/tableComp/column/tableColumnComp.tsx b/client/packages/lowcoder/src/comps/comps/tableComp/column/tableColumnComp.tsx
index b4e5b15c1..099083996 100644
--- a/client/packages/lowcoder/src/comps/comps/tableComp/column/tableColumnComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/tableComp/column/tableColumnComp.tsx
@@ -32,6 +32,7 @@ import { ColumnValueTooltip } from "./simpleColumnTypeComps";
 import { SummaryColumnComp } from "./tableSummaryColumnComp";
 import Segmented from "antd/es/segmented";
 import { list } from "@lowcoder-ee/comps/generators/list";
+import { EMPTY_ROW_KEY } from "../tableCompView";
 export type Render = ReturnType<ConstructorToComp<typeof RenderComp>["getOriginalComp"]>;
 export const RenderComp = withSelectedMultiContext(ColumnTypeComp);
 
@@ -385,9 +386,9 @@ export class ColumnComp extends ColumnInitComp {
 
   getChangeSet() {
     const dataIndex = this.children.dataIndex.getView();
-    const changeSet = _.mapValues(this.children.render.getMap(), (value) =>
-      value.getComp().children.comp.children.changeValue.getView()
-    );
+    const changeSet = _.mapValues(this.children.render.getMap(), (value) =>{
+     return value.getComp().children.comp.children.changeValue.getView()
+    });
     return { [dataIndex]: changeSet };
   }
 
@@ -404,6 +405,16 @@ export class ColumnComp extends ColumnInitComp {
     );
   }
 
+  dispatchClearInsertSet() {
+    const renderMap = this.children.render.getMap();
+    const insertMapKeys = Object.keys(renderMap).filter(key => key.startsWith(EMPTY_ROW_KEY));
+    const insertMap: Record<string, any> = {};
+    insertMapKeys.forEach(key => {
+      const render = renderMap[key];
+      render.getComp().children.comp.children.changeValue.dispatchChangeValueAction(null);
+    });
+  }
+
   static setSelectionAction(key: string) {
     return wrapChildAction("render", RenderComp.setSelectionAction(key));
   }
diff --git a/client/packages/lowcoder/src/comps/comps/tableComp/column/tableColumnListComp.tsx b/client/packages/lowcoder/src/comps/comps/tableComp/column/tableColumnListComp.tsx
index 04ea448cc..37eadfaff 100644
--- a/client/packages/lowcoder/src/comps/comps/tableComp/column/tableColumnListComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/tableComp/column/tableColumnListComp.tsx
@@ -18,6 +18,7 @@ import { shallowEqual } from "react-redux";
 import { JSONObject, JSONValue } from "util/jsonTypes";
 import { lastValueIfEqual } from "util/objectUtils";
 import { SummaryColumnComp } from "./tableSummaryColumnComp";
+import { EMPTY_ROW_KEY } from "../tableCompView";
 
 /**
  * column list
@@ -72,14 +73,17 @@ export class ColumnListComp extends ColumnListTmpComp {
     return super.reduce(action);
   }
 
-  getChangeSet() {
+  getChangeSet(filterNewRowsChange?: boolean) {
     const changeSet: Record<string, Record<string, JSONValue>> = {};
     const columns = this.getView();
     columns.forEach((column) => {
       const columnChangeSet = column.getChangeSet();
       Object.keys(columnChangeSet).forEach((dataIndex) => {
         Object.keys(columnChangeSet[dataIndex]).forEach((key) => {
-          if (!_.isNil(columnChangeSet[dataIndex][key])) {
+          const includeChange = filterNewRowsChange
+            ? key.startsWith(EMPTY_ROW_KEY)
+            : !key.startsWith(EMPTY_ROW_KEY);
+          if (!_.isNil(columnChangeSet[dataIndex][key]) && includeChange) {
             if (!changeSet[key]) changeSet[key] = {};
             changeSet[key][dataIndex] = columnChangeSet[dataIndex][key];
           }
@@ -94,6 +98,11 @@ export class ColumnListComp extends ColumnListTmpComp {
     columns.forEach((column) => column.dispatchClearChangeSet());
   }
 
+  dispatchClearInsertSet() {
+    const columns = this.getView();
+    columns.forEach((column) => column.dispatchClearInsertSet());
+  }
+
   /**
    * If the table data changes, call this method to trigger the action
    */
diff --git a/client/packages/lowcoder/src/comps/comps/tableComp/tableComp.tsx b/client/packages/lowcoder/src/comps/comps/tableComp/tableComp.tsx
index 5dedd1bba..4a782deb8 100644
--- a/client/packages/lowcoder/src/comps/comps/tableComp/tableComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/tableComp/tableComp.tsx
@@ -1,6 +1,6 @@
 import { tableDataRowExample } from "comps/comps/tableComp/column/tableColumnListComp";
 import { getPageSize } from "comps/comps/tableComp/paginationControl";
-import { TableCompView } from "comps/comps/tableComp/tableCompView";
+import { EMPTY_ROW_KEY, TableCompView } from "comps/comps/tableComp/tableCompView";
 import { TableFilter } from "comps/comps/tableComp/tableToolbarComp";
 import {
   columnHide,
@@ -40,7 +40,11 @@ import {
   deferAction,
   executeQueryAction,
   fromRecord,
+  FunctionNode,
+  Node,
   onlyEvalAction,
+  RecordNode,
+  RecordNodeToValue,
   routeByNameAction,
   withFunction,
   wrapChildAction,
@@ -53,7 +57,7 @@ import { getSelectedRowKeys } from "./selectionControl";
 import { compTablePropertyView } from "./tablePropertyView";
 import { RowColorComp, RowHeightComp, TableChildrenView, TableInitComp } from "./tableTypes";
 
-import { useContext } from "react";
+import { useContext, useState } from "react";
 import { EditorContext } from "comps/editorState";
 
 export class TableImplComp extends TableInitComp implements IContainer {
@@ -401,12 +405,11 @@ export class TableImplComp extends TableInitComp implements IContainer {
     )[0];
   }
 
-  changeSetNode() {
-    const nodes = {
-      dataIndexes: this.children.columns.getColumnsNode("dataIndex"),
-      renders: this.children.columns.getColumnsNode("render"),
-    };
-    const resNode = withFunction(fromRecord(nodes), (input) => {
+  private getUpsertSetResNode(
+    nodes: Record<string, RecordNode<Record<string, Node<any>>>>,
+    filterNewRows?: boolean,
+  ) {
+    return withFunction(fromRecord(nodes), (input) => {
       // merge input.dataIndexes and input.withParams into one structure
       const dataIndexRenderDict = _(input.dataIndexes)
         .mapValues((dataIndex, idx) => input.renders[idx])
@@ -416,7 +419,8 @@ export class TableImplComp extends TableInitComp implements IContainer {
       _.forEach(dataIndexRenderDict, (render, dataIndex) => {
         _.forEach(render[MAP_KEY], (value, key) => {
           const changeValue = (value.comp as any).comp.changeValue;
-          if (!_.isNil(changeValue)) {
+          const includeRecord = (filterNewRows && key.startsWith(EMPTY_ROW_KEY)) || (!filterNewRows && !key.startsWith(EMPTY_ROW_KEY));
+          if (!_.isNil(changeValue) && includeRecord) {
             if (!record[key]) record[key] = {};
             record[key][dataIndex] = changeValue;
           }
@@ -424,18 +428,36 @@ export class TableImplComp extends TableInitComp implements IContainer {
       });
       return record;
     });
+  }
+
+  changeSetNode() {
+    const nodes = {
+      dataIndexes: this.children.columns.getColumnsNode("dataIndex"),
+      renders: this.children.columns.getColumnsNode("render"),
+    };
+
+    const resNode = this.getUpsertSetResNode(nodes);
     return lastValueIfEqual(this, "changeSetNode", [resNode, nodes] as const, (a, b) =>
       shallowEqual(a[1], b[1])
     )[0];
   }
 
-  toUpdateRowsNode() {
+  insertSetNode() {
     const nodes = {
-      oriDisplayData: this.oriDisplayDataNode(),
-      indexes: this.displayDataIndexesNode(),
-      changeSet: this.changeSetNode(),
+      dataIndexes: this.children.columns.getColumnsNode("dataIndex"),
+      renders: this.children.columns.getColumnsNode("render"),
     };
-    const resNode = withFunction(fromRecord(nodes), (input) => {
+
+    const resNode = this.getUpsertSetResNode(nodes, true);
+    return lastValueIfEqual(this, "insertSetNode", [resNode, nodes] as const, (a, b) =>
+      shallowEqual(a[1], b[1])
+    )[0];
+  }
+
+  private getToUpsertRowsResNodes(
+    nodes: Record<string, FunctionNode<any, any>>
+  ) {
+    return withFunction(fromRecord(nodes), (input) => {
       const res = _(input.changeSet)
         .map((changeValues, oriIndex) => {
           const idx = input.indexes[oriIndex];
@@ -446,11 +468,34 @@ export class TableImplComp extends TableInitComp implements IContainer {
       // console.info("toUpdateRowsNode. input: ", input, " res: ", res);
       return res;
     });
+  }
+
+  toUpdateRowsNode() {
+    const nodes = {
+      oriDisplayData: this.oriDisplayDataNode(),
+      indexes: this.displayDataIndexesNode(),
+      changeSet: this.changeSetNode(),
+    };
+
+    const resNode = this.getToUpsertRowsResNodes(nodes);
     return lastValueIfEqual(this, "toUpdateRowsNode", [resNode, nodes] as const, (a, b) =>
       shallowEqual(a[1], b[1])
     )[0];
   }
 
+  toInsertRowsNode() {
+    const nodes = {
+      oriDisplayData: this.oriDisplayDataNode(),
+      indexes: this.displayDataIndexesNode(),
+      changeSet: this.insertSetNode(),
+    };
+
+    const resNode = this.getToUpsertRowsResNodes(nodes);
+    return lastValueIfEqual(this, "toInsertRowsNode", [resNode, nodes] as const, (a, b) =>
+      shallowEqual(a[1], b[1])
+    )[0];
+  }
+
   columnAggrNode() {
     const nodes = {
       oriDisplayData: this.oriDisplayDataNode(),
@@ -473,6 +518,7 @@ export class TableImplComp extends TableInitComp implements IContainer {
 }
 
 let TableTmpComp = withViewFn(TableImplComp, (comp) => {
+  const [emptyRows, setEmptyRows] = useState([]);
   return (
     <HidableView hidden={comp.children.hidden.getView()}>
       <TableCompView
@@ -687,6 +733,14 @@ export const TableComp = withExposingConfigs(TableTmpComp, [
     (input) => input.changeSet,
     trans("table.changeSetDesc")
   ),
+  new CompDepsConfig(
+    "insertSet",
+    (comp) => ({
+      insertSet: comp.insertSetNode(),
+    }),
+    (input) => input.insertSet,
+    trans("table.changeSetDesc")
+  ),
   new CompDepsConfig(
     "toUpdateRows",
     (comp) => ({
@@ -697,6 +751,16 @@ export const TableComp = withExposingConfigs(TableTmpComp, [
     },
     trans("table.toUpdateRowsDesc")
   ),
+  new CompDepsConfig(
+    "toInsertRows",
+    (comp) => ({
+      toInsertRows: comp.toInsertRowsNode(),
+    }),
+    (input) => {
+      return input.toInsertRows;
+    },
+    trans("table.toUpdateRowsDesc")
+  ),
   new DepsConfig(
     "pageNo",
     (children) => {
diff --git a/client/packages/lowcoder/src/comps/comps/tableComp/tableCompView.tsx b/client/packages/lowcoder/src/comps/comps/tableComp/tableCompView.tsx
index 7b13595b8..151896ddf 100644
--- a/client/packages/lowcoder/src/comps/comps/tableComp/tableCompView.tsx
+++ b/client/packages/lowcoder/src/comps/comps/tableComp/tableCompView.tsx
@@ -5,6 +5,7 @@ import { RowColorViewType, RowHeightViewType, TableEventOptionValues } from "com
 import {
   COL_MIN_WIDTH,
   COLUMN_CHILDREN_KEY,
+  ColumnsAggrData,
   columnsToAntdFormat,
   CustomColumnType,
   OB_ROW_ORI_INDEX,
@@ -44,7 +45,8 @@ import { defaultTheme } from "@lowcoder-ee/constants/themeConstants";
 import { childrenToProps } from "@lowcoder-ee/comps/generators/multi";
 import { getVerticalMargin } from "@lowcoder-ee/util/cssUtil";
 import { TableSummary } from "./tableSummaryComp";
-import { SummaryColumnComp } from "./column/tableSummaryColumnComp";
+
+export const EMPTY_ROW_KEY = 'empty_row';
 
 function genLinerGradient(color: string) {
   return `linear-gradient(${color}, ${color})`;
@@ -716,11 +718,25 @@ function ResizeableTable<RecordType extends object>(props: CustomTableProps<Reco
 
 ResizeableTable.whyDidYouRender = true;
 
+const createNewEmptyRow = (
+  rowIndex: number,
+  columnsAggrData: ColumnsAggrData,
+) => {
+  const emptyRowData: RecordType = {
+    [OB_ROW_ORI_INDEX]: `${EMPTY_ROW_KEY}_${rowIndex}`,
+  };
+  Object.keys(columnsAggrData).forEach(columnKey => {
+    emptyRowData[columnKey] = '';
+  });
+  return emptyRowData;
+}
+
 export function TableCompView(props: {
   comp: InstanceType<typeof TableImplComp>;
   onRefresh: (allQueryNames: Array<string>, setLoading: (loading: boolean) => void) => void;
   onDownload: (fileName: string) => void;
 }) {
+  const [emptyRowsMap, setEmptyRowsMap] = useState<Record<string, RecordType>>({});
   const editorState = useContext(EditorContext);
   const { width, ref } = useResizeDetector({
     refreshMode: "debounce",
@@ -745,15 +761,16 @@ export function TableCompView(props: {
   const columnsStyle = compChildren.columnsStyle.getView();
   const summaryRowStyle = compChildren.summaryRowStyle.getView();
   const changeSet = useMemo(() => compChildren.columns.getChangeSet(), [compChildren.columns]);
-  const hasChange = useMemo(() => !_.isEmpty(changeSet), [changeSet]);
+  const insertSet = useMemo(() => compChildren.columns.getChangeSet(true), [compChildren.columns]);
+  const hasChange = useMemo(() => !_.isEmpty(changeSet) || !_.isEmpty(insertSet), [changeSet, insertSet]);
   const columns = useMemo(() => compChildren.columns.getView(), [compChildren.columns]);
   const columnViews = useMemo(() => columns.map((c) => c.getView()), [columns]);
   const data = comp.filterData;
   const sort = useMemo(() => compChildren.sort.getView(), [compChildren.sort]);
   const toolbar = useMemo(() => compChildren.toolbar.getView(), [compChildren.toolbar]);
-  // const summary = useMemo(() => compChildren.summary.getView(), [compChildren.summary]);
   const showSummary = useMemo(() => compChildren.showSummary.getView(), [compChildren.showSummary]);
   const summaryRows = useMemo(() => compChildren.summaryRows.getView(), [compChildren.summaryRows]);
+  const inlineAddNewRow = useMemo(() => compChildren.inlineAddNewRow.getView(), [compChildren.inlineAddNewRow]);
   const pagination = useMemo(() => compChildren.pagination.getView(), [compChildren.pagination]);
   const size = useMemo(() => compChildren.size.getView(), [compChildren.size]);
   const onEvent = useMemo(() => compChildren.onEvent.getView(), [compChildren.onEvent]);
@@ -792,6 +809,58 @@ export function TableCompView(props: {
     [compChildren.data]
   );
 
+  const updateEmptyRows = useCallback(() => {
+    if (!inlineAddNewRow) {
+      setEmptyRowsMap({})
+      setTimeout(() => compChildren.columns.dispatchClearInsertSet());
+      return;
+    }
+
+    const newRows: Record<string, RecordType> = {...emptyRowsMap};
+    const existingRowsKeys = Object.keys(newRows);
+    const existingRowsCount = existingRowsKeys.length;
+    const updatedRowsKeys = Object.keys(insertSet).filter(
+      key => key.startsWith(EMPTY_ROW_KEY)
+    );
+    const updatedRowsCount = updatedRowsKeys.length;
+    const removedRowsKeys = existingRowsKeys.filter(
+      x => !updatedRowsKeys.includes(x)
+    );
+
+    removedRowsKeys.forEach(rowKey => {
+      if (
+        rowKey === existingRowsKeys[existingRowsCount - 1]
+        || rowKey === existingRowsKeys[existingRowsCount - 2]
+      ) {
+        delete newRows[rowKey];
+      } else {
+        const ele = document.querySelector<HTMLElement>(`[data-row-key=${rowKey}]`);
+        if (ele) {
+          ele.style.display = 'none';
+        }
+      }
+    })
+
+    const lastRowKey = updatedRowsCount ? updatedRowsKeys[updatedRowsCount - 1] : '';
+    const lastRowIndex = updatedRowsCount ? parseInt(lastRowKey.replace(`${EMPTY_ROW_KEY}_`, '')) : -1;
+
+    const newRowIndex = lastRowIndex + 1;
+    const newRowKey = `${EMPTY_ROW_KEY}_${newRowIndex}`;
+    newRows[newRowKey] = createNewEmptyRow(newRowIndex, columnsAggrData);
+    setEmptyRowsMap(newRows);
+  }, [
+    inlineAddNewRow,
+    JSON.stringify(emptyRowsMap),
+    JSON.stringify(insertSet),
+    setEmptyRowsMap,
+    createNewEmptyRow,
+  ]);
+
+  useEffect(() => {
+    updateEmptyRows();
+  }, [updateEmptyRows]);
+
+
   const pageDataInfo = useMemo(() => {
     // Data pagination
     let pagedData = data;
@@ -806,6 +875,7 @@ export function TableCompView(props: {
       }
       pagedData = pagedData.slice(offset, offset + pagination.pageSize);
     }
+
     return {
       total: total,
       current: current,
@@ -849,7 +919,14 @@ export function TableCompView(props: {
       }}
       hasChange={hasChange}
       onSaveChanges={() => handleChangeEvent("saveChanges")}
-      onCancelChanges={() => handleChangeEvent("cancelChanges")}
+      onCancelChanges={() => {
+        handleChangeEvent("cancelChanges");
+        if (inlineAddNewRow) {
+          setEmptyRowsMap({
+            [`${EMPTY_ROW_KEY}_0`]: createNewEmptyRow(0, columnsAggrData),
+          });
+        }
+      }}
       onEvent={onEvent}
     />
   );
@@ -916,6 +993,7 @@ export function TableCompView(props: {
                   }
                 }
               }}
+              // rowKey={OB_ROW_ORI_INDEX}
               rowColorFn={compChildren.rowColor.getView() as any}
               rowHeightFn={compChildren.rowHeight.getView() as any}
               {...compChildren.selection.getView()(onEvent)}
@@ -928,7 +1006,7 @@ export function TableCompView(props: {
               columnsStyle={columnsStyle}
               viewModeResizable={compChildren.viewModeResizable.getView()}
               visibleResizables={compChildren.visibleResizables.getView()}
-              dataSource={pageDataInfo.data}
+              dataSource={pageDataInfo.data.concat(Object.values(emptyRowsMap))}
               size={compChildren.size.getView()}
               rowAutoHeight={rowAutoHeight}
               tableLayout="fixed"
@@ -947,7 +1025,6 @@ export function TableCompView(props: {
               }}
               summary={summaryView}
             />
-
             <SlotConfigContext.Provider value={{ modalWidth: width && Math.max(width, 300) }}>
               {expansion.expandModalView}
             </SlotConfigContext.Provider>
diff --git a/client/packages/lowcoder/src/comps/comps/tableComp/tablePropertyView.tsx b/client/packages/lowcoder/src/comps/comps/tableComp/tablePropertyView.tsx
index f4bc9ec1f..818a40d6e 100644
--- a/client/packages/lowcoder/src/comps/comps/tableComp/tablePropertyView.tsx
+++ b/client/packages/lowcoder/src/comps/comps/tableComp/tablePropertyView.tsx
@@ -550,6 +550,9 @@ export function compTablePropertyView<T extends MultiBaseComp<TableChildrenType>
         <>
           <Section name={sectionNames.advanced}>
             {comp.children.expansion.getPropertyView()}
+            {comp.children.inlineAddNewRow.propertyView({
+              label: trans("table.inlineAddNewRow")
+            })}
             {comp.children.showDataLoadSpinner.propertyView({
               label: trans("table.showDataLoadSpinner"),
             })}
diff --git a/client/packages/lowcoder/src/comps/comps/tableComp/tableTypes.tsx b/client/packages/lowcoder/src/comps/comps/tableComp/tableTypes.tsx
index 8751012c9..0c2969327 100644
--- a/client/packages/lowcoder/src/comps/comps/tableComp/tableTypes.tsx
+++ b/client/packages/lowcoder/src/comps/comps/tableComp/tableTypes.tsx
@@ -31,7 +31,7 @@ import {
   RecordConstructorToView,
 } from "lowcoder-core";
 import { controlItem } from "lowcoder-design";
-import { JSONObject } from "util/jsonTypes";
+import { JSONArray, JSONObject } from "util/jsonTypes";
 import { ExpansionControl } from "./expansionControl";
 import { PaginationControl } from "./paginationControl";
 import { SelectionControl } from "./selectionControl";
@@ -215,6 +215,7 @@ const tableChildrenMap = {
   showVerticalScrollbar: BoolControl,
   showHorizontalScrollbar: BoolControl,
   data: withIsLoadingMethod(JSONObjectArrayControl),
+  newData: stateComp<JSONArray>([]),
   showDataLoadSpinner: withDefault(BoolPureControl, true),
   columns: ColumnListComp,
   size: dropdownControl(sizeOptions, "middle"),
@@ -246,6 +247,7 @@ const tableChildrenMap = {
   dynamicColumnConfig: ArrayStringControl,
   expansion: ExpansionControl,
   selectedCell: stateComp<JSONObject>({}),
+  inlineAddNewRow: BoolControl,
 };
 
 export const TableInitComp = (function () {
diff --git a/client/packages/lowcoder/src/comps/comps/tableComp/tableUtils.tsx b/client/packages/lowcoder/src/comps/comps/tableComp/tableUtils.tsx
index e180eb6d3..8f51758bf 100644
--- a/client/packages/lowcoder/src/comps/comps/tableComp/tableUtils.tsx
+++ b/client/packages/lowcoder/src/comps/comps/tableComp/tableUtils.tsx
@@ -20,6 +20,7 @@ import { ColumnListComp, tableDataRowExample } from "./column/tableColumnListCom
 import { TableColumnLinkStyleType, TableColumnStyleType } from "comps/controls/styleControlConstants";
 import Tooltip from "antd/es/tooltip";
 import InfoCircleOutlined from "@ant-design/icons/InfoCircleOutlined";
+import { EMPTY_ROW_KEY } from "./tableCompView";
 
 export const COLUMN_CHILDREN_KEY = "children";
 export const OB_ROW_ORI_INDEX = "__ob_origin_index";
@@ -381,7 +382,7 @@ export function columnsToAntdFormat(
           )
           .getView()
           .view({
-            editable: column.editable,
+            editable: record[OB_ROW_ORI_INDEX].startsWith(EMPTY_ROW_KEY) || column.editable,
             size,
             candidateTags: tags,
             candidateStatus: status,
diff --git a/client/packages/lowcoder/src/i18n/locales/en.ts b/client/packages/lowcoder/src/i18n/locales/en.ts
index 15bbce690..3788f1ae2 100644
--- a/client/packages/lowcoder/src/i18n/locales/en.ts
+++ b/client/packages/lowcoder/src/i18n/locales/en.ts
@@ -2001,6 +2001,7 @@ export const en = {
     "emptyColumns": "No Columns Are Currently Visible",
     "showSummary": "Show Summary Row",
     "totalSummaryRows": "Total Rows",
+    "inlineAddNewRow": "Inline Add New Row",
   },
 
 

From f82d015b0e5bdfc9874c6645bf6d750af4ddb723 Mon Sep 17 00:00:00 2001
From: RAHEEL <mraheeliftikhar1994@gmail.com>
Date: Tue, 27 Aug 2024 13:10:08 +0500
Subject: [PATCH 07/10] inline row addition fixes + tab based key navigation in
 editable table cells

---
 .../src/components/table/EditableCell.tsx     |  17 ++-
 .../selectInputComp/selectCompConstants.tsx   |   2 +
 .../columnTypeComps/ColumnNumberComp.tsx      |   2 +-
 .../column/columnTypeComps/columnDateComp.tsx |  10 +-
 .../columnTypeComps/columnSelectComp.tsx      |  83 ++++++++++-
 .../columnTypeComps/columnStatusComp.tsx      |  14 +-
 .../column/columnTypeComps/columnTagsComp.tsx |  23 ++-
 .../column/simpleColumnTypeComps.tsx          |   1 +
 .../tableComp/column/tableColumnComp.tsx      |   2 -
 .../tableComp/column/tableColumnListComp.tsx  | 138 ------------------
 .../comps/comps/tableComp/tableCompView.tsx   |  42 ++++--
 11 files changed, 152 insertions(+), 182 deletions(-)

diff --git a/client/packages/lowcoder/src/components/table/EditableCell.tsx b/client/packages/lowcoder/src/components/table/EditableCell.tsx
index b393e1d66..4220c3738 100644
--- a/client/packages/lowcoder/src/components/table/EditableCell.tsx
+++ b/client/packages/lowcoder/src/components/table/EditableCell.tsx
@@ -126,10 +126,12 @@ export function EditableCell<T extends JSONValue>(props: EditableCellProps<T>) {
       onTableEvent?.('columnEdited');
     }
   }, [dispatch, baseValue, tmpValue]);
+
   const editView = useMemo(
     () => editViewFn?.({ value, onChange, onChangeEnd }) ?? <></>,
     [editViewFn, value, onChange, onChangeEnd]
   );
+
   const enterEditFn = useCallback(() => {
     if (editable) setIsEditing(true);
   }, [editable]);
@@ -137,9 +139,13 @@ export function EditableCell<T extends JSONValue>(props: EditableCellProps<T>) {
   if (isEditing) {
     return (
       <>
-        <BorderDiv />
+        <BorderDiv className="editing-border" />
         <TagsContext.Provider value={candidateTags ?? []}>
-          <StatusContext.Provider value={candidateStatus ?? []}>{editView}</StatusContext.Provider>
+          <StatusContext.Provider value={candidateStatus ?? []}>
+            <div className="editing-wrapper">
+              {editView}
+            </div>
+          </StatusContext.Provider>
         </TagsContext.Provider>
       </>
     );
@@ -151,7 +157,12 @@ export function EditableCell<T extends JSONValue>(props: EditableCellProps<T>) {
       >
         {status === "toSave" && !isEditing && <EditableChip />}
         <CellWrapper tooltipTitle={props.cellTooltip}>
-          {normalView}
+          <div
+            tabIndex={editable ? 0 : -1 }
+            onFocus={enterEditFn}
+          >
+            {normalView}
+          </div>
         </CellWrapper>
         {/* overlay on normal view to handle double click for editing */}
         {editable && (
diff --git a/client/packages/lowcoder/src/comps/comps/selectInputComp/selectCompConstants.tsx b/client/packages/lowcoder/src/comps/comps/selectInputComp/selectCompConstants.tsx
index 41851324f..360a68460 100644
--- a/client/packages/lowcoder/src/comps/comps/selectInputComp/selectCompConstants.tsx
+++ b/client/packages/lowcoder/src/comps/comps/selectInputComp/selectCompConstants.tsx
@@ -253,10 +253,12 @@ export const SelectUIView = (
     inputFieldStyle: SelectStyleType;
     onChange: (value: any) => void;
     dispatch: DispatchType;
+    autoFocus?: boolean;
   }
 ) => {
   return <Select
     ref={props.viewRef}
+    autoFocus={props.autoFocus}
     mode={props.mode}
     $inputFieldStyle={props.inputFieldStyle}
     $style={props.style as SelectStyleType & MultiSelectStyleType}
diff --git a/client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/ColumnNumberComp.tsx b/client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/ColumnNumberComp.tsx
index 871d7fbf9..8c7ea937d 100644
--- a/client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/ColumnNumberComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/ColumnNumberComp.tsx
@@ -14,7 +14,7 @@ const InputNumberWrapper = styled.div`
     width: 100%;
     border-radius: 0;
     background: transparent !important;
-    padding: 0 !important;
+    // padding: 0 !important;
     box-shadow: none;
 
     input {
diff --git a/client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnDateComp.tsx b/client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnDateComp.tsx
index 471f4f546..d077f6d79 100644
--- a/client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnDateComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnDateComp.tsx
@@ -49,9 +49,9 @@ const DatePickerStyled = styled(DatePicker)<{ $open: boolean }>`
     top: 0.5px;
     display: flex;
     align-items: center;
-    background: #fff;
+    // background: #fff;
     padding: 0 3px;
-    border-left: 1px solid #d7d9e0;
+    // border-left: 1px solid #d7d9e0;
   }
 `;
 
@@ -183,7 +183,7 @@ export const DateEdit = (props: DateEditProps) => {
         nextIcon={<IconNext />}
         superNextIcon={<IconSuperNext />}
         superPrevIcon={<SuperPrevIcon />}
-        allowClear={false}
+        allowClear={true}
         variant="borderless"
         autoFocus
         value={tempValue}
@@ -197,7 +197,9 @@ export const DateEdit = (props: DateEditProps) => {
           overflow: "hidden",
         }}
         onOpenChange={(open) => setPanelOpen(open)}
-        onChange={(value, dateString) => props.onChange(dateString as string)}
+        onChange={(value, dateString) => {
+          props.onChange(dateString as string)
+        }}
         onBlur={() => props.onChangeEnd()}
       />
     </Wrapper>
diff --git a/client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnSelectComp.tsx b/client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnSelectComp.tsx
index 8cd83d4e9..a51b182e1 100644
--- a/client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnSelectComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnSelectComp.tsx
@@ -7,6 +7,73 @@ import { StringControl } from "comps/controls/codeControl";
 import { trans } from "i18n";
 import { ColumnTypeCompBuilder, ColumnTypeViewFn } from "../columnTypeCompBuilder";
 import { ColumnValueTooltip } from "../simpleColumnTypeComps";
+import { styled } from "styled-components";
+
+const Wrapper = styled.div`
+  display: inline-flex;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  top: 0;
+  background: transparent !important;
+  padding: 8px;
+
+  > div {
+    width: 100%;
+    height: 100%;
+  }
+
+  .ant-select {
+    height: 100%;
+    .ant-select-selector {
+      padding: 0 7px;
+      height: 100%;
+      overflow: hidden;
+      .ant-select-selection-item {
+        display: inline-flex;
+        align-items: center;
+        padding-right: 24px;
+      }
+    }
+    .ant-select-arrow {
+      height: calc(100% - 3px);
+      width: fit-content;
+      top: 1.5px;
+      margin-top: 0;
+      background-color: white;
+      right: 1.5px;
+      border-right: 1px solid #d7d9e0;
+      cursor: pointer;
+      pointer-events: auto;
+      svg {
+        min-width: 18px;
+        min-height: 18px;
+      }
+      &:hover svg path {
+        fill: #315efb;
+      }
+    }
+    .ant-select-selector .ant-select-selection-search {
+      left: 7px;
+      input {
+        height: 100%;
+      }
+    }
+    &.ant-select-open {
+      .ant-select-arrow {
+        border-right: none;
+        border-left: 1px solid #d7d9e0;
+        svg g path {
+          fill: #315efb;
+        }
+      }
+      .ant-select-selection-item {
+        opacity: 0.4;
+      }
+    }
+  }
+`;
 
 const childrenMap = {
   text: StringControl,
@@ -28,6 +95,8 @@ const SelectEdit = (props: SelectEditProps) => {
   const [currentValue, setCurrentValue] = useState(props.initialValue);
   return (
     <SelectUIView
+      autoFocus
+      allowClear
       {...defaultProps}
       value={currentValue}
       options={props.options}
@@ -67,12 +136,14 @@ export const ColumnSelectComp = (function () {
   )
     .setEditViewFn((props) => {
       return (
-        <SelectEdit
-          initialValue={props.value}
-          options={options}
-          onChange={props.onChange}
-          onChangeEnd={props.onChangeEnd}
-        />
+        <Wrapper>
+          <SelectEdit
+            initialValue={props.value}
+            options={options}
+            onChange={props.onChange}
+            onChangeEnd={props.onChangeEnd}
+          />
+        </Wrapper>
       )
     })
     .setPropertyViewFn((children) => {
diff --git a/client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnStatusComp.tsx b/client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnStatusComp.tsx
index 5579a4cc6..b8181f91a 100644
--- a/client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnStatusComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnStatusComp.tsx
@@ -48,7 +48,7 @@ const StatusEdit = (props: StatusEditPropsType) => {
   const defaultStatus = useContext(StatusContext);
   const [status, setStatus] = useState(defaultStatus);
   const [allOptions, setAllOptions] = useState(BadgeStatusOptions);
-  const [open, setOpen] = useState(true);
+  const [open, setOpen] = useState(false);
 
   return (
     <Wrapper>
@@ -84,6 +84,7 @@ const StatusEdit = (props: StatusEditPropsType) => {
             value,
             status: status.find((item) => item.text === value)?.status || "none",
           });
+          setOpen(false)
         }}
         dropdownRender={(originNode: ReactNode) => (
           <DropdownStyled>
@@ -91,11 +92,12 @@ const StatusEdit = (props: StatusEditPropsType) => {
           </DropdownStyled>
         )}
         dropdownStyle={{ marginTop: "7px", padding: "8px 0 6px 0" }}
-        onBlur={props.onChangeEnd}
-        onKeyDown={(e) => {
-          if (e.key === "Enter") {
-            props.onChangeEnd();
-          }
+        onBlur={() => {
+          props.onChangeEnd();
+          setOpen(false);
+        }}
+        onFocus={() => {
+          setOpen(true);
         }}
         onClick={() => setOpen(!open)}
       >
diff --git a/client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnTagsComp.tsx b/client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnTagsComp.tsx
index dd7747a46..61ed6cb53 100644
--- a/client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnTagsComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnTagsComp.tsx
@@ -92,6 +92,8 @@ export const Wrapper = styled.div`
   position: absolute;
   top: 0;
   background: transparent !important;
+  padding: 8px;
+
   > div {
     width: 100%;
     height: 100%;
@@ -147,7 +149,7 @@ export const Wrapper = styled.div`
     }
   }
   .ant-tag {
-    margin-left: 20px;
+    margin-left: 5px;
   }
   .ant-tag svg {
     margin-right: 4px;
@@ -159,6 +161,10 @@ export const DropdownStyled = styled.div`
     padding: 3px 8px;
     margin: 0 0 2px 8px;
     border-radius: 4px;
+
+    &.ant-select-item-option-active {
+      background-color: #f2f7fc;
+    }
   }
   .ant-select-item-option-content {
     display: flex;
@@ -193,7 +199,7 @@ const TagEdit = (props: TagEditPropsType) => {
     });
     return result;
   });
-  const [open, setOpen] = useState(true);
+  const [open, setOpen] = useState(false);
   return (
     <Wrapper>
       <CustomSelect
@@ -205,6 +211,7 @@ const TagEdit = (props: TagEditPropsType) => {
         defaultValue={props.value}
         style={{ width: "100%" }}
         open={open}
+        allowClear={true}
         suffixIcon={<PackUpIcon />}
         onSearch={(value: string) => {
           if (defaultTags.findIndex((item) => item.includes(value)) < 0) {
@@ -216,6 +223,7 @@ const TagEdit = (props: TagEditPropsType) => {
         }}
         onChange={(value: string | string[]) => {
           props.onChange(value);
+          setOpen(false)
         }}
         dropdownRender={(originNode: ReactNode) => (
           <DropdownStyled>
@@ -223,11 +231,12 @@ const TagEdit = (props: TagEditPropsType) => {
           </DropdownStyled>
         )}
         dropdownStyle={{ marginTop: "7px", padding: "8px 0 6px 0" }}
-        onBlur={props.onChangeEnd}
-        onKeyDown={(e) => {
-          if (e.key === "Enter") {
-            props.onChangeEnd();
-          }
+        onFocus={() => {
+          setOpen(true);
+        }}
+        onBlur={() => {
+          props.onChangeEnd();
+          setOpen(false);
         }}
         onClick={() => setOpen(!open)}
       >
diff --git a/client/packages/lowcoder/src/comps/comps/tableComp/column/simpleColumnTypeComps.tsx b/client/packages/lowcoder/src/comps/comps/tableComp/column/simpleColumnTypeComps.tsx
index 922430fde..8839c3202 100644
--- a/client/packages/lowcoder/src/comps/comps/tableComp/column/simpleColumnTypeComps.tsx
+++ b/client/packages/lowcoder/src/comps/comps/tableComp/column/simpleColumnTypeComps.tsx
@@ -45,6 +45,7 @@ export const ButtonComp = (function () {
             loading={props.loading}
             disabled={props.disabled}
             $buttonStyle={props.buttonType === "primary" ? style : undefined}
+            style={{margin: 0}}
           >
             {/* prevent the button from disappearing */}
             {!props.text ? " " : props.text}
diff --git a/client/packages/lowcoder/src/comps/comps/tableComp/column/tableColumnComp.tsx b/client/packages/lowcoder/src/comps/comps/tableComp/column/tableColumnComp.tsx
index 099083996..440d6f1e0 100644
--- a/client/packages/lowcoder/src/comps/comps/tableComp/column/tableColumnComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/tableComp/column/tableColumnComp.tsx
@@ -30,7 +30,6 @@ import { TextOverflowControl } from "comps/controls/textOverflowControl";
 import { default as Divider } from "antd/es/divider";
 import { ColumnValueTooltip } from "./simpleColumnTypeComps";
 import { SummaryColumnComp } from "./tableSummaryColumnComp";
-import Segmented from "antd/es/segmented";
 import { list } from "@lowcoder-ee/comps/generators/list";
 import { EMPTY_ROW_KEY } from "../tableCompView";
 export type Render = ReturnType<ConstructorToComp<typeof RenderComp>["getOriginalComp"]>;
@@ -408,7 +407,6 @@ export class ColumnComp extends ColumnInitComp {
   dispatchClearInsertSet() {
     const renderMap = this.children.render.getMap();
     const insertMapKeys = Object.keys(renderMap).filter(key => key.startsWith(EMPTY_ROW_KEY));
-    const insertMap: Record<string, any> = {};
     insertMapKeys.forEach(key => {
       const render = renderMap[key];
       render.getComp().children.comp.children.changeValue.dispatchChangeValueAction(null);
diff --git a/client/packages/lowcoder/src/comps/comps/tableComp/column/tableColumnListComp.tsx b/client/packages/lowcoder/src/comps/comps/tableComp/column/tableColumnListComp.tsx
index 37eadfaff..2c7d9df3e 100644
--- a/client/packages/lowcoder/src/comps/comps/tableComp/column/tableColumnListComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/tableComp/column/tableColumnListComp.tsx
@@ -17,14 +17,12 @@ import {
 import { shallowEqual } from "react-redux";
 import { JSONObject, JSONValue } from "util/jsonTypes";
 import { lastValueIfEqual } from "util/objectUtils";
-import { SummaryColumnComp } from "./tableSummaryColumnComp";
 import { EMPTY_ROW_KEY } from "../tableCompView";
 
 /**
  * column list
  */
 const ColumnListTmpComp = list(ColumnComp);
-const SummaryColumnListTmpComp = list(SummaryColumnComp);
 
 /**
  * rowExample is used for code prompts
@@ -201,139 +199,3 @@ export class ColumnListComp extends ColumnListTmpComp {
     return this.forEachAction(ColumnComp.setSelectionAction(key));
   }
 }
-
-export class SummaryColumnListComp extends SummaryColumnListTmpComp {
-  override reduce(action: CompAction): this {
-    if (isMyCustomAction<ActionDataType>(action, "dataChanged")) {
-      const rowExample = action.value.rowExample;
-      const { readOnly } = getReduceContext();
-      let comp = this;
-      if (action.value.doGeneColumn && (action.value.dynamicColumn || !readOnly)) {
-        const actions = this.geneColumnsAction(rowExample, action.value.data);
-        comp = this.reduce(this.multiAction(actions));
-      }
-      return comp;
-    }
-    return super.reduce(action);
-  }
-
-  getChangeSet() {
-    const changeSet: Record<string, Record<string, JSONValue>> = {};
-    const columns = this.getView();
-    columns.forEach((column) => {
-      const columnChangeSet = column.getChangeSet();
-      Object.keys(columnChangeSet).forEach((dataIndex) => {
-        Object.keys(columnChangeSet[dataIndex]).forEach((key) => {
-          if (!_.isNil(columnChangeSet[dataIndex][key])) {
-            if (!changeSet[key]) changeSet[key] = {};
-            changeSet[key][dataIndex] = columnChangeSet[dataIndex][key];
-          }
-        });
-      });
-    });
-    return changeSet;
-  }
-
-  dispatchClearChangeSet() {
-    const columns = this.getView();
-    columns.forEach((column) => column.dispatchClearChangeSet());
-  }
-
-  /**
-   * If the table data changes, call this method to trigger the action
-   */
-  dataChangedAction(param: {
-    rowExample: JSONObject;
-    doGeneColumn: boolean;
-    dynamicColumn: boolean;
-    data: Array<JSONObject>;
-  }) {
-    return customAction<ActionDataType>(
-      {
-        type: "dataChanged",
-        ...param,
-      },
-      true
-    );
-  }
-
-  /**
-   * According to the data, adjust the column
-   */
-  private geneColumnsAction(rowExample: RowExampleType, data: Array<JSONObject>) {
-    // If no data, return directly
-    if (rowExample === undefined || rowExample === null) {
-      return [];
-    }
-    const dataKeys = Object.keys(rowExample);
-    if (dataKeys.length === 0) {
-      return [];
-    }
-    const columnsView = this.getView();
-    const actions: Array<any> = [];
-    let deleteCnt = 0;
-    columnsView.forEach((column, index) => {
-      if (column.getView().isCustom) {
-        return;
-      }
-      const dataIndex = column.getView().dataIndex;
-      if (dataIndex === COLUMN_CHILDREN_KEY || !dataKeys.find((key) => dataIndex === key)) {
-        // to Delete
-        actions.push(this.deleteAction(index - deleteCnt));
-        deleteCnt += 1;
-      }
-    });
-    // The order should be the same as the data
-    dataKeys.forEach((key) => {
-      if (key === COLUMN_CHILDREN_KEY && supportChildrenTree(data)) {
-        return;
-      }
-      if (!columnsView.find((column) => column.getView().dataIndex === key)) {
-        // to Add
-        actions.push(this.pushAction(newPrimaryColumn(key, calcColumnWidth(key, data))));
-      }
-    });
-    if (actions.length === 0) {
-      return [];
-    }
-    return actions;
-  }
-
-  withParamsNode() {
-    const columns = this.getView();
-    const nodes = _(columns)
-      .map((col) => col.children.render.getOriginalComp().node())
-      .toPairs()
-      .fromPairs()
-      .value();
-    const result = lastValueIfEqual(
-      this,
-      "withParamsNode",
-      [fromRecord(nodes), nodes] as const,
-      (a, b) => shallowEqual(a[1], b[1])
-    )[0];
-    return result;
-  }
-
-  getColumnsNode<T extends keyof SummaryColumnComp["children"]>(
-    field: T
-  ): RecordNode<Record<string, ReturnType<SummaryColumnComp["children"][T]["node"]>>> {
-    const columns = this.getView();
-    const nodes = _(columns)
-      .map((col) => col.children[field].node() as ReturnType<SummaryColumnComp["children"][T]["node"]>)
-      .toPairs()
-      .fromPairs()
-      .value();
-    const result = lastValueIfEqual(
-      this,
-      "col_nodes_" + field,
-      [fromRecord(nodes), nodes] as const,
-      (a, b) => shallowEqual(a[1], b[1])
-    )[0];
-    return result;
-  }
-
-  setSelectionAction(key: string) {
-    return this.forEachAction(ColumnComp.setSelectionAction(key));
-  }
-}
\ No newline at end of file
diff --git a/client/packages/lowcoder/src/comps/comps/tableComp/tableCompView.tsx b/client/packages/lowcoder/src/comps/comps/tableComp/tableCompView.tsx
index 151896ddf..995bff59e 100644
--- a/client/packages/lowcoder/src/comps/comps/tableComp/tableCompView.tsx
+++ b/client/packages/lowcoder/src/comps/comps/tableComp/tableCompView.tsx
@@ -380,8 +380,11 @@ const TableTd = styled.td<{
   border-radius: ${(props) => props.$style.radius};
   padding: 0 !important;
 
-  > div {
-    margin: ${(props) => props.$style.margin};
+  > div:not(.editing-border, .editing-wrapper),
+  .editing-wrapper .ant-input,
+  .editing-wrapper .ant-input-number,
+  .editing-wrapper .ant-picker {
+    margin: ${(props) => props.$isEditing ? '0px' : props.$style.margin};
     color: ${(props) => props.$style.text};
     font-weight: ${(props) => props.$style.textWeight};
     font-family: ${(props) => props.$style.fontFamily};
@@ -389,7 +392,7 @@ const TableTd = styled.td<{
     ${(props) => props.$tableSize === 'small' && `
       padding: 1px 8px;
       font-size: ${props.$defaultThemeDetail.textSize == props.$style.textSize ? '14px !important' : props.$style.textSize + ' !important'};
-    font-style:${props.$style.fontStyle} !important;
+      font-style:${props.$style.fontStyle} !important;
       min-height: ${props.$style.rowHeight || '14px'};
       line-height: 20px;
       ${!props.$autoHeight && `
@@ -600,7 +603,7 @@ function TableCellView(props: {
       </TableTd>
     );
   }
- 
+
   return (
     <TableCellContext.Provider value={{ isEditing: editing, setIsEditing: setEditing }}>
       {tdView}
@@ -816,8 +819,8 @@ export function TableCompView(props: {
       return;
     }
 
-    const newRows: Record<string, RecordType> = {...emptyRowsMap};
-    const existingRowsKeys = Object.keys(newRows);
+    let emptyRows: Record<string, RecordType> = {...emptyRowsMap};
+    const existingRowsKeys = Object.keys(emptyRows);
     const existingRowsCount = existingRowsKeys.length;
     const updatedRowsKeys = Object.keys(insertSet).filter(
       key => key.startsWith(EMPTY_ROW_KEY)
@@ -827,12 +830,25 @@ export function TableCompView(props: {
       x => !updatedRowsKeys.includes(x)
     );
 
+    if (removedRowsKeys.length === existingRowsCount) {
+      const newRowIndex = 0;
+      const newRowKey = `${EMPTY_ROW_KEY}_${newRowIndex}`;
+      setEmptyRowsMap({
+        [newRowKey]: createNewEmptyRow(newRowIndex, columnsAggrData)
+      });
+      const ele = document.querySelector<HTMLElement>(`[data-row-key=${newRowKey}]`);
+      if (ele) {
+        ele.style.display = '';
+      }
+      return;
+    }
+
     removedRowsKeys.forEach(rowKey => {
       if (
         rowKey === existingRowsKeys[existingRowsCount - 1]
         || rowKey === existingRowsKeys[existingRowsCount - 2]
       ) {
-        delete newRows[rowKey];
+        delete emptyRows[rowKey];
       } else {
         const ele = document.querySelector<HTMLElement>(`[data-row-key=${rowKey}]`);
         if (ele) {
@@ -840,17 +856,15 @@ export function TableCompView(props: {
         }
       }
     })
-
     const lastRowKey = updatedRowsCount ? updatedRowsKeys[updatedRowsCount - 1] : '';
-    const lastRowIndex = updatedRowsCount ? parseInt(lastRowKey.replace(`${EMPTY_ROW_KEY}_`, '')) : -1;
+    const lastRowIndex = lastRowKey ? parseInt(lastRowKey.replace(`${EMPTY_ROW_KEY}_`, '')) : -1;
 
     const newRowIndex = lastRowIndex + 1;
     const newRowKey = `${EMPTY_ROW_KEY}_${newRowIndex}`;
-    newRows[newRowKey] = createNewEmptyRow(newRowIndex, columnsAggrData);
-    setEmptyRowsMap(newRows);
+    emptyRows[newRowKey] = createNewEmptyRow(newRowIndex, columnsAggrData);
+    setEmptyRowsMap(emptyRows);
   }, [
     inlineAddNewRow,
-    JSON.stringify(emptyRowsMap),
     JSON.stringify(insertSet),
     setEmptyRowsMap,
     createNewEmptyRow,
@@ -922,9 +936,7 @@ export function TableCompView(props: {
       onCancelChanges={() => {
         handleChangeEvent("cancelChanges");
         if (inlineAddNewRow) {
-          setEmptyRowsMap({
-            [`${EMPTY_ROW_KEY}_0`]: createNewEmptyRow(0, columnsAggrData),
-          });
+          setEmptyRowsMap({});
         }
       }}
       onEvent={onEvent}

From b31cae170230b0a328b6e84aef221bc683bd4ab6 Mon Sep 17 00:00:00 2001
From: RAHEEL <mraheeliftikhar1994@gmail.com>
Date: Tue, 27 Aug 2024 22:54:04 +0500
Subject: [PATCH 08/10] fix status column edited value doesn't persist

---
 .../src/components/table/EditableCell.tsx         |  6 +++---
 .../src/comps/comps/tableComp/tableCompView.tsx   | 10 +---------
 .../comps/comps/tableComp/tableSummaryComp.tsx    | 15 +++++++++++++--
 3 files changed, 17 insertions(+), 14 deletions(-)

diff --git a/client/packages/lowcoder/src/components/table/EditableCell.tsx b/client/packages/lowcoder/src/components/table/EditableCell.tsx
index 4220c3738..a1a7ebd12 100644
--- a/client/packages/lowcoder/src/components/table/EditableCell.tsx
+++ b/client/packages/lowcoder/src/components/table/EditableCell.tsx
@@ -104,7 +104,7 @@ export function EditableCell<T extends JSONValue>(props: EditableCellProps<T>) {
 
   useEffect(() => {
     setTmpValue(value);
-  }, [value]);
+  }, [JSON.stringify(value)]);
 
   const onChange = useCallback(
     (value: T) => {
@@ -125,11 +125,11 @@ export function EditableCell<T extends JSONValue>(props: EditableCellProps<T>) {
     if(!_.isEqual(tmpValue, value)) {
       onTableEvent?.('columnEdited');
     }
-  }, [dispatch, baseValue, tmpValue]);
+  }, [dispatch, JSON.stringify(baseValue), JSON.stringify(tmpValue)]);
 
   const editView = useMemo(
     () => editViewFn?.({ value, onChange, onChangeEnd }) ?? <></>,
-    [editViewFn, value, onChange, onChangeEnd]
+    [editViewFn, JSON.stringify(value), onChange, onChangeEnd]
   );
 
   const enterEditFn = useCallback(() => {
diff --git a/client/packages/lowcoder/src/comps/comps/tableComp/tableCompView.tsx b/client/packages/lowcoder/src/comps/comps/tableComp/tableCompView.tsx
index 995bff59e..aa773c32a 100644
--- a/client/packages/lowcoder/src/comps/comps/tableComp/tableCompView.tsx
+++ b/client/packages/lowcoder/src/comps/comps/tableComp/tableCompView.tsx
@@ -325,15 +325,6 @@ const TableWrapper = styled.div<{
             border-top-right-radius: 0px;
           }
         }
-
-        // hide the bottom border of the last row
-        ${(props) =>
-    props.$toolbarPosition !== "below" &&
-    `
-            tbody > tr:last-child > td {
-              border-bottom: unset;
-            }
-        `}
       }
 
       .ant-table-expanded-row-fixed:after {
@@ -948,6 +939,7 @@ export function TableCompView(props: {
     return (
       <TableSummary
         tableSize={size}
+        istoolbarPositionBelow={toolbar.position === "below"}
         expandableRows={Boolean(expansion.expandModalView)}
         summaryRows={parseInt(summaryRows)}
         columns={columns}
diff --git a/client/packages/lowcoder/src/comps/comps/tableComp/tableSummaryComp.tsx b/client/packages/lowcoder/src/comps/comps/tableComp/tableSummaryComp.tsx
index da75ef5eb..be47ae3bc 100644
--- a/client/packages/lowcoder/src/comps/comps/tableComp/tableSummaryComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/tableComp/tableSummaryComp.tsx
@@ -7,10 +7,19 @@ import Table from "antd/es/table";
 import { ReactNode } from "react";
 import Tooltip from "antd/es/tooltip";
 
-const TableSummaryRow = styled(Table.Summary.Row)`
+const TableSummaryRow = styled(Table.Summary.Row)<{
+  $istoolbarPositionBelow: boolean;
+}>`
   td:last-child {
     border-right: unset !important;
   }
+
+  ${props => !props.$istoolbarPositionBelow && `
+    &:last-child td {
+      border-bottom: none !important;
+    }
+  `}
+  
 `;
 
 const TableSummarCell = styled(Table.Summary.Cell)<{
@@ -168,6 +177,7 @@ export function TableSummary(props: {
   summaryRows: number;
   columns: ColumnComp[];
   summaryRowStyle: TableSummaryRowStyleType;
+  istoolbarPositionBelow: boolean;
 }) {
   const {
     columns,
@@ -175,6 +185,7 @@ export function TableSummary(props: {
     summaryRowStyle,
     tableSize,
     expandableRows,
+    istoolbarPositionBelow,
   } = props;
   let visibleColumns = columns.filter(col => !col.getView().hide);
   if (expandableRows) {
@@ -186,7 +197,7 @@ export function TableSummary(props: {
   return (
     <Table.Summary>
       {Array.from(Array(summaryRows)).map((_, rowIndex) => (
-        <TableSummaryRow key={rowIndex}>
+        <TableSummaryRow key={rowIndex} $istoolbarPositionBelow={istoolbarPositionBelow}>
           {visibleColumns.map((column, index) => {
             const summaryColumn = column.children.summaryColumns.getView()[rowIndex].getView();
             return (

From ba0133ceec54f85fee5b2acc19ffb360361f476c Mon Sep 17 00:00:00 2001
From: RAHEEL <mraheeliftikhar1994@gmail.com>
Date: Tue, 27 Aug 2024 23:19:25 +0500
Subject: [PATCH 09/10] allow option in table to enable editing on
 single/double click

---
 .../lowcoder/src/components/table/EditableCell.tsx   |  7 +++++--
 .../src/comps/comps/tableComp/tableCompView.tsx      |  3 +++
 .../comps/tableComp/tableDynamicColumn.test.tsx      |  1 +
 .../src/comps/comps/tableComp/tablePropertyView.tsx  |  4 ++++
 .../src/comps/comps/tableComp/tableTypes.tsx         | 12 ++++++++++++
 .../src/comps/comps/tableComp/tableUtils.tsx         |  2 ++
 client/packages/lowcoder/src/i18n/locales/en.ts      |  3 +++
 7 files changed, 30 insertions(+), 2 deletions(-)

diff --git a/client/packages/lowcoder/src/components/table/EditableCell.tsx b/client/packages/lowcoder/src/components/table/EditableCell.tsx
index a1a7ebd12..f8f9ebe16 100644
--- a/client/packages/lowcoder/src/components/table/EditableCell.tsx
+++ b/client/packages/lowcoder/src/components/table/EditableCell.tsx
@@ -37,6 +37,7 @@ export interface CellProps {
   candidateStatus?: { text: string; status: StatusType }[];
   textOverflow?: boolean;
   cellTooltip?: string;
+  editMode?: string;
   onTableEvent?: (eventName: any) => void;
 }
 
@@ -94,6 +95,7 @@ export function EditableCell<T extends JSONValue>(props: EditableCellProps<T>) {
     candidateTags,
     // tagColors
     candidateStatus,
+    editMode,
     onTableEvent,
   } = props;
   const status = _.isNil(changeValue) ? "normal" : "toSave";
@@ -101,6 +103,7 @@ export function EditableCell<T extends JSONValue>(props: EditableCellProps<T>) {
   const { isEditing, setIsEditing } = useContext(TableCellContext);
   const value = changeValue ?? baseValue!;
   const [tmpValue, setTmpValue] = useState<T | null>(value);
+  const singleClickEdit = editMode === 'single'; 
 
   useEffect(() => {
     setTmpValue(value);
@@ -175,8 +178,8 @@ export function EditableCell<T extends JSONValue>(props: EditableCellProps<T>) {
                 width: '100%',
                 height: '100%',
               }}
-              // onDoubleClick={enterEditFn}
-              onClick={enterEditFn}
+              onDoubleClick={!singleClickEdit ? enterEditFn : undefined}
+              onClick={singleClickEdit ? enterEditFn : undefined}
             >
             </div>
           </CellWrapper>
diff --git a/client/packages/lowcoder/src/comps/comps/tableComp/tableCompView.tsx b/client/packages/lowcoder/src/comps/comps/tableComp/tableCompView.tsx
index aa773c32a..9861d5a23 100644
--- a/client/packages/lowcoder/src/comps/comps/tableComp/tableCompView.tsx
+++ b/client/packages/lowcoder/src/comps/comps/tableComp/tableCompView.tsx
@@ -767,6 +767,7 @@ export function TableCompView(props: {
   const inlineAddNewRow = useMemo(() => compChildren.inlineAddNewRow.getView(), [compChildren.inlineAddNewRow]);
   const pagination = useMemo(() => compChildren.pagination.getView(), [compChildren.pagination]);
   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 dynamicColumn = compChildren.dynamicColumn.getView();
   const dynamicColumnConfig = useMemo(
@@ -785,6 +786,7 @@ export function TableCompView(props: {
         dynamicColumn,
         dynamicColumnConfig,
         columnsAggrData,
+        editModeClicks,
         onEvent,
       ),
     [
@@ -795,6 +797,7 @@ export function TableCompView(props: {
       dynamicColumn,
       dynamicColumnConfig,
       columnsAggrData,
+      editModeClicks,
     ]
   );
 
diff --git a/client/packages/lowcoder/src/comps/comps/tableComp/tableDynamicColumn.test.tsx b/client/packages/lowcoder/src/comps/comps/tableComp/tableDynamicColumn.test.tsx
index 022e0558b..d38cdb987 100644
--- a/client/packages/lowcoder/src/comps/comps/tableComp/tableDynamicColumn.test.tsx
+++ b/client/packages/lowcoder/src/comps/comps/tableComp/tableDynamicColumn.test.tsx
@@ -45,6 +45,7 @@ const expectColumn = (
       comp.children.dynamicColumn.getView(),
       dynamicColumnConfig,
       comp.columnAggrData,
+      comp.children.editModeClicks.getView(),
       onEvent,
     );
     expect(columnViews.length).toBeGreaterThanOrEqual(antdColumns.length);
diff --git a/client/packages/lowcoder/src/comps/comps/tableComp/tablePropertyView.tsx b/client/packages/lowcoder/src/comps/comps/tableComp/tablePropertyView.tsx
index 818a40d6e..fff48e6fe 100644
--- a/client/packages/lowcoder/src/comps/comps/tableComp/tablePropertyView.tsx
+++ b/client/packages/lowcoder/src/comps/comps/tableComp/tablePropertyView.tsx
@@ -562,6 +562,10 @@ export function compTablePropertyView<T extends MultiBaseComp<TableChildrenType>
                 label: trans("table.dynamicColumnConfig"),
                 tooltip: trans("table.dynamicColumnConfigDesc"),
             })}
+            {comp.children.editModeClicks.propertyView({
+              label: trans("table.editMode"),
+              radioButton: true,
+            })}
             {comp.children.searchText.propertyView({
               label: trans("table.searchText"),
               tooltip: trans("table.searchTextTooltip"),
diff --git a/client/packages/lowcoder/src/comps/comps/tableComp/tableTypes.tsx b/client/packages/lowcoder/src/comps/comps/tableComp/tableTypes.tsx
index 0c2969327..d32d3ff24 100644
--- a/client/packages/lowcoder/src/comps/comps/tableComp/tableTypes.tsx
+++ b/client/packages/lowcoder/src/comps/comps/tableComp/tableTypes.tsx
@@ -37,6 +37,17 @@ import { PaginationControl } from "./paginationControl";
 import { SelectionControl } from "./selectionControl";
 import { AutoHeightControl } from "comps/controls/autoHeightControl";
 
+const editModeClickOptions = [
+  {
+    label: trans("table.singleClick"),
+    value: "single",
+  },
+  {
+    label: trans("table.doubleClick"),
+    value: "double",
+  },
+] as const;
+
 const summarRowsOptions = [
   {
     label: "1",
@@ -248,6 +259,7 @@ const tableChildrenMap = {
   expansion: ExpansionControl,
   selectedCell: stateComp<JSONObject>({}),
   inlineAddNewRow: BoolControl,
+  editModeClicks: dropdownControl(editModeClickOptions, "single"),
 };
 
 export const TableInitComp = (function () {
diff --git a/client/packages/lowcoder/src/comps/comps/tableComp/tableUtils.tsx b/client/packages/lowcoder/src/comps/comps/tableComp/tableUtils.tsx
index 8f51758bf..0e1e89d56 100644
--- a/client/packages/lowcoder/src/comps/comps/tableComp/tableUtils.tsx
+++ b/client/packages/lowcoder/src/comps/comps/tableComp/tableUtils.tsx
@@ -295,6 +295,7 @@ export function columnsToAntdFormat(
   dynamicColumn: boolean,
   dynamicColumnConfig: Array<string>,
   columnsAggrData: ColumnsAggrData,
+  editMode: string,
   onTableEvent: (eventName: any) => void,
 ): Array<CustomColumnType<RecordType>> {
   const customColumns = columns.filter(col => col.isCustom).map(col => col.dataIndex);
@@ -392,6 +393,7 @@ export function columnsToAntdFormat(
               currentRow: row,
               currentIndex: index,
             }),
+            editMode,
             onTableEvent,
           });
       },
diff --git a/client/packages/lowcoder/src/i18n/locales/en.ts b/client/packages/lowcoder/src/i18n/locales/en.ts
index 3788f1ae2..7a2f2df4c 100644
--- a/client/packages/lowcoder/src/i18n/locales/en.ts
+++ b/client/packages/lowcoder/src/i18n/locales/en.ts
@@ -2002,6 +2002,9 @@ export const en = {
     "showSummary": "Show Summary Row",
     "totalSummaryRows": "Total Rows",
     "inlineAddNewRow": "Inline Add New Row",
+    "editMode": "Edit Mode",
+    "singleClick": "Single Click",
+    "doubleClick": "Double Click",
   },
 
 

From 7f157dbb4b7d55fd04baa490980f399e7263b044 Mon Sep 17 00:00:00 2001
From: RAHEEL <mraheeliftikhar1994@gmail.com>
Date: Tue, 27 Aug 2024 23:30:37 +0500
Subject: [PATCH 10/10] remove commented code

---
 .../src/comps/comps/tableComp/tableComp.tsx       | 15 ---------------
 1 file changed, 15 deletions(-)

diff --git a/client/packages/lowcoder/src/comps/comps/tableComp/tableComp.tsx b/client/packages/lowcoder/src/comps/comps/tableComp/tableComp.tsx
index 4a782deb8..0d1abdd0a 100644
--- a/client/packages/lowcoder/src/comps/comps/tableComp/tableComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/tableComp/tableComp.tsx
@@ -231,17 +231,6 @@ export class TableImplComp extends TableInitComp implements IContainer {
             })
           )
         );
-        // actions.push(
-        //   wrapChildAction(
-        //     "columns",
-        //     comp.children.summary.children.columns.dataChangedAction({
-        //       rowExample: nextRowExample || {},
-        //       doGeneColumn: doGene,
-        //       dynamicColumn: comp.children.dynamicColumn.getView(),
-        //       data: comp.children.data.getView(),
-        //     })
-        //   )
-        // );
         doGene && actions.push(comp.changeChildAction("dataRowExample", null));
         setTimeout(() => {
           actions.forEach((action) => comp.dispatch(deferAction(action)));
@@ -264,10 +253,6 @@ export class TableImplComp extends TableInitComp implements IContainer {
         "columns",
         comp.children.columns.reduce(comp.children.columns.setSelectionAction(newSelection))
       );
-      // comp.children.summary = comp.children.summary.setChild(
-      //   "columns",
-      //   comp.children.summary.children.columns.reduce(comp.children.summary.children.columns.setSelectionAction(newSelection))
-      // );
       needMoreEval = true;
     }