FEATURE-4135 : Table URL columns pretty link

-- Add displayText field into property pane
-- Display urls based on displayText
-- Fix url alignment issue

app/client/src/components/designSystems/appsmith/TableComponent/AutoToolTipComponent.tsx

@@ -85,7 +85,7 @@ function AutoToolTipComponent(props: Props) {
       updateToolTip(false);
     }
   }, [ref]);
-  if (props.columnType === ColumnTypes.URL) {
+  if (props.columnType === ColumnTypes.URL && props.title) {
     return <LinkWrapper {...props} />;
   }
   return (

app/client/src/components/designSystems/appsmith/TableComponent/Constants.ts

@@ -94,6 +94,7 @@ export interface CellLayoutProperties {
   buttonStyle?: string;
   buttonLabelColor?: string;
   buttonLabel?: string;
+  displayText?: string;
 }
 
 export interface TableColumnMetaProps {
@@ -144,6 +145,7 @@ export interface ColumnProperties {
   inputFormat?: string;
   dropdownOptions?: string;
   onOptionChange?: string;
+  displayText?: string;
 }
 
 export const ConditionFunctions: {

app/client/src/components/designSystems/appsmith/TableComponent/TableStyledWrappers.tsx

@@ -413,6 +413,9 @@ export const CellWrapper = styled.div<{
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
+    text-align: ${(props) =>
+      props?.cellProperties?.horizontalAlignment &&
+      TEXT_ALIGN[props?.cellProperties?.horizontalAlignment]};
   }
   .hidden-icon {
     display: none;

app/client/src/components/designSystems/appsmith/TableComponent/TableUtilities.tsx

@@ -112,7 +112,15 @@ export const renderCell = (
           tableWidth={tableWidth}
           title={value.toString()}
         >
-          {value.toString()}
+          {value &&
+          columnType === ColumnTypes.URL &&
+          cellProperties.displayText ? (
+            <a href={value.toString()} rel="noreferrer" target="_blank">
+              {cellProperties.displayText}
+            </a>
+          ) : (
+            value.toString()
+          )}
         </AutoToolTipComponent>
       );
   }

app/client/src/widgets/TableWidget/TablePropertyPaneConfig.ts

@@ -201,6 +201,24 @@ export default [
                   isBindProperty: false,
                   isTriggerProperty: false,
                 },
+                {
+                  propertyName: "displayText",
+                  label: "Display Text",
+                  controlType: "INPUT_TEXT",
+                  customJSControl: "COMPUTE_VALUE",
+                  updateHook: updateDerivedColumnsHook,
+                  hidden: (props: TableWidgetProps, propertyPath: string) => {
+                    const baseProperty = getBasePropertyPath(propertyPath);
+                    const columnType = get(
+                      props,
+                      `${baseProperty}.columnType`,
+                      "",
+                    );
+                    return columnType !== "url";
+                  },
+                  isBindProperty: false,
+                  isTriggerProperty: false,
+                },
                 {
                   propertyName: "computedValue",
                   label: "Computed Value",

app/client/src/widgets/TableWidget/index.tsx

@@ -120,6 +120,10 @@ class TableWidget extends BaseWidget<TableWidgetProps, WidgetState> {
       textSize: this.getPropertyValue(columnProperties.textSize, rowIndex),
       textColor: this.getPropertyValue(columnProperties.textColor, rowIndex),
       fontStyle: this.getPropertyValue(columnProperties.fontStyle, rowIndex), //Fix this
+      displayText: this.getPropertyValue(
+        columnProperties.displayText,
+        rowIndex,
+      ),
     };
     return cellProperties;
   };