diff --git a/packages/canary-react/src/component-tests/IcDataTable/IcDataTable.cy.tsx b/packages/canary-react/src/component-tests/IcDataTable/IcDataTable.cy.tsx
index 2de415190a..83738aaa51 100644
--- a/packages/canary-react/src/component-tests/IcDataTable/IcDataTable.cy.tsx
+++ b/packages/canary-react/src/component-tests/IcDataTable/IcDataTable.cy.tsx
@@ -87,6 +87,7 @@ const PAGINATION_GO_TO_PAGE_TEXT_FIELD_SELECTOR =
   ".go-to-page-holder ic-text-field";
 const PAGINATION_GO_TO_PAGE_BUTTON_SELECTOR = ".go-to-page-holder ic-button";
 const ITEMS_PER_PAGE_SELECTOR = ".items-per-page-input";
+const ACTION_ELEMENT = "action-element";
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/explicit-module-boundary-types
 export const BasicDataTable = (dataTableProps?: any): ReactElement => (
@@ -1074,6 +1075,31 @@ describe("IcDataTables", () => {
     });
   });
 
+  it("should run an event when clicked if the data prop contains actionOnClick key", () => {
+    mount(
+      <IcDataTable
+        columns={COLS}
+        data={ACTION_DATA_ELEMENTS}
+        caption="Data tables"
+      ></IcDataTable>
+    );
+
+    cy.spy(window.console, "log").as("spyWinConsoleLog");
+
+    cy.viewport(1024, 768);
+
+    cy.checkHydrated(DATA_TABLE_SELECTOR);
+
+    cy.findShadowEl(DATA_TABLE_SELECTOR, "td")
+      .eq(0)
+      .find("span")
+      .should(HAVE_CLASS, ACTION_ELEMENT)
+      .click();
+
+    cy.get("@spyWinConsoleLog").should("have.callCount", 1);
+    cy.get("@spyWinConsoleLog").should(HAVE_BEEN_CALLED_WITH, "hello");
+  });
+
   it("should render an element in the table cell if the data prop contains the actionElement key", () => {
     mount(
       <IcDataTable
@@ -1083,12 +1109,15 @@ describe("IcDataTables", () => {
       ></IcDataTable>
     );
 
+    cy.viewport(1024, 768);
+
     cy.checkHydrated(DATA_TABLE_SELECTOR);
 
     cy.findShadowEl(DATA_TABLE_SELECTOR, "td")
+
       .eq(0)
       .find("span")
-      .should(HAVE_CLASS, "action-element")
+      .should(HAVE_CLASS, ACTION_ELEMENT)
       .find("ic-button")
       .should("be.visible");
 
@@ -4419,4 +4448,4 @@ describe("IcDataTable visual regression tests in high contrast mode", () => {
       delay: 500,
     });
   });
-});
+});
\ No newline at end of file
diff --git a/packages/canary-react/src/stories/ic-data-table.stories.mdx b/packages/canary-react/src/stories/ic-data-table.stories.mdx
index d5166cd25c..772fd1ca59 100644
--- a/packages/canary-react/src/stories/ic-data-table.stories.mdx
+++ b/packages/canary-react/src/stories/ic-data-table.stories.mdx
@@ -2081,7 +2081,7 @@ const DataTable = () => {
 
 ### Action Element
 
-An example with action elements passed in via the data
+Action Element and Action OnClick can be passed via the `data` prop to display in certain cells, this is beneficial when dealing with large sets of data.
 
 <Canvas withSource="none">
   <Story name="Action Element">
@@ -2115,6 +2115,7 @@ const DATA = [
     firstName: {
       data: "Joe",
       actionElement: `<ic-button variant="icon" size="small  aria-label="you can disable tooltips on icon buttons">  <svg  aria-label="refresh button"  xmlns="http://www.w3.org/2000/svg"    width="24"    height="24"    viewBox="0 0 24 24"    fill="#000000"  >    <path d="M0 0h24v24H0V0z" fill="none"></path>    <path d="M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z"></path>  </svg></ic-button>`,
+      actionOnClick: () => console.log('hello')
     },
     lastName: "Bloggs",
     age: 30,
diff --git a/packages/canary-web-components/src/components/ic-data-table/ic-data-table.stories.mdx b/packages/canary-web-components/src/components/ic-data-table/ic-data-table.stories.mdx
index a520c452cf..669b005f21 100644
--- a/packages/canary-web-components/src/components/ic-data-table/ic-data-table.stories.mdx
+++ b/packages/canary-web-components/src/components/ic-data-table/ic-data-table.stories.mdx
@@ -1583,9 +1583,9 @@ To set the min and max width of a table cell, set the `table-layout` attribute t
 </script>
 ```
 
-### Action Element
+### Action Element and Action OnClick
 
-The example below demonstrates action elements appearing in table cells after being passed in via the data.
+The example below demonstrates action elements and Action OnClicks appearing in table cells after being passed in via the data. When dealing with Large sets of data, its easier to pass in the Elements and Onclick function and keeping the accessibility intact.
 
 <Canvas withSource="none">
   <Story name="Action Element">{ActionElement()}</Story>
@@ -1694,5 +1694,7 @@ export default DataTable;
 #### Development Area
 
 <Canvas withSource="none">
-  <Story name="Dev Area">{DevArea()}</Story>
+  <Story parameters={{ loki: { skip: true } }} name="Dev Area">
+    {DevArea()}
+  </Story>
 </Canvas>
diff --git a/packages/canary-web-components/src/components/ic-data-table/ic-data-table.tsx b/packages/canary-web-components/src/components/ic-data-table/ic-data-table.tsx
index b5d695de5e..c109b00de3 100644
--- a/packages/canary-web-components/src/components/ic-data-table/ic-data-table.tsx
+++ b/packages/canary-web-components/src/components/ic-data-table/ic-data-table.tsx
@@ -1429,6 +1429,12 @@ export class DataTable {
                 <span
                   class="action-element"
                   innerHTML={cellValue("actionElement")}
+                  // eslint-disable-next-line react/jsx-no-bind
+                  onClick={
+                    cell.actionOnClick
+                      ? () => this.handleClick(cell.actionOnClick)
+                      : undefined
+                  }
                 ></span>
               </div>
             ) : (
@@ -1864,7 +1870,9 @@ export class DataTable {
       });
     });
   };
-
+  private handleClick = (callback: () => void) => {
+    return callback();
+  };
   render() {
     const {
       caption,
diff --git a/packages/canary-web-components/src/components/ic-data-table/story-data.ts b/packages/canary-web-components/src/components/ic-data-table/story-data.ts
index 3141a77094..8e50004f54 100644
--- a/packages/canary-web-components/src/components/ic-data-table/story-data.ts
+++ b/packages/canary-web-components/src/components/ic-data-table/story-data.ts
@@ -975,6 +975,9 @@ export const ACTION_DATA_ELEMENTS = [
     firstName: {
       data: "Joe",
       actionElement: `<ic-button variant="icon" size="small  aria-label="you can disable tooltips on icon buttons"> <svg aria-label="refresh button" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="#000000"> <path d="M0 0h24v24H0V0z" fill="none"></path> <path d="M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z"></path> </svg></ic-button>`,
+      actionOnClick: () => {
+        console.log("hello");
+      },
     },
     lastName: "Bloggs",
     age: 31,
diff --git a/packages/canary-web-components/src/components/ic-data-table/test/basic/__snapshots__/ic-data-table.spec.tsx.snap b/packages/canary-web-components/src/components/ic-data-table/test/basic/__snapshots__/ic-data-table.spec.tsx.snap
index f68c7aad60..b04f272d39 100644
--- a/packages/canary-web-components/src/components/ic-data-table/test/basic/__snapshots__/ic-data-table.spec.tsx.snap
+++ b/packages/canary-web-components/src/components/ic-data-table/test/basic/__snapshots__/ic-data-table.spec.tsx.snap
@@ -6615,6 +6615,11 @@ exports[`ic-data-table should slot a custom element into a cell 1`] = `
                   </ic-typography>
                 </div>
               </td>
+              <td class="table-cell with-overflow">
+                <div class="data-type-element">
+                  <slot name="actions-0"></slot>
+                </div>
+              </td>
             </tr>
             <tr class="table-row">
               <td class="table-cell">
@@ -6645,6 +6650,11 @@ exports[`ic-data-table should slot a custom element into a cell 1`] = `
                   </ic-typography>
                 </div>
               </td>
+              <td class="table-cell with-overflow">
+                <div class="data-type-element">
+                  <slot name="actions-1"></slot>
+                </div>
+              </td>
             </tr>
             <tr class="table-row">
               <td class="table-cell">
@@ -6675,6 +6685,11 @@ exports[`ic-data-table should slot a custom element into a cell 1`] = `
                   </ic-typography>
                 </div>
               </td>
+              <td class="table-cell with-overflow">
+                <div class="data-type-element">
+                  <slot name="actions-2"></slot>
+                </div>
+              </td>
             </tr>
             <tr class="table-row">
               <td class="table-cell">
@@ -6705,6 +6720,11 @@ exports[`ic-data-table should slot a custom element into a cell 1`] = `
                   </ic-typography>
                 </div>
               </td>
+              <td class="table-cell with-overflow">
+                <div class="data-type-element">
+                  <slot name="actions-3"></slot>
+                </div>
+              </td>
             </tr>
             <tr class="table-row">
               <td class="table-cell">
@@ -6735,6 +6755,11 @@ exports[`ic-data-table should slot a custom element into a cell 1`] = `
                   </ic-typography>
                 </div>
               </td>
+              <td class="table-cell with-overflow">
+                <div class="data-type-element">
+                  <slot name="actions-4"></slot>
+                </div>
+              </td>
             </tr>
             <tr class="table-row">
               <td class="table-cell">
@@ -6765,6 +6790,11 @@ exports[`ic-data-table should slot a custom element into a cell 1`] = `
                   </ic-typography>
                 </div>
               </td>
+              <td class="table-cell with-overflow">
+                <div class="data-type-element">
+                  <slot name="actions-5"></slot>
+                </div>
+              </td>
             </tr>
           </tbody>
         </table>
diff --git a/packages/canary-web-components/src/components/ic-data-table/test/basic/ic-data-table.spec.tsx b/packages/canary-web-components/src/components/ic-data-table/test/basic/ic-data-table.spec.tsx
index a0df95ddcb..117410cfd4 100644
--- a/packages/canary-web-components/src/components/ic-data-table/test/basic/ic-data-table.spec.tsx
+++ b/packages/canary-web-components/src/components/ic-data-table/test/basic/ic-data-table.spec.tsx
@@ -375,6 +375,7 @@ const dataWithActionElement = [
     name: {
       data: name1,
       actionElement: `<ic-button size="small" variant="icon"  aria-label="you can disable tooltips on icon buttons"  disable-tooltip="true">  <svg    xmlns="http://www.w3.org/2000/svg"    width="24"    height="24"    viewBox="0 0 24 24"    fill="#000000"  >    <path d="M0 0h24v24H0V0z" fill="none"></path>    <path d="M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z"></path>  </svg></ic-button>`,
+      actionOnClick: () => console.log("hello"),
     },
     age: 36,
     department: "Accounts",