From 5b522fcac6b8e4028fcad03e08022cdd52a886b9 Mon Sep 17 00:00:00 2001
From: aleruizj <54830556+aleruizj@users.noreply.github.com>
Date: Fri, 8 Dec 2023 03:56:31 -0600
Subject: [PATCH 1/2] Refactor reactFormatter to use createRoot for React 18
 compatibility

This update modifies the reactFormatter utility to use the createRoot function from 'react-dom/client', ensuring compatibility with React 18's new rendering API. It addresses the warning about ReactDOM.render being deprecated in the new version of React.

By wrapping the JSX element with createRoot, we're able to mount React components within Tabulator's custom formatter without relying on the outdated ReactDOM.render method. This change adheres to the best practices recommended by the React 18 upgrade strategy.
---
 src/Utils.tsx | 39 +++++++++++++++------------------------
 1 file changed, 15 insertions(+), 24 deletions(-)

diff --git a/src/Utils.tsx b/src/Utils.tsx
index 861b7c4..76921fd 100644
--- a/src/Utils.tsx
+++ b/src/Utils.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { render } from 'react-dom';
+import { createRoot } from "react-dom/client";
 
 export function clone(obj: any) {
   return JSON.parse(JSON.stringify(obj));
@@ -38,27 +38,18 @@ export function isSameObject(a: any, b: any) {
   return JSON.stringify(a, stringifyCensor(a)) === JSON.stringify(b, stringifyCensor(b));
 }
 
-export function reactFormatter(JSX: any) {
-  return function customFormatter(cell: any, formatterParams: any, onRendered: (callback: () => void) => void) {
-    // cell - the cell component
-    // formatterParams - parameters set for the column
-    // onRendered - function to call when the formatter has been rendered
-    const renderFn = () => {
-      const cellEl = cell.getElement();
-      if (cellEl) {
-        const formatterCell = cellEl.querySelector('.formatterCell');
-        if (formatterCell) {
-          const CompWithMoreProps = React.cloneElement(JSX, { cell });
-          render(CompWithMoreProps, cellEl.querySelector('.formatterCell'));
-        }
-      }
+function reactFormatter(JSX: any) {
+    return function customFormatter(
+      cell: any,
+      formatterParams: any,
+      onRendered: (callback: () => void) => void
+    ) {
+      onRendered(() => {
+        const cellEl = cell.getElement();
+        const root = createRoot(cellEl);
+        root.render(JSX);
+      });
+      
+      return "<div class='formatterCell'></div>";
     };
-
-    onRendered(renderFn); // initial render only.
-
-    setTimeout(() => {
-      renderFn(); // render every time cell value changed.
-    }, 0);
-    return '<div class="formatterCell"></div>';
-  };
-}
+  }

From 096f2d7e5b7a55952132f30a4df591a925e4dbf2 Mon Sep 17 00:00:00 2001
From: aleruizj <54830556+aleruizj@users.noreply.github.com>
Date: Fri, 8 Dec 2023 04:01:09 -0600
Subject: [PATCH 2/2] added export function

---
 src/Utils.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/Utils.tsx b/src/Utils.tsx
index 76921fd..4d13ea2 100644
--- a/src/Utils.tsx
+++ b/src/Utils.tsx
@@ -38,7 +38,7 @@ export function isSameObject(a: any, b: any) {
   return JSON.stringify(a, stringifyCensor(a)) === JSON.stringify(b, stringifyCensor(b));
 }
 
-function reactFormatter(JSX: any) {
+export function reactFormatter(JSX: any) {
     return function customFormatter(
       cell: any,
       formatterParams: any,