diff --git a/frontend/src/Editor/Components/Table/Table.jsx b/frontend/src/Editor/Components/Table/Table.jsx
index 176f1c0bff..6f0c9b07a1 100644
--- a/frontend/src/Editor/Components/Table/Table.jsx
+++ b/frontend/src/Editor/Components/Table/Table.jsx
@@ -136,6 +136,8 @@ export function Table({
   const { events: allAppEvents } = useAppInfo();
 
   const tableEvents = allAppEvents.filter((event) => event.target === 'component' && event.sourceId === id);
+  const tableColumnEvents = allAppEvents.filter((event) => event.target === 'table_column' && event.sourceId === id);
+  const tableActionEvents = allAppEvents.filter((event) => event.target === 'table_action' && event.sourceId === id);
 
   const getItemStyle = ({ isDragging, isDropAnimating }, draggableStyle) => ({
     ...draggableStyle,
@@ -404,6 +406,7 @@ export function Table({
     tableRef,
     t,
     darkMode,
+    tableColumnEvents: tableColumnEvents,
   });
 
   columnData = useMemo(
@@ -442,8 +445,9 @@ export function Table({
         defaultColumn,
         fireEvent,
         setExposedVariables,
+        tableActionEvents,
       }),
-    [JSON.stringify(actions)]
+    [JSON.stringify(actions), tableActionEvents]
   );
 
   const textWrapActions = (id) => {
@@ -472,6 +476,8 @@ export function Table({
       darkMode,
       allowSelection,
       highlightSelectedRow,
+      JSON.stringify(tableActionEvents),
+      JSON.stringify(tableColumnEvents),
     ] // Hack: need to fix
   );
 
diff --git a/frontend/src/Editor/Components/Table/columns/actions.jsx b/frontend/src/Editor/Components/Table/columns/actions.jsx
index 0c1fcc6c37..fe646882ad 100644
--- a/frontend/src/Editor/Components/Table/columns/actions.jsx
+++ b/frontend/src/Editor/Components/Table/columns/actions.jsx
@@ -1,6 +1,13 @@
 import React from 'react';
 
-const generateActionsData = ({ actions: actionItems, columnSizes, defaultColumn, fireEvent, setExposedVariables }) => {
+const generateActionsData = ({
+  actions: actionItems,
+  columnSizes,
+  defaultColumn,
+  fireEvent,
+  setExposedVariables,
+  tableActionEvents,
+}) => {
   const leftActions = (actions = actionItems) => actions.filter((action) => action.position === 'left');
   const rightActions = (actions = actionItems) =>
     actions.filter((action) => [undefined, 'right'].includes(action.position));
@@ -32,6 +39,7 @@ const generateActionsData = ({ actions: actionItems, columnSizes, defaultColumn,
                         data: cell.row.original,
                         rowId: cell.row.id,
                         action,
+                        tableActionEvents,
                       });
                     });
                   }}
@@ -72,6 +80,7 @@ const generateActionsData = ({ actions: actionItems, columnSizes, defaultColumn,
                         data: cell.row.original,
                         rowId: cell.row.id,
                         action,
+                        tableActionEvents,
                       });
                     });
                   }}
diff --git a/frontend/src/Editor/Components/Table/columns/index.jsx b/frontend/src/Editor/Components/Table/columns/index.jsx
index 6d8d4e4b7d..10eaa82e49 100644
--- a/frontend/src/Editor/Components/Table/columns/index.jsx
+++ b/frontend/src/Editor/Components/Table/columns/index.jsx
@@ -9,6 +9,7 @@ import { Toggle } from '../Toggle';
 import { Datepicker } from '../Datepicker';
 import { Link } from '../Link';
 import moment from 'moment';
