diff --git a/frontend/src/Editor/Components/Table/columns/index.jsx b/frontend/src/Editor/Components/Table/columns/index.jsx
index 3ddfd56e09..b1df1a1bb4 100644
--- a/frontend/src/Editor/Components/Table/columns/index.jsx
+++ b/frontend/src/Editor/Components/Table/columns/index.jsx
@@ -55,10 +55,9 @@ export default function generateColumnsData({
     }
 
     const width = columnSize || defaultColumn.width;
-
     return {
       id: column.id,
-      Header: column.name,
+      Header: resolveReferences(column.name, currentState) ?? '',
       accessor: column.key || column.name,
       filter: customFilter,
       width: width,
diff --git a/frontend/src/Editor/Inspector/Components/Table/Table.jsx b/frontend/src/Editor/Inspector/Components/Table/Table.jsx
index a31822c8eb..c9ac6a2889 100644
--- a/frontend/src/Editor/Inspector/Components/Table/Table.jsx
+++ b/frontend/src/Editor/Inspector/Components/Table/Table.jsx
@@ -210,15 +210,18 @@ class TableComponent extends React.Component {
             <label data-cy={`label-column-name`} className="form-label">
               {this.props.t('widget.Table.columnName', 'Column name')}
             </label>
-            <input
-              data-cy={`input-column-name`}
-              type="text"
-              className="form-control text-field"
-              onBlur={(e) => {
-                e.stopPropagation();
-                this.onColumnItemChange(index, 'name', e.target.value);
+            <CodeHinter
+              currentState={this.props.currentState}
+              initialValue={column.name}
+              theme={this.props.darkMode ? 'monokai' : 'default'}
+              mode="javascript"
+              lineNumbers={false}
+              placeholder={column.name}
+              onChange={(value) => this.onColumnItemChange(index, 'name', value)}
+              componentName={this.getPopoverFieldSource(column.columnType, 'name')}
+              popOverCallback={(showing) => {
+                this.setColumnPopoverRootCloseBlocker('name', showing);
               }}
-              defaultValue={column.name}
             />
           </div>
           {(column.columnType === 'string' || column.columnType === undefined || column.columnType === 'default') && (
@@ -961,6 +964,7 @@ class TableComponent extends React.Component {
               {({ innerRef, droppableProps, placeholder }) => (
                 <div className="w-100" {...droppableProps} ref={innerRef}>
                   {columns.value.map((item, index) => {
+                    const resolvedItemName = resolveReferences(item.name, this.state.currentState);
                     return (
                       <Draggable key={item.id} draggableId={item.id} index={index}>
                         {(provided, snapshot) => (
@@ -978,22 +982,22 @@ class TableComponent extends React.Component {
                               rootClose={this.state.popOverRootCloseBlockers.length === 0}
                               overlay={this.columnPopover(item, index)}
                             >
-                              <div key={item.name}>
+                              <div key={resolvedItemName}>
                                 <div className={`row ${this.props.darkMode ? '' : 'bg-light'}`} role="button">
                                   <div className="col-auto">
                                     <img
-                                      data-cy={`draggable-handle-column-${item.name}`}
+                                      data-cy={`draggable-handle-column-${resolvedItemName}`}
                                       src="../../assets/images/icons/dragicon.svg"
                                     />
                                   </div>
                                   <div className="col">
-                                    <div className="text" data-cy={`column-${item.name}`}>
-                                      {item.name}
+                                    <div className="text" data-cy={`column-${resolvedItemName}`}>
+                                      {resolvedItemName}
                                     </div>
                                   </div>
                                   <div className="col-auto">
                                     <svg
-                                      data-cy={`button-delete-${item.name}`}
+                                      data-cy={`button-delete-${resolvedItemName}`}
                                       onClick={() => this.removeColumn(index)}
                                       width="10"
                                       height="16"