4.2.3

.storybook/config.js

@@ -15,7 +15,7 @@ import ServerSide from '../stories/ServerSide.js'
 import SubComponents from '../stories/SubComponents.js'
 import Pivoting from '../stories/Pivoting.js'
 import PivotingSubComponents from '../stories/PivotingSubComponents.js'
-import MillionRows from '../stories/MillionRows.js'
+import OneHundredKRows from '../stories/OneHundredKRows.js'
 //
 configure(() => {
   storiesOf('1. Docs')
@@ -36,5 +36,5 @@ configure(() => {
     .add('Sub Components', SubComponents)
     .add('Pivoting & Aggregation', Pivoting)
     .add('Pivoting & Aggregation w/ Sub Components', PivotingSubComponents)
-    .add('1 Million Rows w/ Pivoting & Sub Components', MillionRows)
+    .add('100k Rows w/ Pivoting & Sub Components', OneHundredKRows)
 }, module)

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-table",
-  "version": "4.2.1",
+  "version": "4.2.3",
   "description": "A fast, lightweight, opinionated table and datagrid built on React",
   "license": "MIT",
   "homepage": "https://github.com/tannerlinsley/react-table#readme",

src/index.js

@@ -170,18 +170,23 @@ export default React.createClass({
       oldState.pivotBy !== newState.pivotBy ||
       oldState.sorting !== newState.sorting
     ) {
-      this.setState(this.getDataModel(nextProps, nextState))
+      this.setStateWithData(this.getDataModel(nextProps, nextState))
     }
   },
 
   setStateWithData (newState, cb) {
     const oldState = this.getResolvedState()
     const newResolvedState = this.getResolvedState({}, newState)
-    if (oldState.sorting !== newResolvedState.sorting) {
-      Object.assign(newState, this.getDataModel({}, newState))
+    if (
+      oldState.resolvedData !== newResolvedState.resolvedData ||
+      oldState.sorting !== newResolvedState.sorting
+    ) {
+      Object.assign(newState, this.getSortedData({}, newState))
     }
     // Calculate pageSize all the time
-    newState.pages = newResolvedState.manual ? newResolvedState.pages : Math.ceil(newResolvedState.resolvedData.length / newResolvedState.pageSize)
+    if (newResolvedState.resolvedData) {
+      newState.pages = newResolvedState.manual ? newResolvedState.pages : Math.ceil(newResolvedState.resolvedData.length / newResolvedState.pageSize)
+    }
     return this.setState(newState, cb)
   },
 
@@ -190,8 +195,7 @@ export default React.createClass({
     const newState = this.getResolvedState(nextProps, nextState)
     // State changes that trigger a render
     if (
-      oldState.sorting !== newState.sorting ||
-      oldState.resolvedData !== newState.resolvedData ||
+      oldState.sortedData !== newState.sortedData ||
       oldState.page !== newState.page ||
       oldState.pageSize !== newState.pageSize ||
       oldState.expandedRows !== newState.expandedRows
@@ -259,13 +263,15 @@ export default React.createClass({
       headerGroups,
       standardColumns,
       allDecoratedColumns,
-      hasHeaderGroups
+      hasHeaderGroups,
+      // Sorted Data
+      sortedData
     } = resolvedProps
 
     // Pagination
     const startRow = pageSize * page
     const endRow = startRow + pageSize
-    const pageRows = manual ? resolvedData : resolvedData.slice(startRow, endRow)
+    const pageRows = manual ? resolvedData : sortedData.slice(startRow, endRow)
     const minRows = this.getMinRows()
     const padRows = pages > 1 ? _.range(pageSize - pageRows.length)
       : minRows ? _.range(Math.max(minRows - pageRows.length, 0))
@@ -332,7 +338,7 @@ export default React.createClass({
               >
                 {typeof column.header === 'function' ? (
                   <column.header
-                    data={resolvedData}
+                    data={sortedData}
                     column={column}
                   />
                 ) : column.header}
@@ -377,7 +383,7 @@ export default React.createClass({
                     <span key={column.id}>
                       {typeof column.header === 'function' ? (
                         <column.header
-                          data={resolvedData}
+                          data={sortedData}
                           column={column}
                         />
                       ) : column.header}
@@ -427,7 +433,7 @@ export default React.createClass({
         >
           {typeof column.header === 'function' ? (
             <column.header
-              data={resolvedData}
+              data={sortedData}
               column={column}
             />
           ) : column.header}
@@ -535,9 +541,10 @@ export default React.createClass({
 
     const makePadRow = (row, i) => {
       return (
-        <TrGroupComponent>
+        <TrGroupComponent
+          key={i}
+        >
           <TrComponent
-            key={i}
             className={classnames(trClassName, '-padRow')}
             style={trStyle}
           >
@@ -618,9 +625,7 @@ export default React.createClass({
       data,
       pivotIDKey,
       pivotValKey,
-      subRowsKey,
-      manual,
-      sorting
+      subRowsKey
     } = this.getResolvedState(nextProps, nextState)
 
     // Determine Header Groups
@@ -715,7 +720,7 @@ export default React.createClass({
     const columnPercentage = 100 / allVisibleColumns.length
 
     // Access the data
-    let accessedData = data.map((d, i) => {
+    let resolvedData = data.map((d, i) => {
       const row = {
         __original: d,
         __index: i
@@ -768,18 +773,13 @@ export default React.createClass({
         })
         return groupedRows
       }
-      accessedData = groupRecursively(accessedData, pivotBy)
+      resolvedData = groupRecursively(resolvedData, pivotBy)
     }
 
-    const resolvedSorting = sorting.length ? sorting : this.getInitSorting(allDecoratedColumns)
-
-    // Resolve the data from either manual data or sorted data
-    const resolvedData = manual ? accessedData : this.sortData(accessedData, resolvedSorting)
-
     return {
+      resolvedData,
       columnPercentage,
       pivotColumn,
-      resolvedData,
       allVisibleColumns,
       headerGroups,
       standardColumns,
@@ -788,6 +788,22 @@ export default React.createClass({
     }
   },
 
+  getSortedData (nextProps, nextState) {
+    const {
+      manual,
+      sorting,
+      allDecoratedColumns,
+      resolvedData
+    } = this.getResolvedState(nextProps, nextState)
+
+    const resolvedSorting = sorting.length ? sorting : this.getInitSorting(allDecoratedColumns)
+
+    // Resolve the data from either manual data or sorted data
+    return {
+      sortedData: manual ? resolvedData : this.sortData(resolvedData, resolvedSorting)
+    }
+  },
+
   fireOnChange () {
     this.props.onChange(this.getResolvedState(), this)
   },

stories/OneHundredKRows.js

@@ -6,7 +6,7 @@ import CodeHighlight from './components/codeHighlight'
 import ReactTable from '../lib/index'
 
 export default () => {
-  const data = _.map(_.range(1000000), d => {
+  const data = _.map(_.range(100000), d => {
     return {
       firstName: namor.generate({ words: 1, numLen: 0 }),
       lastName: namor.generate({ words: 1, numLen: 0 }),