fixes: bugfixes on column deletion & column updation

frontend/src/AppBuilder/Widgets/NewTable/Table.jsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useMemo, memo } from 'react';
+import React, { useEffect, useMemo, memo, useRef } from 'react';
 // eslint-disable-next-line import/no-unresolved
 import { diff } from 'deep-object-diff';
 import { shallow } from 'zustand/shallow';
@@ -19,7 +19,7 @@ export const Table = memo(
     const setTableEvents = useTableStore((state) => state.setTableEvents, shallow);
     const setTableStyles = useTableStore((state) => state.setTableStyles, shallow);
     const setColumnDetails = useTableStore((state) => state.setColumnDetails, shallow);
-    const getColumnTransformations = useTableStore((state) => state.getColumnTransformations, shallow);
+    const transformations = useTableStore((state) => state.getColumnTransformations(id), shallow);
 
     // get table properties
     const visibility = useTableStore((state) => state.getTableProperties(id)?.visibility, shallow);
@@ -44,11 +44,12 @@ export const Table = memo(
     } = properties;
 
     const firstRowOfTable = !isEmpty(restOfProperties.data?.[0]) ? restOfProperties.data?.[0] : undefined;
-    const transformations = getColumnTransformations(id);
 
     // Get all app events. Needed for certain events like onBulkUpdate
     const allAppEvents = useEvents();
 
+    const shouldAutogenerateColumns = useRef(false);
+
     // Initialize component on the table store
     useEffect(() => {
       initializeComponent(id);
@@ -65,6 +66,10 @@ export const Table = memo(
       setTableActions(id, actions);
     }, [id, actions, setTableActions]);
 
+    useEffect(() => {
+      if (useDynamicColumn) shouldAutogenerateColumns.current = true;
+    }, [firstRowOfTable, useDynamicColumn, columnData]);
+
     // Set column details to the table store. This is responsible for auto-generating columns
     useEffect(() => {
       setColumnDetails(
@@ -74,8 +79,10 @@ export const Table = memo(
         columnData,
         firstRowOfTable,
         autogenerateColumns,
-        columnDeletionHistory
+        columnDeletionHistory,
+        shouldAutogenerateColumns.current
       );
+      shouldAutogenerateColumns.current = false;
     }, [
       id,
       columns,

frontend/src/AppBuilder/Widgets/NewTable/_components/TableContainer/TableContainer.jsx

@@ -1,4 +1,4 @@
-import React, { useState, useMemo, useEffect, useRef, useCallback, memo } from 'react';
+import React, { useState, useMemo, useEffect, useRef, useCallback } from 'react';
 import useTableStore from '../../_stores/tableStore';
 import TableExposedVariables from '../TableExposedVariables';
 import Header from '../Header';

frontend/src/AppBuilder/Widgets/NewTable/_components/TableData/TableData.jsx

@@ -104,6 +104,7 @@ export const TableData = ({
   } else if (data.length === 0) {
     return (
       <div className={'table-responsive jet-data-table overflow-hidden position-relative'}>
+        {renderTableHeader()}
         <EmptyState />
       </div>
     );

frontend/src/AppBuilder/Widgets/NewTable/_hooks/useTable.js

@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { useState, useMemo } from 'react';
 import {
   getCoreRowModel,
   useReactTable,
@@ -30,8 +30,12 @@ export function useTable({
   const [columnFilters, setColumnFilters] = useState([]);
   const [columnOrder, setColumnOrder] = useState(columns.map((column) => column.id));
 
+  // When the columns change, the data is not getting re-rendered. So, we need to create a new data array
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  const newData = useMemo(() => [...data], [data, columns]);
+
   const table = useReactTable({
-    data,
+    data: newData,
     columns,
     enableSorting,
     getCoreRowModel: getCoreRowModel(),

frontend/src/AppBuilder/Widgets/NewTable/_stores/slices/columnSlice.js

@@ -13,7 +13,8 @@ export const createColumnSlice = (set, get) => ({
     columnData,
     firstRowOfTable,
     autogenerateColumnsFlag,
-    columnDeletionHistory
+    columnDeletionHistory,
+    shouldAutogenerateColumns
   ) => {
     set(
       (state) => {
@@ -23,19 +24,30 @@ export const createColumnSlice = (set, get) => ({
           state.components[id].columnDetails.columnData = columnData ?? [];
         } else {
           state.components[id].columnDetails.useDynamicColumn = false;
-          state.components[id].columnDetails.columnProperties = removeNullValues(columns);
         }
-        const columnProperties = get().generateColumns(
-          id,
-          columns,
-          firstRowOfTable,
-          isDynamicColumnSelected,
-          autogenerateColumnsFlag,
-          columnDeletionHistory,
-          columnData
-        );
-        state.components[id].columnDetails.columnProperties = columnProperties;
-        state.components[id].columnDetails.transformations = get().generateColumnTransformations(id, columnProperties);
+        if (shouldAutogenerateColumns) {
+          const columnProperties = get().generateColumns(
+            id,
+            columns,
+            firstRowOfTable,
+            isDynamicColumnSelected,
+            autogenerateColumnsFlag,
+            columnDeletionHistory,
+            columnData
+          );
+          state.components[id].columnDetails.columnProperties = columnProperties;
+          state.components[id].columnDetails.transformations = get().generateColumnTransformations(
+            id,
+            columnProperties
+          );
+        } else {
+          const columnProperties = removeNullValues(columns);
+          state.components[id].columnDetails.columnProperties = columnProperties;
+          state.components[id].columnDetails.transformations = get().generateColumnTransformations(
+            id,
+            columnProperties
+          );
+        }
       },
       false,
       { type: 'setColumnDetails', payload: { id, columns, useDynamicColumn, columnData } }
@@ -74,10 +86,12 @@ export const createColumnSlice = (set, get) => ({
   generateColumnTransformations: (id, columnProperties) => {
     const transformations = columnProperties
       .filter((column) => column.transformation && column.transformation != '{{cellValue}}')
-      .map((column) => ({
-        key: column.key ? column.key : column.name,
-        transformation: column.transformation,
-      }));
+      .map((column) => {
+        return {
+          key: column.key ? column.key : column.name,
+          transformation: column.transformation,
+        };
+      });
     const existingTransformations = get().getColumnTransformations(id);
     if (!isEqual(existingTransformations, transformations)) {
       return transformations;