Table enhancements and events

client/packages/lowcoder/src/components/table/EditableCell.tsx

@@ -35,6 +35,7 @@ export interface CellProps {
   candidateTags?: string[];
   candidateStatus?: { text: string; status: StatusType }[];
   textOverflow?: boolean;
+  onTableEvent?: (eventName: any) => void;
 }
 
 export type CellViewReturn = (props: CellProps) => ReactNode;
@@ -71,6 +72,7 @@ export function EditableCell<T extends JSONValue>(props: EditableCellProps<T>) {
     baseValue,
     candidateTags,
     candidateStatus,
+    onTableEvent,
   } = props;
   const status = _.isNil(changeValue) ? "normal" : "toSave";
   const editable = editViewFn ? props.editable : false;
@@ -96,6 +98,9 @@ export function EditableCell<T extends JSONValue>(props: EditableCellProps<T>) {
         false
       )
     );
+    if(!_.isEqual(tmpValue, value)) {
+      onTableEvent?.('columnEdited');
+    }
   }, [dispatch, baseValue, tmpValue]);
   const editView = useMemo(
     () => editViewFn?.({ value, onChange, onChangeEnd }) ?? <></>,

client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/ColumnNumberComp.tsx

@@ -1,18 +1,40 @@
-  import { default as Input } from "antd/es/input";
-import { NumberControl, StringControl } from "comps/controls/codeControl";
+  import { default as InputNumber } from "antd/es/input-number";
+import { NumberControl, RangeControl, StringControl } from "comps/controls/codeControl";
 import { BoolControl } from "comps/controls/boolControl";
 import { trans } from "i18n";
 import { ColumnTypeCompBuilder, ColumnTypeViewFn } from "../columnTypeCompBuilder";
 import { ColumnValueTooltip } from "../simpleColumnTypeComps";
+import { withDefault } from "comps/generators";
+import styled from "styled-components";
+
+const InputNumberWrapper = styled.div`
+  .ant-input-number  {
+    width: 100%;
+    border-radius: 0;
+    background: transparent !important;
+    padding: 0 !important;
+    box-shadow: none;
+
+    input {
+      padding: 0;
+      border-radius: 0;
+    }
+  }
+`;
 
 const childrenMap = {
   text: NumberControl,
+  step: withDefault(NumberControl, 1),
+  precision: RangeControl.closed(0, 20, 0),
   float: BoolControl,
   prefix: StringControl,
   suffix: StringControl,
 };
 
 let float = false;
+let step = 1;
+let precision = 0;
+
 const getBaseValue: ColumnTypeViewFn<typeof childrenMap, number, number> = (
   props
 ) => {
@@ -24,26 +46,35 @@ export const ColumnNumberComp = (function () {
     childrenMap,
     (props, dispatch) => {
       float = props.float;
-      const value = !float ? Math.floor(props.changeValue ?? getBaseValue(props, dispatch)) : props.changeValue ?? getBaseValue(props, dispatch);
-      return props.prefix + value + props.suffix;
+      step = props.step;
+      precision = props.precision;
+      const value = props.changeValue ?? getBaseValue(props, dispatch);
+      let formattedValue: string | number = !float ? Math.floor(value) : value;
+      if(float) {
+        formattedValue = formattedValue.toPrecision(precision + 1);
+      }
+      return props.prefix + formattedValue + props.suffix;
     },
     (nodeValue) => nodeValue.text.value,
     getBaseValue,
   )
     .setEditViewFn((props) => {
       return (
-      <Input
-        type="number"
-        step={float?"0.01": "1"}
-        defaultValue={props.value}
-        autoFocus
-        bordered={false}
-        onChange={(e) => {
-          props.onChange(!float ? Math.floor(e.target.valueAsNumber) : e.target.valueAsNumber);
-        }}
-        onBlur={props.onChangeEnd}
-        onPressEnter={props.onChangeEnd}
-      />
+      <InputNumberWrapper>
+        <InputNumber
+          step={step}
+          defaultValue={props.value}
+          autoFocus
+          bordered={false}
+          onChange={(value) => {
+            value = value ?? 0;
+            props.onChange(!float ? Math.floor(value) : value);
+          }}
+          precision={float ? precision : 0}
+          onBlur={props.onChangeEnd}
+          onPressEnter={props.onChangeEnd}
+        />
+      </InputNumberWrapper>
     )})
     .setPropertyViewFn((children) => {
       return (
@@ -52,17 +83,36 @@ export const ColumnNumberComp = (function () {
             label: trans("table.columnValue"),
             tooltip: ColumnValueTooltip,
           })}
+          {children.step.propertyView({
+            label: trans("table.numberStep"),
+            tooltip: trans("table.numberStepTooltip"),
+            onFocus: (focused) => {
+              if(!focused) {
+                const value = children.step.getView();
+                const isFloat = children.float.getView();
+                const newValue = !isFloat ? Math.floor(value) : value;
+                children.step.dispatchChangeValueAction(String(newValue));
+              }
+            }
+          })}
+          {float && (
+            children.precision.propertyView({
+              label: trans("table.precision"),
+            })
+          )}
           {children.prefix.propertyView({
             label: trans("table.prefix"),
-            // tooltip: ColumnValueTooltip,
           })}
           {children.suffix.propertyView({
             label: trans("table.suffix"),
-            // tooltip: ColumnValueTooltip,
           })}
           {children.float.propertyView({
             label: trans("table.float"),
-            // tooltip: ColumnValueTooltip,
+            onChange: (isFloat) => {
+              const value = children.step.getView();
+              const newValue = !isFloat ? Math.floor(value) : value;
+              children.step.dispatchChangeValueAction(String(newValue));
+            }
           })}
         </>
       );

client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnLinksComp.tsx

@@ -1,5 +1,3 @@
-import { EllipsisOutlined } from "@ant-design/icons";
-import { default as Dropdown} from "antd/es/dropdown";
 import { default as Menu } from "antd/es/menu";
 import { ColumnTypeCompBuilder } from "comps/comps/tableComp/column/columnTypeCompBuilder";
 import { ActionSelectorControlInContext } from "comps/controls/actionSelector/actionSelectorControl";
@@ -12,18 +10,6 @@ import styled from "styled-components";
 import { ColumnLink } from "comps/comps/tableComp/column/columnTypeComps/columnLinkComp";
 import { LightActiveTextColor, PrimaryColor } from "constants/style";
 
-const LinksWrapper = styled.div`
-  white-space: nowrap;
-
-  > a {
-    margin-right: 8px;
-  }
-
-  > a:last-child {
-    margin-right: 0;
-  }
-`;
-
 const MenuLinkWrapper = styled.div`
   > a {
     color: ${PrimaryColor} !important;
@@ -34,6 +20,22 @@ const MenuLinkWrapper = styled.div`
   }
 `;
 
+const MenuWrapper = styled.div`
+  ul {
+    background: transparent !important;
+    border-bottom: 0;
+
+    li {
+      padding: 0 10px 0 0 !important;
+      line-height: normal !important;
+
+      &::after {
+        content: none !important;
+      }
+    }
+  }  
+`;
+
 const OptionItem = new MultiCompBuilder(
   {
     label: StringControl,
@@ -69,48 +71,28 @@ export const ColumnLinksComp = (function () {
   return new ColumnTypeCompBuilder(
     childrenMap,
     (props) => {
-      const menu = props.options.length > 3 && (
-        <Menu>
-          {props.options
-            .filter((o) => !o.hidden)
-            .slice(3)
-            .map((option, index) => (
-              <Menu.Item key={index}>
-                <MenuLinkWrapper>
-                  <ColumnLink
-                    disabled={option.disabled}
-                    label={option.label}
-                    onClick={option.onClick}
-                  />
-                </MenuLinkWrapper>
-              </Menu.Item>
-            ))}
-        </Menu>
-      );
+      const menuItems = props.options
+        .filter((o) => !o.hidden)
+        .map((option, index) => (
+          {
+            key: index,
+            label: (
+              <MenuLinkWrapper>
+                <ColumnLink
+                  disabled={option.disabled}
+                  label={option.label}
+                  onClick={option.onClick}
+                />
+              </MenuLinkWrapper>
+            )
+          }
+        ));
 
       return (
-        <LinksWrapper>
-          {props.options
-            .filter((o) => !o.hidden)
-            .slice(0, 3)
-            .map((option, i) => (
-              <ColumnLink
-                key={i}
-                disabled={option.disabled}
-                label={option.label}
-                onClick={option.onClick}
-              />
-            ))}
-          {menu && (
-            <Dropdown
-              trigger={["hover"]}
-              dropdownRender={() => menu}
-            >
-              <EllipsisOutlined onClick={(e) => e.preventDefault()} />
-            </Dropdown>
-          )}
-        </LinksWrapper>
-      );
+        <MenuWrapper>
+          <Menu mode="horizontal" items={menuItems}  />
+        </MenuWrapper>
+      )
     },
     () => ""
   )

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

@@ -323,7 +323,6 @@ export function newPrimaryColumn(
   title?: string,
   isTag?: boolean
 ): ConstructorToDataType<typeof ColumnComp> {
-  console.log('newPrimaryColumn', title);
   return {
     title: title ?? key,
     dataIndex: key,

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

@@ -176,7 +176,6 @@ export class TableImplComp extends TableInitComp implements IContainer {
 
   override reduce(action: CompAction): this {
     let comp = super.reduce(action);
-
     let dataChanged = false;
     if (action.type === CompActionTypes.UPDATE_NODES_V2) {
       const nextRowExample = tableDataRowExample(comp.children.data.getView());
@@ -316,10 +315,18 @@ export class TableImplComp extends TableInitComp implements IContainer {
       filter: this.children.toolbar.children.filter.node(),
       showFilter: this.children.toolbar.children.showFilter.node(),
     };
+    let context = this;
     const filteredDataNode = withFunction(fromRecord(nodes), (input) => {
       const { data, searchValue, filter, showFilter } = input;
       const filteredData = filterData(data, searchValue.value, filter, showFilter.value);
       // console.info("filterNode. data: ", data, " filter: ", filter, " filteredData: ", filteredData);
+      // if data is changed on search then trigger event
+      if(Boolean(searchValue.value) && data.length !== filteredData.length) {
+        const onEvent = context.children.onEvent.getView();
+        setTimeout(() => {
+          onEvent("dataSearch");
+        });
+      }
       return filteredData.map((row) => tranToTableRecord(row, row[OB_ROW_ORI_INDEX]));
     });
     return lastValueIfEqual(this, "filteredDataNode", [filteredDataNode, nodes] as const, (a, b) =>

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

@@ -680,6 +680,7 @@ export function TableCompView(props: {
         dynamicColumn,
         dynamicColumnConfig,
         columnsAggrData,
+        onEvent,
       ),
     [
       columnViews,
@@ -745,7 +746,10 @@ export function TableCompView(props: {
           setLoading
         )
       }
-      onDownload={() => onDownload(`${compName}-data`)}
+      onDownload={() => {
+        handleChangeEvent("download");
+        onDownload(`${compName}-data`)
+      }}
       hasChange={hasChange}
       onSaveChanges={() => handleChangeEvent("saveChanges")}
       onCancelChanges={() => handleChangeEvent("cancelChanges")}
@@ -778,7 +782,11 @@ export function TableCompView(props: {
               : "OB_CHILDREN_KEY_PLACEHOLDER",
             fixed: "left",
             onExpand: (expanded) => {
-              if(expanded) handleChangeEvent('rowExpand')
+              if(expanded) {
+                handleChangeEvent('rowExpand')
+              } else {
+                handleChangeEvent('rowShrink')
+              }
             }
           }}
           rowColorFn={compChildren.rowColor.getView() as any}

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

@@ -36,14 +36,16 @@ const expectColumn = (
   // with dynamic config
   const dynamicColumnConfig = comp.children.dynamicColumnConfig.getView();
   if (dynamicColumnConfig?.length > 0) {
+    const onEvent = (eventName: any) => {};
     const antdColumns = columnsToAntdFormat(
       columnViews,
       comp.children.sort.getView(),
       comp.children.toolbar.getView().columnSetting,
       comp.children.size.getView(),
       comp.children.dynamicColumn.getView(),
       dynamicColumnConfig,
-      comp.columnAggrData
+      comp.columnAggrData,
+      onEvent,
     );
     expect(columnViews.length).toBeGreaterThanOrEqual(antdColumns.length);
     antdColumns.forEach((column) => {

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

@@ -78,6 +78,26 @@ export const TableEventOptions = [
     value: "rowExpand",
     description: trans("table.rowExpand"),
   },
+  {
+    label: trans("table.rowShrink"),
+    value: "rowShrink",
+    description: trans("table.rowShrink"),
+  },
+  {
+    label: trans("table.columnEdited"),
+    value: "columnEdited",
+    description: trans("table.columnEdited"),
+  },
+  {
+    label: trans("table.search"),
+    value: "dataSearch",
+    description: trans("table.search"),
+  },
+  {
+    label: trans("table.download"),
+    value: "download",
+    description: trans("table.download"),
+  },
   {
     label: trans("table.filterChange"),
     value: "filterChange",