docs: replace react-dnd with dnd-kit in col-dnd example (#5358)

Author: KevinVandy

docs/guide/column-ordering.md

@@ -7,7 +7,7 @@ title: Column Ordering
 Want to skip to the implementation? Check out these examples:
 
 - [column-ordering](../framework/react/examples/column-ordering)
-- [column-ordering-dnd](../framework/react/examples/column-dnd)
+- [column-dnd](../framework/react/examples/column-dnd)
 
 ## API
 
@@ -97,3 +97,15 @@ const handleDragEnd = (e: DragEvent) => {
 
 //use your dnd solution of choice
 ```
+
+#### Drag and Drop Column Reordering Suggestions (React)
+
+There are undoubtedly many ways to implement drag and drop features along-side TanStack Table. Here are a few suggestions in order for you to not have a bad time:
+
+1. Do NOT try to use [`"react-dnd"`](https://react-dnd.github.io/react-dnd/docs/overview) _if you are using React 18 or newer_. React DnD was an important library for its time, but it now does not get updated very often, and it has incompatibilities with React 18, especially in React Strict Mode. It is still possible to get it to work, but there are newer alternatives that have better compatibility and are more actively maintained. React DnD's Provider may also interfere and conflict with any other DnD solutions you may want to try in your app.
+
+2. Use [`"@dnd-kit/core"`](https://dndkit.com/). DnD Kit is a modern, modular and lightweight drag and drop library that is highly compatible with the modern React ecosystem, and it works well with semantic `<table>` markup. Both of the official TanStack DnD examples, [Column DnD](../framework/react/examples/column-dnd) and [Row DnD](../framework/react/examples/row-dnd), now use DnD Kit.
+
+3. Consider other DnD libraries like [`"react-beautiful-dnd"`](https://github.com/atlassian/react-beautiful-dnd), but be aware of their potentially large bundle sizes, maintenance status, and compatibility with `<table>` markup.
+
+4. Consider using native browser events and state management to implement lightweight drag and drop features. However, be aware that this approach may not be best for mobile users if you do not go the extra mile to implement proper touch events. [Material React Table V2](https://www.material-react-table.com/docs/examples/column-ordering) is an example of a library that implements TanStack Table with only browser drag and drop events such as `onDragStart`, `onDragEnd`, `onDragEnter` and no other dependencies. Browse its source code to see how it is done.

examples/react/column-dnd/package.json

@@ -9,11 +9,13 @@
     "start": "vite"
   },
   "dependencies": {
+    "@dnd-kit/core": "^6.1.0",
+    "@dnd-kit/modifiers": "^7.0.0",
+    "@dnd-kit/sortable": "^8.0.0",
+    "@dnd-kit/utilities": "^3.2.2",
     "@faker-js/faker": "^8.3.1",
     "@tanstack/react-table": "^8.12.0",
     "react": "^18.2.0",
-    "react-dnd": "^16.0.1",
-    "react-dnd-html5-backend": "^16.0.1",
     "react-dom": "^18.2.0"
   },
   "devDependencies": {

examples/react/column-dnd/src/index.css

@@ -15,6 +15,7 @@ th {
   border-bottom: 1px solid lightgray;
   border-right: 1px solid lightgray;
   padding: 2px 4px;
+  text-align: left;
 }
 
 th div {