Move row and cell generation to useTable. Add warnings for unprepared rows

src/hooks/useExpanded.js

@@ -62,17 +62,6 @@ export const useExpanded = props => {
       row.isExpanded =
         (row.original && row.original[expandedKey]) || getBy(expanded, path)
 
-      row.cells = columns.map(column => {
-        const cell = {
-          column,
-          row,
-          state: null,
-          value: row.values[column.id]
-        }
-
-        return cell
-      })
-
       expandedRows.push(row)
 
       if (row.isExpanded && row.subRows && row.subRows.length) {

src/hooks/useRows.js

@@ -27,9 +27,22 @@ export const useRows = props => {
         original,
         index: i,
         subRows,
-        depth
+        depth,
+        cells: [{}] // This is a dummy cell
       }
 
+      // Override common array functions (and the dummy cell's getCellProps function)
+      // to show an error if it is accessed without calling prepareRow
+      const unpreparedAccessWarning = () => {
+        throw new Error(
+          'React-Table: You have not called prepareRow(row) one or more rows you are attempting to render.'
+        )
+      }
+      row.cells.map = unpreparedAccessWarning
+      row.cells.filter = unpreparedAccessWarning
+      row.cells.forEach = unpreparedAccessWarning
+      row.cells[0].getCellProps = unpreparedAccessWarning
+
       // Create the cells and values
       row.values = {}
       columns.forEach(column => {

src/hooks/useTable.js

@@ -136,8 +136,9 @@ export const useTable = (props, ...plugins) => {
   api.rows = applyHooks(api.hooks.rows, api.rows, api)
   if (debug) console.timeEnd('hooks.rows')
 
-  // This function is absolutely necessary and MUST be called on
+  // The prepareRow function is absolutely necessary and MUST be called on
   // any rows the user wishes to be displayed.
+
   api.prepareRow = row => {
     const { path } = row
     row.getRowProps = props =>
@@ -150,15 +151,16 @@ export const useTable = (props, ...plugins) => {
     // need to apply any row specific hooks (useExpanded requires this)
     applyHooks(api.hooks.row, row, api)
 
-    row.cells = row.cells.filter(cell => cell.column.visible)
+    const visibleColumns = api.columns.filter(column => column.visible)
 
-    row.cells.forEach(cell => {
-      if (!cell) {
-        return
+    // Build the cells for each row
+    row.cells = visibleColumns.map(column => {
+      const cell = {
+        column,
+        row,
+        value: row.values[column.id]
       }
 
-      const { column } = cell
-
       cell.getCellProps = props => {
         const columnPathStr = [path, column.id].join('_')
         return mergeProps(
@@ -182,6 +184,8 @@ export const useTable = (props, ...plugins) => {
           ...userProps
         })
       }
+
+      return cell
     })
   }