Merge pull request #17 from nuonco/fd/render-nested-data-as-json-string

Author: caioricciuti

src/TabContents/QueryTabContent.jsx

@@ -25,6 +25,7 @@ import {
   PopoverTrigger,
 } from "@/components/ui/popover";
 import downloadCsv from "/src/helpers/donwloadCsv.js";
+import transformRows from "/src/helpers/transformRows.js";
 import { suggestions } from "@/providers/AutoCompleteMonaco";
 
 export default function QueryTabContent({ tab }) {
@@ -237,7 +238,7 @@ export default function QueryTabContent({ tab }) {
                   ) : (
                     <AgGridReact
                       alwaysShowVerticalScroll={true}
-                      rowData={tab.tab_results}
+                      rowData={transformRows(tab.tab_results)}
                       enableCellTextSelection={true}
                       columnDefs={
                         tab.tab_results && tab.tab_results.length > 0

src/TabContents/TableTabContent.jsx

@@ -5,6 +5,7 @@ import { AgGridReact } from "ag-grid-react"; // React Data Grid Component
 import "ag-grid-community/styles/ag-grid.css"; // Mandatory CSS required by the grid
 import "ag-grid-community/styles/ag-theme-alpine.css"; // Optional theme CSS
 import downloadCsv from "/src/helpers/donwloadCsv.js";
+import transformRows from "/src/helpers/transformRows.js";
 
 import {
   Popover,
@@ -251,7 +252,7 @@ export default function TableTabContent({ tab }) {
                 <AgGridReact
                   enableCellTextSelection={true}
                   alwaysShowVerticalScroll={true}
-                  rowData={currentPreview}
+                  rowData={transformRows(currentPreview)}
                   columnDefs={Object.keys(currentPreview[0])?.map((key) => ({
                     headerName: key,
                     field: key,

src/helpers/transformRows.js

@@ -0,0 +1,36 @@
+const transformRows = (previewData) => {
+  if (!previewData) {
+    return previewData;
+  }
+
+  let data = previewData.map((row) => {
+    let newRow = {};
+    Object.keys(row).forEach((key) => {
+      let value = row[key];
+      // type checks
+      if (
+        typeof value === "object" &&
+        !Array.isArray(value) &&
+        value !== null
+      ) {
+        newRow[key] = JSON.stringify(value);
+      } else if (Array.isArray(value)) {
+        // consider recursively checking the children
+        let value = row[key];
+        newRow[key] = value.map((el) => {
+          if (typeof el === "object" && !Array.isArray(el) && el !== null) {
+            return JSON.stringify(el);
+          } else {
+            return el;
+          }
+        });
+      } else {
+        newRow[key] = row[key];
+      }
+    });
+    return newRow;
+  });
+  return data;
+};
+
+export default transformRows;