fix: fix column-ordering example

examples/column-ordering/src/App.js

@@ -79,20 +79,18 @@ function Table({ columns, data }) {
           ))}
         </thead>
         <tbody>
-          <AnimatePresence>
-            {rows.slice(0, 10).map(
-              (row, i) =>
-                prepareRow(row) || (
-                  <tr {...row.getRowProps()}>
-                    {row.cells.map((cell, i) => {
-                      return (
-                        <td {...cell.getCellProps()}>{cell.render('Cell')}</td>
-                      )
-                    })}
-                  </tr>
-                )
-            )}
-          </AnimatePresence>
+          {rows.slice(0, 10).map(
+            (row, i) =>
+              prepareRow(row) || (
+                <tr {...row.getRowProps()}>
+                  {row.cells.map((cell, i) => {
+                    return (
+                      <td {...cell.getCellProps()}>{cell.render('Cell')}</td>
+                    )
+                  })}
+                </tr>
+              )
+          )}
         </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),
-    [columns, defaultColumn, flatColumns]
+    () => makeHeaderGroups(flatColumns, defaultColumn),
+    [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 = {