added dropdown type column in table

Author: raheeliftikhar5

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

@@ -20,6 +20,7 @@ import { SimpleTextComp } from "./columnTypeComps/simpleTextComp";
 import { ColumnNumberComp } from "./columnTypeComps/ColumnNumberComp";
 
 import { ColumnAvatarsComp } from "./columnTypeComps/columnAvatarsComp";
+import { ColumnDropdownComp } from "./columnTypeComps/columnDropdownComp";
 
 const actionOptions = [
   {
@@ -50,6 +51,10 @@ const actionOptions = [
     label: trans("table.select"),
     value: "select",
   },
+  {
+    label: trans("table.dropdown"),
+    value: "dropdown",
+  },
   {
     label: trans("table.badgeStatus"),
     value: "badgeStatus",
@@ -101,6 +106,7 @@ export const ColumnTypeCompMap = {
   link: LinkComp,
   tag: ColumnTagsComp,
   select: ColumnSelectComp,
+  dropdown: ColumnDropdownComp,
   links: ColumnLinksComp,
   image: ImageComp,
   markdown: ColumnMarkdownComp,

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

@@ -0,0 +1,130 @@
+import { ReactElement } from "react";
+import { DropdownOptionControl } from "comps/controls/optionsControl";
+import { StringControl } from "comps/controls/codeControl";
+import { trans } from "i18n";
+import { ColumnTypeCompBuilder, ColumnTypeViewFn } from "../columnTypeCompBuilder";
+import Menu from "antd/es/menu";
+import Dropdown from "antd/es/dropdown";
+import { dropdownControl } from "comps/controls/dropdownControl";
+import { IconControl } from "comps/controls/iconControl";
+import { withDefault } from "comps/generators";
+import { IconWrapper } from "util/bottomResUtils";
+import { ButtonTypeOptions } from "../simpleColumnTypeComps";
+import { useStyle } from "comps/controls/styleControl";
+import { ButtonStyle } from "comps/controls/styleControlConstants";
+import { Button100 } from "comps/comps/buttonComp/buttonCompConstants";
+
+const childrenMap = {
+  buttonType: dropdownControl(ButtonTypeOptions, "primary"),
+  label: withDefault(StringControl, 'Menu'),
+  prefixIcon: IconControl,
+  suffixIcon: IconControl,
+  options: DropdownOptionControl,
+};
+
+const getBaseValue: ColumnTypeViewFn<typeof childrenMap, string, string> = (props) => props.label;
+
+export const ColumnDropdownComp = (function () {
+  return new ColumnTypeCompBuilder(
+    childrenMap,
+    (props) => {
+      const hasOptionIcon = props.options.findIndex((option) => (option.prefixIcon as ReactElement)?.props.value) > -1;
+      const items = props.options
+        .filter((option) => !option.hidden)
+        .map((option, index) => ({
+          title: option.label,
+          label: option.label,
+          key: option.label + " - " + index,
+          disabled: option.disabled,
+          icon: hasOptionIcon && <span>{option.prefixIcon}</span>,
+          onEvent: option.onEvent,
+        }));
+      
+      const hasPrefixIcon = (props.prefixIcon as ReactElement)?.props.value;
+      const hasSuffixIcon = (props.suffixIcon as ReactElement)?.props.value;
+      const buttonStyle = useStyle(ButtonStyle);
+
+      const menu = (
+        <Menu
+          items={items}
+          onClick={({ key }) => items.find((o) => o.key === key)?.onEvent?.("click")}
+        />
+      );
+
+      return (
+
+        <Dropdown
+          trigger={["click"]}
+          placement="bottom"
+          menu={{items}}
+          dropdownRender={() => menu}
+        >
+          <Button100
+            type={props.buttonType}
+            style={{
+              display: 'flex',
+              alignItems: 'center',
+              gap: '0',
+              minWidth: '30px',
+              width: 'auto',
+            }}
+            $buttonStyle={
+              props.buttonType === "primary"
+              ? buttonStyle
+              : undefined
+            }
+          >
+            {
+              hasPrefixIcon && (
+                <IconWrapper style={{
+                  margin: '0px',
+                  marginRight: props.label || hasSuffixIcon ? '3px' : '0x',
+                }}>
+                  {props.prefixIcon}
+                </IconWrapper>
+              ) 
+            }
+            {
+              props.label || (hasPrefixIcon || hasSuffixIcon ? undefined : " ") // Avoid button disappearing
+            }
+            {
+              hasSuffixIcon && (
+                <IconWrapper style={{
+                  margin: '0px',
+                  marginLeft: props.label || hasPrefixIcon ? '3px' : '0x',
+                }}>
+                  {props.suffixIcon}
+                </IconWrapper>
+              ) 
+            }
+          </Button100>
+        </Dropdown>
+      );
+    },
+    (nodeValue) => nodeValue.label.value,
+    getBaseValue,
+  )
+    .setPropertyViewFn((children) => {
+      return (
+        <>
+          {children.buttonType.propertyView({
+            label: trans("table.type"),
+            radioButton: true,
+          })}
+          {children.label.propertyView({
+            label: trans("text"),
+          })}
+          {children.prefixIcon.propertyView({
+            label: trans("button.prefixIcon"),
+          })}
+          {children.suffixIcon.propertyView({
+            label: trans("button.suffixIcon"),
+          })}
+          {children.options.propertyView({
+            title: trans("optionsControl.optionList"),
+          })}
+        </>
+      );
+    })
+    .build();
+})();

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

@@ -10,7 +10,7 @@ import { Button100 } from "comps/comps/buttonComp/buttonCompConstants";
 
 export const ColumnValueTooltip = trans("table.columnValueTooltip");
 
-const ButtonTypeOptions = [
+export const ButtonTypeOptions = [
   {
     label: trans("table.primaryButton"),
     value: "primary",
@@ -19,6 +19,10 @@ const ButtonTypeOptions = [
     label: trans("table.defaultButton"),
     value: "default",
   },
+  {
+    label: trans("text"),
+    value: "text",
+  },
 ] as const;
 
 export const ButtonComp = (function () {

client/packages/lowcoder/src/i18n/locales/en.ts

@@ -1896,6 +1896,7 @@ export const en = {
     "links": "Links",
     "tag": "Tag",
     "select": "Select",
+    "dropdown": "Dropdown",
     "date": "Date",
     "dateTime": "Date Time",
     "badgeStatus": "Status",