feat: add alignment property in style pane for table button cell (#38223)

## Description
**Problem**
When a user uses the button column type in a table widget, the button is
automatically aligned to the left, and the style tab of the button
property pane does not allow the user change the vertical or horizontal
alignment of the button column.

**Solution**
We have added the Alignment property to the button column type for the
table widget, and added tests.


Fixes #38032 

## Automation

/ok-to-test tags="@tag.Table, @tag.Widget, @tag.Binding"

### 🔍 Cypress test results
<!-- This is an auto-generated comment: Cypress test results  -->
> [!TIP]
> 🟢 🟢 🟢 All cypress tests have passed! 🎉 🎉 🎉
> Workflow run:
<https://github.com/appsmithorg/appsmith/actions/runs/12417408061>
> Commit: 07f2eb0795e04e37ed077a850bc9b87166ea549d
> <a
href="https://internal.appsmith.com/app/cypress-dashboard/rundetails-65890b3c81d7400d08fa9ee5?branch=master&workflowId=12417408061&attempt=1"
target="_blank">Cypress dashboard</a>.
> Tags: `@tag.Table, @tag.Widget, @tag.Binding`
> Spec:
> <hr>Thu, 19 Dec 2024 18:44:06 UTC
<!-- end of auto-generated comment: Cypress test results  -->


## Communication
Should the DevRel and Marketing teams inform users about this change?
- [ ] Yes
- [ ] No


<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->

## Summary by CodeRabbit

- **New Features**
- Added a test suite for validating button cell functionality in the
Table Widget V2.
- Introduced a method to generate CSS selectors for specific table
cells.
  
- **Bug Fixes**
- Enhanced visibility controls for alignment properties based on column
types, particularly for button cells.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->

app/client/cypress/e2e/Regression/ClientSide/Widgets/TableV2/columnTypes/ButtonCell_spec.ts

@@ -0,0 +1,61 @@
+import {
+  agHelper,
+  entityExplorer,
+  propPane,
+  table,
+} from "../../../../../../support/Objects/ObjectsCore";
+
+describe(
+  "Table Widget V2 Button cell tests",
+  { tags: ["@tag.Widget", "@tag.Table", "@tag.Binding"] },
+  () => {
+    const tableDataSelector = (row: number, col: number) =>
+      table.GetTableDataSelector(row, col) + " div";
+
+    before(() => {
+      entityExplorer.DragDropWidgetNVerify("tablewidgetv2", 650, 250);
+      propPane.EnterJSContext("Table data", JSON.stringify([{ button: true }]));
+    });
+
+    const validateAlignment = (
+      alignment: string,
+      expectedValue: string,
+      isHorizontal: boolean,
+    ) => {
+      const property = isHorizontal
+        ? "Horizontal Alignment"
+        : "Vertical alignment";
+      propPane.ToggleJSMode(property, true);
+      propPane.UpdatePropertyFieldValue(property, alignment);
+      const cssProperty = isHorizontal ? "justify-content" : "align-items";
+      agHelper
+        .GetElement(tableDataSelector(0, 0))
+        .should("have.css", cssProperty, expectedValue);
+    };
+
+    it("1. Test to validate horizontal and vertical alignments", function () {
+      table.ChangeColumnType("button", "Button");
+      propPane.MoveToTab("Style");
+
+      // Horizontal alignments
+      const horizontalAlignments = [
+        { alignment: "CENTER", expected: "center" },
+        { alignment: "RIGHT", expected: "flex-end" },
+        { alignment: "LEFT", expected: "flex-start" },
+      ];
+      horizontalAlignments.forEach(({ alignment, expected }) => {
+        validateAlignment(alignment, expected, true);
+      });
+
+      // Vertical alignments
+      const verticalAlignments = [
+        { alignment: "TOP", expected: "flex-start" },
+        { alignment: "BOTTOM", expected: "flex-end" },
+        { alignment: "CENTER", expected: "center" },
+      ];
+      verticalAlignments.forEach(({ alignment, expected }) => {
+        validateAlignment(alignment, expected, false);
+      });
+    });
+  },
+);

app/client/cypress/support/Pages/Table.ts

@@ -855,4 +855,8 @@ export class Table {
     this.agHelper.GetHoverNClick(selector, 1, true);
     verify && cy.get(selector).eq(1).should("be.disabled");
   }
+
+  public GetTableDataSelector(rowNum: number, colNum: number): string {
+    return `.t--widget-tablewidgetv2 .tbody .td[data-rowindex=${rowNum}][data-colindex=${colNum}]`;
+  }
 }

app/client/src/widgets/TableWidgetV2/widget/propertyConfig/PanelConfig/Alignment.ts

@@ -9,7 +9,7 @@ export default {
     return hideByColumnType(
       props,
       propertyPath,
-      [ColumnTypes.CHECKBOX, ColumnTypes.SWITCH],
+      [ColumnTypes.CHECKBOX, ColumnTypes.SWITCH, ColumnTypes.BUTTON],
       true,
     );
   },
@@ -57,6 +57,7 @@ export default {
           ColumnTypes.URL,
           ColumnTypes.CHECKBOX,
           ColumnTypes.SWITCH,
+          ColumnTypes.BUTTON,
         ]);
       },
     },
@@ -103,6 +104,7 @@ export default {
           ColumnTypes.URL,
           ColumnTypes.CHECKBOX,
           ColumnTypes.SWITCH,
+          ColumnTypes.BUTTON,
         ]);
       },
     },