From b56d6b0e0e242572978a2cb79b36f72b21114045 Mon Sep 17 00:00:00 2001
From: Manish Kushare <kushare.manish9@gmail.com>
Date: Mon, 27 Mar 2023 14:21:08 +0530
Subject: [PATCH] added feature to change the column name dynamically in the
 Table component (#5795)

* added feature to change the column name dynamically

* code refactored

* made the chnages to avoid app crashing if column key is defined

* bug fixed: column.accessor is not a function error

* bug fixed

* bug fixed if column name is empty then provide empty string
---
 .../Editor/Components/Table/columns/index.jsx |  3 +-
 .../Inspector/Components/Table/Table.jsx      | 30 +++++++++++--------
 2 files changed, 18 insertions(+), 15 deletions(-)

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"