+
 export default function generateColumnsData({
   columnProperties,
   columnSizes,
@@ -25,6 +26,7 @@ export default function generateColumnsData({
   tableRef,
   t,
   darkMode,
+  tableColumnEvents,
 }) {
   return columnProperties.map((column) => {
     const columnSize = columnSizes[column.id] || columnSizes[column.name];
@@ -429,6 +431,7 @@ export default function generateColumnsData({
                           column: column,
                           rowId: cell.row.id,
                           row: cell.row.original,
+                          tableColumnEvents,
                         });
                       }
                     );
diff --git a/frontend/src/Editor/Inspector/Components/Table/Table.jsx b/frontend/src/Editor/Inspector/Components/Table/Table.jsx
index dd87657629..d4e066b545 100644
--- a/frontend/src/Editor/Inspector/Components/Table/Table.jsx
+++ b/frontend/src/Editor/Inspector/Components/Table/Table.jsx
@@ -454,25 +454,18 @@ class TableComponent extends React.Component {
                 />
               </div>
               <EventManager
-                //!have to check
-                component={{
-                  component: {
-                    definition: {
-                      events: column.events ?? [],
-                    },
-                  },
-                }}
                 sourceId={this.props?.component?.id}
-                eventSourceType="component"
+                eventSourceType="table_column"
                 hideEmptyEventsAlert={true}
                 eventMetaDefinition={{ events: { onChange: { displayName: 'On change' } } }}
-                currentState={this.props.currentState}
+                currentState={this.state.currentState}
                 dataQueries={this.props.dataQueries}
                 components={this.props.components}
                 eventsChanged={(events) => this.columnEventChanged(column, events)}
                 apps={this.props.apps}
                 popOverCallback={(showing) => {
-                  this.setColumnPopoverRootCloseBlocker('event-manager', showing);
+                  this.setState({ actionPopOverRootClose: !showing });
+                  this.setState({ showPopOver: showing });
                 }}
                 pages={this.props.pages}
               />
@@ -833,7 +826,7 @@ class TableComponent extends React.Component {
             //!have to check
             component={dummyComponentForActionButton}
             sourceId={this.props?.component?.id}
-            eventSourceType="component"
+            eventSourceType="table_action"
             eventMetaDefinition={{ events: { onClick: { displayName: 'On click' } } }}
             currentState={this.state.currentState}
             dataQueries={this.props.dataQueries}
diff --git a/frontend/src/Editor/Inspector/EventManager.jsx b/frontend/src/Editor/Inspector/EventManager.jsx
index 1c2dbb08ca..98e8e00d27 100644
--- a/frontend/src/Editor/Inspector/EventManager.jsx
+++ b/frontend/src/Editor/Inspector/EventManager.jsx
@@ -50,7 +50,9 @@ export const EventManager = ({
   const { updateAppVersionEventHandlers, createAppVersionEventHandlers, deleteAppVersionEventHandler } =
     useAppDataActions();
 
-  const currentEvents = allAppEvents.filter((event) => event.sourceId === sourceId);
+  const currentEvents = allAppEvents.filter((event) => {
+    return event.sourceId === sourceId && event.target === eventSourceType;
+  });
 
   const [events, setEvents] = useState([]);
   const [focusedEventIndex, setFocusedEventIndex] = useState(null);
@@ -301,7 +303,11 @@ export const EventManager = ({
         className={`${darkMode && 'popover-dark-themed theme-dark'} shadow`}
         data-cy="popover-card"
       >
-        <Popover.Body>
+        <Popover.Body
+          onClick={(e) => {
+            e.stopPropagation();
+          }}
+        >
           <div className="row">
             <div className="col-3 p-2">
               <span data-cy="event-label">{t('editor.inspector.eventManager.event', 'Event')}</span>
diff --git a/frontend/src/Editor/QueryManager/Components/QueryManagerBody.jsx b/frontend/src/Editor/QueryManager/Components/QueryManagerBody.jsx
index e19408c034..131271238b 100644
--- a/frontend/src/Editor/QueryManager/Components/QueryManagerBody.jsx
+++ b/frontend/src/Editor/QueryManager/Components/QueryManagerBody.jsx
@@ -186,7 +186,7 @@ export const QueryManagerBody = ({
         <div className="query-manager-events pb-4 flex-grow-1">
           <EventManager
             sourceId={selectedQuery?.id}
-            eventSourceType="data_query"
+            eventSourceType="data_query" //check
             eventMetaDefinition={queryComponent.componentMeta}
             currentState={currentState}
             components={allComponents}
diff --git a/frontend/src/_helpers/appUtils.js b/frontend/src/_helpers/appUtils.js
index 0a516b6225..d8297779bd 100644
--- a/frontend/src/_helpers/appUtils.js
+++ b/frontend/src/_helpers/appUtils.js
@@ -663,22 +663,12 @@ export async function onEvent(_ref, eventName, events, options = {}, mode = 'edi
   }
 
   if (eventName === 'onTableActionButtonClicked') {
-    const { component, data, action, rowId } = options;
-    useCurrentStateStore.getState().actions.setCurrentState({
-      components: {
-        ...getCurrentState().components,
-        [component.name]: {
-          ...getCurrentState().components[component.name],
-          selectedRow: data,
-          selectedRowId: rowId,
-        },
-      },
-    });
-    if (action && action.events) {
-      for (const event of action.events) {
-        if (event.actionId) {
-          // the event param uses a hacky workaround for using same format used by event manager ( multiple handlers )
-          await executeAction(_self, { ...event, ...event.options }, mode, customVariables);
+    const { action, tableActionEvents } = options;
+    console.log('---arpit::: ', { tableActionEvents });
+    if (action && tableActionEvents) {
+      for (const event of tableActionEvents) {
+        if (event?.event?.actionId) {
+          await executeAction(_self, event.event, mode, customVariables);
         }
       }
     } else {
@@ -687,23 +677,12 @@ export async function onEvent(_ref, eventName, events, options = {}, mode = 'edi
   }
 
   if (eventName === 'OnTableToggleCellChanged') {
-    const { component, column, rowId, row } = options;
-    useCurrentStateStore.getState().actions.setCurrentState({
-      components: {
-        ...getCurrentState().components,
-        [component.name]: {
-          ...getCurrentState().components[component.name],
-          selectedRow: row,
-          selectedRowId: rowId,
-        },
-      },
-    });
+    const { column, tableColumnEvents } = options;
 
-    if (column && column.events) {
-      for (const event of column.events) {
-        if (event.actionId) {
-          // the event param uses a hacky workaround for using same format used by event manager ( multiple handlers )
-          await executeAction(_self, { ...event, ...event.options }, mode, customVariables);
+    if (column && tableColumnEvents) {
+      for (const event of tableColumnEvents) {
+        if (event?.event?.actionId) {
+          await executeAction(_self, event.event, mode, customVariables);
         }
       }
     } else {
diff --git a/server/migrations/1691004706564-CreateEventHandlerTable.ts b/server/migrations/1691004706564-CreateEventHandlerTable.ts
index e26f89ebb3..027d91840d 100644
--- a/server/migrations/1691004706564-CreateEventHandlerTable.ts
+++ b/server/migrations/1691004706564-CreateEventHandlerTable.ts
@@ -40,7 +40,7 @@ export class CreateEventHandlerTable1691004706564 implements MigrationInterface
           {
             name: 'target',
             type: 'enum',
-            enum: ['page', 'component', 'data_query'],
+            enum: ['page', 'component', 'data_query', 'table_column', 'table_action'],
             default: "'page'",
             isNullable: false,
           },
diff --git a/server/src/entities/event_handler.entity.ts b/server/src/entities/event_handler.entity.ts
index fff1724dc2..c3931672a8 100644
--- a/server/src/entities/event_handler.entity.ts
+++ b/server/src/entities/event_handler.entity.ts
@@ -13,6 +13,8 @@ export enum Target {
   page = 'page',
   component = 'component',
   dataQuery = 'data_query',
+  tableColumn = 'table_column',
+  tableAction = 'table_action',
 }
 
 @Entity({ name: 'event_handlers' })
diff --git a/server/src/services/events_handler.service.ts b/server/src/services/events_handler.service.ts
index 41f1f22814..efcfa6be3a 100644
--- a/server/src/services/events_handler.service.ts
+++ b/server/src/services/events_handler.service.ts
@@ -2,7 +2,7 @@ import { BadRequestException, Injectable, NotFoundException } from '@nestjs/comm
 import { InjectRepository } from '@nestjs/typeorm';
 import { EntityManager, Repository } from 'typeorm';
 import { Component } from 'src/entities/component.entity';
-// import { Page } from 'src/entities/page.entity';
+
 import { EventHandler } from 'src/entities/event_handler.entity';
 import { dbTransactionWrap } from 'src/helpers/utils.helper';