diff --git a/src/publicUtils.js b/src/publicUtils.js
index 27302f8214..5d7cf1fd9e 100644
--- a/src/publicUtils.js
+++ b/src/publicUtils.js
@@ -6,8 +6,11 @@ export const actions = {
   init: 'init',
 }
 
+export const defaultRenderer = ({ value = '' }) => value;
+export const emptyRenderer = () => <>&nbsp;</>;
+
 export const defaultColumn = {
-  Cell: ({ value = '' }) => value,
+  Cell: defaultRenderer,
   width: 150,
   minWidth: 0,
   maxWidth: Number.MAX_SAFE_INTEGER,
diff --git a/src/utils.js b/src/utils.js
index 28bc61c5e6..ae5d48ca4e 100755
--- a/src/utils.js
+++ b/src/utils.js
@@ -1,5 +1,5 @@
 import React from 'react'
-import { defaultColumn } from './publicUtils'
+import { defaultColumn, emptyRenderer } from './publicUtils'
 
 // Find the depth of the columns
 export function findMaxDepth(columns, depth = 0) {
@@ -71,8 +71,8 @@ export function decorateColumn(column, userDefaultColumn) {
   }
   Object.assign(column, {
     // Make sure there is a fallback header, just in case
-    Header: () => <>&nbsp;</>,
-    Footer: () => <>&nbsp;</>,
+    Header: emptyRenderer,
+    Footer: emptyRenderer,
     ...defaultColumn,
     ...userDefaultColumn,
     ...column,