fix: fix circular JSON structure when rendering components in table

Author: abelflopes

packages/components/data-table/src/index.tsx

@@ -1,6 +1,7 @@
 import React, { useMemo } from "react";
 import { Table, type TableProps } from "@react-ck/table";
 import * as CC from "change-case";
+import { stringFromObject } from "./utils/string-from-object";
 
 // TODO: add pagination
 // TODO: add section table
@@ -66,7 +67,7 @@ export const DataTable = <T extends TableData>({
       )}
       <tbody>
         {data.map((row) => (
-          <tr key={JSON.stringify(row)}>
+          <tr key={stringFromObject(row)}>
             {keys.map((key) => (
               <td key={key}>{row[key]}</td>
             ))}

packages/components/data-table/src/utils/string-from-object.ts

@@ -0,0 +1,28 @@
+/** Destructs an object into a plain string, has depth limitation to preserve performance */
+
+export const stringFromObject = (obj: object, initialDepth = 0): string => {
+  const maxDepth = 5;
+  const depth = initialDepth + 1;
+
+  const res = Object.entries(obj)
+    .flatMap(([key, value]) => {
+      let converted: string;
+
+      if (typeof value === "string") {
+        converted = value;
+      } else if (typeof value === "function") {
+        converted = String(value);
+      } else if (value === null || value === undefined) {
+        converted = "";
+      } else if (typeof value === "object") {
+        converted = depth < maxDepth ? stringFromObject(value, depth) : "";
+      } else {
+        converted = String(value);
+      }
+
+      return [key, converted];
+    })
+    .join(" ");
+
+  return res;
+};