From 0486c5c787c63c2bd2d28bc1fb17d9c8d1de624b Mon Sep 17 00:00:00 2001
From: tannerlinsley <tannerlinsley@gmail.com>
Date: Wed, 28 Aug 2019 10:50:33 -0600
Subject: [PATCH] fix: fix column-ordering example

---
 examples/column-ordering/src/App.js | 26 ++++++++++++--------------
 src/hooks/useTable.js               |  4 ++--
 src/utils.js                        |  6 ++----
 3 files changed, 16 insertions(+), 20 deletions(-)

diff --git a/examples/column-ordering/src/App.js b/examples/column-ordering/src/App.js
index 1bd688a..42a7451 100644
--- a/examples/column-ordering/src/App.js
+++ b/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>
diff --git a/src/hooks/useTable.js b/src/hooks/useTable.js
index a623c93..4fe596d 100755
--- a/src/hooks/useTable.js
+++ b/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])
diff --git a/src/utils.js b/src/utils.js
index e98a713..ae6c3b3 100755
--- a/src/utils.js
+++ b/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 = {