fix: fix column-ordering example

examples/column-ordering/src/App.js

@@ -79,7 +79,6 @@ function Table({ columns, data }) {
           ))}
         </thead>
         <tbody>
-          <AnimatePresence>
           {rows.slice(0, 10).map(
             (row, i) =>
               prepareRow(row) || (
@@ -92,7 +91,6 @@ function Table({ columns, data }) {
                 </tr>
               )
           )}
-          </AnimatePresence>
         </tbody>
       </table>
       <pre>

src/hooks/useTable.js

@@ -121,8 +121,8 @@ export const useTable = (props, ...plugins) => {
 
   // Make the headerGroups
   const headerGroups = React.useMemo(
-    () => makeHeaderGroups(flatColumns, columns, defaultColumn),
+    () => makeHeaderGroups(flatColumns, defaultColumn),
-    [columns, defaultColumn, flatColumns]
+    [defaultColumn, flatColumns]
   )
 
   const headers = React.useMemo(() => headerGroups[0].headers, [headerGroups])

src/utils.js

@@ -2,7 +2,7 @@ import React from 'react'
 
 const columnFallbacks = {
   Header: () => null,
-  Cell: ({ cell: { value = '' } }) => value,
+  Cell: ({ cell: { value = '' } }) => String(value),
   show: true,
 }
 
@@ -79,11 +79,9 @@ export function decorateColumnTree(columns, defaultColumn, parent, depth = 0) {
 }
 
 // Build the header groups from the bottom up
-export function makeHeaderGroups(flatColumns, columns, defaultColumn) {
+export function makeHeaderGroups(flatColumns, defaultColumn) {
   const headerGroups = []
 
-  const maxDepth = findMaxDepth(columns)
-
   // Build each header group from the bottom up
   const buildGroup = (columns, depth) => {
     const headerGroup = {