diff --git a/src/frontend/src/components/arrayReaderComponent/index.tsx b/src/frontend/src/components/arrayReaderComponent/index.tsx
index bcbfde010..6e151d426 100644
--- a/src/frontend/src/components/arrayReaderComponent/index.tsx
+++ b/src/frontend/src/components/arrayReaderComponent/index.tsx
@@ -1,10 +1,12 @@
+import TableAutoCellRender from "../tableComponent/components/tableAutoCellRender";
+
 export default function ArrayReader({ array }: { array: any[] }): JSX.Element {
   //TODO check array type
   return (
     <div>
       <ul>
         {array.map((item, index) => (
-          <li key={index}>{item}</li>
+          <li key={index}>{<TableAutoCellRender value={item} />}</li>
         ))}
       </ul>
     </div>
diff --git a/src/frontend/src/components/recordsOutputComponent/index.tsx b/src/frontend/src/components/recordsOutputComponent/index.tsx
index 36c3a7370..957a43cc7 100644
--- a/src/frontend/src/components/recordsOutputComponent/index.tsx
+++ b/src/frontend/src/components/recordsOutputComponent/index.tsx
@@ -13,7 +13,9 @@ function RecordsOutputComponent({
   rows: any;
   columnMode?: "intersection" | "union";
 }) {
+  console.log("rows", rows);
   const columns = extractColumnsFromRows(rows, columnMode);
+  console.log("columns", columns);
 
   const columnDefs = columns.map((col, idx) => ({
     ...col,
diff --git a/src/frontend/src/components/tableComponent/components/tableAutoCellRender/index.tsx b/src/frontend/src/components/tableComponent/components/tableAutoCellRender/index.tsx
index 0c5c00ac9..4a6020f78 100644
--- a/src/frontend/src/components/tableComponent/components/tableAutoCellRender/index.tsx
+++ b/src/frontend/src/components/tableComponent/components/tableAutoCellRender/index.tsx
@@ -9,20 +9,17 @@ import { Badge } from "../../../ui/badge";
 
 export default function TableAutoCellRender({
   value,
-}: CustomCellRendererProps) {
+}: CustomCellRendererProps | { value: any }) {
   function getCellType() {
     switch (typeof value) {
       case "object":
         if (value === null) {
           return String(value);
         } else if (Array.isArray(value)) {
-          return <ArrayReader array={value} />;
-        } else if (value.definitions) {
-          // use a custom render defined by the sender
+          return <ObjectRender object={value} />;
         } else {
           return <ObjectRender object={value} />;
         }
-        break;
       case "string":
         if (isTimeStampString(value)) {
           return <DateReader date={value} />;
diff --git a/src/frontend/src/utils/utils.ts b/src/frontend/src/utils/utils.ts
index aecf874b7..f067f3617 100644
--- a/src/frontend/src/utils/utils.ts
+++ b/src/frontend/src/utils/utils.ts
@@ -1,7 +1,6 @@
 import { ColDef, ColGroupDef } from "ag-grid-community";
 import clsx, { ClassValue } from "clsx";
 import { twMerge } from "tailwind-merge";
-import TableAutoCellRender from "../components/tableComponent/components/tableAutoCellRender";
 import { APIDataType, TemplateVariableType } from "../types/api";
 import {
   groupedObjType,
@@ -10,6 +9,7 @@ import {
 } from "../types/components";
 import { NodeType } from "../types/flow";
 import { FlowState } from "../types/tabs";
+import TableAutoCellRender from "../components/tableComponent/components/tableAutoCellRender";
 
 export function classNames(...classes: Array<string>): string {
   return classes.filter(Boolean).join(" ");