Merge pull request #4299 from appsmithorg/feature/4135-table-url-column-pretty-link

Feature/4135 table url column pretty link

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

@@ -411,6 +411,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,9 @@ export const renderCell = (
           tableWidth={tableWidth}
           title={value.toString()}
         >
-          {value.toString()}
+          {value && columnType === ColumnTypes.URL && cellProperties.displayText
+            ? cellProperties.displayText
+            : value.toString()}
         </AutoToolTipComponent>
       );
   }

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

@@ -203,6 +203,24 @@ export default [
                   isBindProperty: false,
                   isTriggerProperty: false,
                 },
+                {
+                  propertyName: "displayText",
+                  label: "Display Text",
+                  controlType: "COMPUTE_VALUE",
+                  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,11 @@ 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,
+        true,
+      ),
     };
     return cellProperties;
   };