ReorderCell not working in React 19 due to ReactDOM.render no longer existing

[jimmycallin]

Expected Behavior

fixed-data-table-2 reordering feature should work in React 19

Current Behavior

When upgrading to React 19, you get an error when trying to reorder a cell that ReactDom.render is not a function.

Possible Solution

See here:

fixed-data-table-2/src/plugins/ResizeReorder/ReorderCell.js

Line 243 in 84e2d3f

ReactDOM.render(

Replace ReactDOM.render with ReactDOM.createRoot for newer React versions.

Steps to Reproduce (for bugs)

Your Environment

• Version used:
• Browser Name and version:
• Operating System and version (desktop or mobile):
• Link to your project:

[pradeepnschrodinger]

Thanks for filing.

This turned out be trickier than I imagined 😔 .
We have React v17 as a peer dependency version.

fixed-data-table-2/package.json

Lines 10 to 13 in 84e2d3f

	"peerDependencies": {
	"react": ">=17.0.1",
	"react-dom": ">=17.0.1"
	},

To retain backward compatibility, I wanted to do feature detection by checking if ReactDOM.render or ReactDOM.createRoot exists at runtime.
Unfortunately, the newer v18/v19 API ReactDOM.createRoot is only present in the new react-dom/client package, which is not present in v17.

This means I can't do something like:

import ReactDOM from 'react-dom' // for react v17
// the next line throws an error for clients using react v17
import ReactDOMClient from 'react-dom/client' // for react v19

// ...

function renderDragProxy() {
  // ...

  // switch APIs based on what's available
  if (ReactDOMClient?.createRoot) {
    ReactDOMClient.createRoot(...).render(...)
  } else {
    ReactDOMClient.render(...)
  }
}

The path forward that I see is to make a new major version for FDT (v3.x) that drops support for React v17 in favor of React v18/v19.
But I'm gonna keep this open for a while to see if anyone has suggestions/workarounds.

cc: @juzerzarif @mycrobe @novakps @tchoiSchrodinger @miskreant

[jimmycallin]

I think unfortunately that you are correct. While awaiting feedback, would you mind creating a beta of a next major version to unblock us upgrading to React 19? Thanks!

[pradeepnschrodinger]

Sure. Let me see if I can put a quick FDT v3-experimental release with React bumped up to test out stuff.

Btw, clients can also pass their own implementation for reordering cells.
ReorderCell is just designed as an HoC.

The simplest approach (just for unblocking purposes) would be to copy it's code, replace ReactDOM.render with ReactDOM.createRoot, and pass that as your header renderer.

[pradeepnschrodinger]

@jimmycallin , please try out v3.0.1-react-v19 and let me know how it works out.

Reordering worked out when I smoke tested locally.

[jimmycallin]

just tried it out and so far so good - thank you! 🙏