diff --git a/app/client/src/components/designSystems/appsmith/TableComponent/AutoToolTipComponent.tsx b/app/client/src/components/designSystems/appsmith/TableComponent/AutoToolTipComponent.tsx
index f8f9d93fba..1380448883 100644
--- a/app/client/src/components/designSystems/appsmith/TableComponent/AutoToolTipComponent.tsx
+++ b/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 ;
}
return (
diff --git a/app/client/src/components/designSystems/appsmith/TableComponent/Constants.ts b/app/client/src/components/designSystems/appsmith/TableComponent/Constants.ts
index a8dbb7d807..88c74bac35 100644
--- a/app/client/src/components/designSystems/appsmith/TableComponent/Constants.ts
+++ b/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: {
diff --git a/app/client/src/components/designSystems/appsmith/TableComponent/TableStyledWrappers.tsx b/app/client/src/components/designSystems/appsmith/TableComponent/TableStyledWrappers.tsx
index e516d2d432..75d98bbd82 100644
--- a/app/client/src/components/designSystems/appsmith/TableComponent/TableStyledWrappers.tsx
+++ b/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;
diff --git a/app/client/src/components/designSystems/appsmith/TableComponent/TableUtilities.tsx b/app/client/src/components/designSystems/appsmith/TableComponent/TableUtilities.tsx
index e639867e84..50eae8e479 100644
--- a/app/client/src/components/designSystems/appsmith/TableComponent/TableUtilities.tsx
+++ b/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 ? (
+
+ {cellProperties.displayText}
+
+ ) : (
+ value.toString()
+ )}
);
}
diff --git a/app/client/src/widgets/TableWidget/TablePropertyPaneConfig.ts b/app/client/src/widgets/TableWidget/TablePropertyPaneConfig.ts
index 2273b8ed17..174bd36a60 100644
--- a/app/client/src/widgets/TableWidget/TablePropertyPaneConfig.ts
+++ b/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",
diff --git a/app/client/src/widgets/TableWidget/index.tsx b/app/client/src/widgets/TableWidget/index.tsx
index ba4f1acb18..45340af266 100644
--- a/app/client/src/widgets/TableWidget/index.tsx
+++ b/app/client/src/widgets/TableWidget/index.tsx
@@ -120,6 +120,10 @@ class TableWidget extends BaseWidget {
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;
};