From 5a5be80703ddbefd0d9efc7955d8d7cd5a13e923 Mon Sep 17 00:00:00 2001
From: navaneeth <navaneethpk@outlook.com>
Date: Wed, 5 May 2021 07:07:56 +0530
Subject: [PATCH] Fix for crash while adding more table columns

---
 .../src/Editor/Inspector/Components/Table.jsx | 26 +++++++++++++++----
 frontend/src/_helpers/utils.js                |  1 +
 2 files changed, 22 insertions(+), 5 deletions(-)

diff --git a/frontend/src/Editor/Inspector/Components/Table.jsx b/frontend/src/Editor/Inspector/Components/Table.jsx
index 206cc06c7d..9501633a76 100644
--- a/frontend/src/Editor/Inspector/Components/Table.jsx
+++ b/frontend/src/Editor/Inspector/Components/Table.jsx
@@ -213,7 +213,7 @@ class Table extends React.Component {
           />
           <EventSelector
             param="onClick"
-            eventMeta={{ displayName: 'On click'}}
+            eventMeta={{ displayName: 'On click' }}
             definition={action.onClick}
             eventUpdated={this.actionButtonEventUpdated}
             dataQueries={this.state.dataQueries}
@@ -248,10 +248,26 @@ class Table extends React.Component {
     this.props.paramUpdated({ name: 'columns' }, 'value', newColumns, 'properties');
   };
 
+  generateNewColumnName = (columns) => {
+    let found = false;
+    let columnName = '';
+    let currentNumber = 1;
+
+    while (!found) {
+      columnName = `new_column${currentNumber}`;
+      if (columns.find(column => column.name === columnName) === undefined) {
+        found = true;
+      }
+      currentNumber += 1;
+    }
+
+    return columnName;
+  }
+
   addNewColumn = () => {
     const columns = this.state.component.component.definition.properties.columns;
     const newValue = columns.value;
-    newValue.push({ name: 'new_column' });
+    newValue.push({ name: this.generateNewColumnName(columns.value) });
     this.props.paramUpdated({ name: 'columns' }, 'value', newValue, 'properties');
   };
 
@@ -362,11 +378,11 @@ class Table extends React.Component {
           <hr></hr>
 
           {renderElement(component, componentMeta, paramUpdated, dataQueries, 'serverSidePagination', 'properties', currentState)}
-          
+
           <hr></hr>
 
-          {renderEvent(component, eventUpdated, dataQueries, eventOptionUpdated, 'onRowClicked', componentMeta.events['onRowClicked'])}
-          {renderEvent(component, eventUpdated, dataQueries, eventOptionUpdated, 'onPageChanged', componentMeta.events['onPageChanged'])}
+          {renderEvent(component, eventUpdated, dataQueries, eventOptionUpdated, 'onRowClicked', componentMeta.events.onRowClicked)}
+          {renderEvent(component, eventUpdated, dataQueries, eventOptionUpdated, 'onPageChanged', componentMeta.events.onPageChanged)}
 
           <div className="field mb-2 mt-2">
             <label className="form-label mt-2">Bulk update query</label>
diff --git a/frontend/src/_helpers/utils.js b/frontend/src/_helpers/utils.js
index 1e83c23cb2..ce4d247941 100644
--- a/frontend/src/_helpers/utils.js
+++ b/frontend/src/_helpers/utils.js
@@ -100,6 +100,7 @@ export function computeComponentName(componentType, currentComponents) {
     if (Object.values(currentComponents).find(component => component.name === componentName) === undefined) {
       found = true;
     }
+    currentNumber = currentNumber + 1;
   }
 
   return componentName;