feat: Add button group column type to TableWidgetV2 (#28571)

app/client/src/widgets/TableWidgetV2/component/Constants.ts

@@ -154,15 +154,52 @@ export interface CellWrappingProperties {
   allowCellWrapping: boolean;
 }
 
-export interface ButtonCellProperties {
-  buttonVariant: ButtonVariant;
+export interface BaseButtonProperties {
+  buttonVariant?: ButtonVariant;
   buttonColor?: string;
+}
+
+export interface ButtonCellProperties extends BaseButtonProperties {
   buttonLabel?: string;
   isCompact?: boolean;
   iconName?: IconName;
   iconAlign?: Alignment;
 }
 
+export interface GroupButtonMenuItem extends BaseButtonProperties {
+  id: string;
+  label?: string;
+  onClick?: string;
+  isVisible?: boolean;
+  isDisabled?: boolean;
+  iconName?: IconName;
+  iconAlign?: Alignment;
+  backgroundColor?: string;
+  textColor?: string;
+  iconColor?: string;
+  buttonType?: "SIMPLE" | "MENU";
+  menuItems?: Record<string, GroupButtonMenuItem>;
+}
+
+export interface GroupButtonConfig extends BaseButtonProperties {
+  id: string;
+  label?: string;
+  onClick?: string;
+  isVisible?: boolean;
+  isDisabled?: boolean;
+  iconName?: IconName;
+  iconAlign?: Alignment;
+  buttonType: "SIMPLE" | "MENU";
+  menuItems?: Record<string, GroupButtonMenuItem>;
+}
+
+export interface ButtonGroupCellProperties extends BaseButtonProperties {
+  groupButtons?: Record<string, GroupButtonConfig>;
+  orientation?: "horizontal" | "vertical";
+  buttonVariant?: ButtonVariant;
+  isDisabled?: boolean;
+}
+
 export interface MenuButtonCellProperties {
   menuButtonLabel?: string;
   menuItems: MenuItems;
@@ -226,6 +263,7 @@ export interface CellLayoutProperties
     InlineEditingCellProperties,
     CellWrappingProperties,
     ButtonCellProperties,
+    ButtonGroupCellProperties,
     URLCellProperties,
     MenuButtonCellProperties,
     SelectCellProperties,
@@ -365,6 +403,9 @@ export interface ColumnProperties
     ColumnEditabilityProperties,
     CurrencyColumnProperties,
     EditActionColumnProperties {
+  // Button group properties
+  groupButtons?: Record<string, GroupButtonConfig>;
+  orientation?: "horizontal" | "vertical";
   allowSameOptionsInNewRow?: boolean;
   newRowSelectOptions?: DropdownOption[];
   buttonLabel?: string;

app/client/src/widgets/TableWidgetV2/component/cellComponents/ButtonGroupCell.tsx

@@ -0,0 +1,103 @@
+import React, { memo, useState } from "react";
+import type {
+  BaseCellComponentProps,
+  GroupButtonConfig,
+  CompactMode,
+} from "../Constants";
+import { Button } from "@blueprintjs/core";
+import type { ButtonVariant } from "components/constants";
+import { ButtonVariantTypes } from "components/constants";
+import styled from "styled-components";
+import { objectKeys } from "@appsmith/utils";
+
+const ButtonGroupContainer = styled.div<{
+  orientation?: "horizontal" | "vertical";
+}>`
+  display: flex;
+  flex-direction: ${(props) =>
+    props.orientation === "vertical" ? "column" : "row"};
+  gap: 4px;
+  align-items: center;
+  justify-content: flex-start;
+  width: 100%;
+  height: 100%;
+`;
+
+export interface ButtonGroupCellProps extends BaseCellComponentProps {
+  groupButtons?: Record<string, GroupButtonConfig>;
+  orientation?: "horizontal" | "vertical";
+  buttonVariant?: ButtonVariant;
+  isDisabled?: boolean;
+  compactMode: CompactMode;
+  allowCellWrapping?: boolean;
+  fontStyle?: string;
+  textColor?: string;
+  textSize?: string;
+}
+
+function ButtonGroupCell(props: ButtonGroupCellProps) {
+  const {
+    buttonVariant = ButtonVariantTypes.PRIMARY,
+    groupButtons = {},
+    isCellVisible,
+    isDisabled,
+    orientation = "horizontal",
+  } = props;
+
+  const [loadingButtons, setLoadingButtons] = useState<Record<string, boolean>>(
+    {},
+  );
+
+  if (!isCellVisible) return null;
+
+  const handleClick = (buttonId: string, onClick?: string) => {
+    if (onClick) {
+      setLoadingButtons((prev) => ({
+        ...prev,
+        [buttonId]: true,
+      }));
+
+      // Simulate action completion
+      setTimeout(() => {
+        setLoadingButtons((prev) => ({
+          ...prev,
+          [buttonId]: false,
+        }));
+      }, 1000);
+    }
+  };
+
+  return (
+    <ButtonGroupContainer orientation={orientation}>
+      {objectKeys(groupButtons)
+        .filter((id) => groupButtons[id].isVisible !== false)
+        .map((id) => {
+          const button = groupButtons[id];
+          return (
+            <Button
+              alignText={button.iconAlign}
+              disabled={isDisabled || button.isDisabled}
+              fill
+              icon={button.iconName}
+              intent={
+                buttonVariant === ButtonVariantTypes.PRIMARY
+                  ? "primary"
+                  : "none"
+              }
+              key={id}
+              loading={loadingButtons[id]}
+              minimal={buttonVariant === ButtonVariantTypes.TERTIARY}
+              onClick={() => handleClick(id, button.onClick)}
+              outlined={buttonVariant === ButtonVariantTypes.SECONDARY}
+              small
+              text={button.label}
+            />
+          );
+        })}
+    </ButtonGroupContainer>
+  );
+}
+
+const MemoizedButtonGroupCell = memo(ButtonGroupCell);
+
+export { MemoizedButtonGroupCell as ButtonGroupCell };

app/client/src/widgets/TableWidgetV2/component/cellComponents/index.ts

@@ -0,0 +1 @@
+export { ButtonGroupCell } from "./ButtonGroupCell";

app/client/src/widgets/TableWidgetV2/constants.ts

@@ -147,6 +147,7 @@ export enum ColumnTypes {
   SWITCH = "switch",
   CURRENCY = "currency",
   HTML = "html",
+  BUTTON_GROUP = "buttonGroup",
 }
 
 export enum ReadOnlyColumnTypes {
@@ -168,6 +169,7 @@ export const ActionColumnTypes = [
   ColumnTypes.MENU_BUTTON,
   ColumnTypes.EDIT_ACTIONS,
   ColumnTypes.HTML,
+  ColumnTypes.BUTTON_GROUP,
 ];
 
 export const FilterableColumnTypes = [

app/client/src/widgets/TableWidgetV2/widget/index.tsx

@@ -92,12 +92,14 @@ import type { IconName } from "@blueprintjs/icons";
 import { IconNames } from "@blueprintjs/icons";
 import { Colors } from "constants/Colors";
 import equal from "fast-deep-equal/es6";
+import { ButtonVariantTypes } from "components/constants";
 import {
   DefaultAutocompleteDefinitions,
   sanitizeKey,
 } from "widgets/WidgetUtils";
 import PlainTextCell from "../component/cellComponents/PlainTextCell";
 import { ButtonCell } from "../component/cellComponents/ButtonCell";
+import { ButtonGroupCell } from "../component/cellComponents/ButtonGroupCell";
 import { MenuButtonCell } from "../component/cellComponents/MenuButtonCell";
 import { ImageCell } from "../component/cellComponents/ImageCell";
 import { VideoCell } from "../component/cellComponents/VideoCell";
@@ -2063,7 +2065,8 @@ class TableWidgetV2 extends BaseWidget<TableWidgetProps, WidgetState> {
                 isVisible: true,
                 label: cellProperties.buttonLabel || DEFAULT_BUTTON_LABEL,
                 dynamicTrigger: column.onClick || "",
-                variant: cellProperties.buttonVariant,
+                variant:
+                  cellProperties.buttonVariant || ButtonVariantTypes.PRIMARY,
                 borderRadius:
                   cellProperties.borderRadius || this.props.borderRadius,
                 boxShadow: cellProperties.boxShadow,
@@ -2092,6 +2095,28 @@ class TableWidgetV2 extends BaseWidget<TableWidgetProps, WidgetState> {
           />
         );
 
+      case ColumnTypes.BUTTON_GROUP:
+        return (
+          <ButtonGroupCell
+            allowCellWrapping={cellProperties.allowCellWrapping}
+            buttonVariant={
+              cellProperties.buttonVariant || ButtonVariantTypes.PRIMARY
+            }
+            compactMode={compactMode}
+            fontStyle={cellProperties.fontStyle}
+            groupButtons={cellProperties.groupButtons}
+            horizontalAlignment={cellProperties.horizontalAlignment}
+            isCellDisabled={cellProperties.isCellDisabled}
+            isCellVisible={cellProperties.isCellVisible ?? true}
+            isDisabled={!!cellProperties.isDisabled}
+            isHidden={isHidden}
+            orientation={cellProperties.orientation || "horizontal"}
+            textColor={cellProperties.textColor}
+            textSize={cellProperties.textSize}
+            verticalAlignment={cellProperties.verticalAlignment}
+          />
+        );
+
       case ColumnTypes.EDIT_ACTIONS:
         return (
           <EditActionCell