5.0.4

Fixes #69

README.md

@@ -103,7 +103,7 @@ const columns = [{
 }, {
   header: 'Age',
   accessor: 'age',
-  render: props => <span className='number'>props.value</span> // Custom cell components!
+  render: props => <span className='number'>{props.value}</span> // Custom cell components!
 }, {
   header: 'Friend Name',
   accessor: d => d.friend.name // Custom value accessors!

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-table",
-  "version": "5.0.3",
+  "version": "5.0.4",
   "description": "A fast, lightweight, opinionated table and datagrid built on React",
   "license": "MIT",
   "homepage": "https://github.com/tannerlinsley/react-table#readme",
@@ -62,6 +62,7 @@
     "react-dom": "^15.4.2",
     "react-json-tree": "^0.10.1",
     "standard": "^8.0.0",
+    "storybook": "^0.0.0",
     "stylus": "^0.54.5",
     "uglifyify": "3.0.3"
   },

src/componentMethods.js

@@ -226,13 +226,13 @@ export default {
       page: (page + 1) > newPages ? newPages - 1 : page
     }
   },
-  getSortedData (nextProps, nextState) {
+  getSortedData (state) {
     const {
       manual,
       sorting,
       allDecoratedColumns,
       resolvedData
-    } = this.getResolvedState(nextProps, nextState)
+    } = state
 
     const resolvedSorting = sorting.length ? sorting : this.getInitSorting(allDecoratedColumns)
 
@@ -273,6 +273,9 @@ export default {
     // }]
   },
   sortData (data, sorting) {
+    if (!sorting.length) {
+      return data
+    }
     const sorted = _.orderBy(data, sorting.map(sort => {
       return row => {
         if (row[sort.id] === null || row[sort.id] === undefined) {

src/index.js

@@ -18,6 +18,8 @@ export const ReactTableDefaults = {
   defaultPageSize: 20,
   showPageJump: true,
   expanderColumnWidth: 35,
+  collapseOnChange: true,
+  freezeWhenExpanded: false,
 
   // Controlled State Overrides
   // page: undefined,
@@ -154,10 +156,10 @@ export default React.createClass({
 
   getResolvedState (props, state) {
     const resolvedState = {
-      ...this.state,
-      ...state,
-      ...this.props,
-      ...props
+      ..._.compactObject(this.state),
+      ..._.compactObject(state),
+      ..._.compactObject(this.props),
+      ..._.compactObject(props)
     }
     return resolvedState
   },
@@ -173,6 +175,7 @@ export default React.createClass({
   componentWillReceiveProps (nextProps, nextState) {
     const oldState = this.getResolvedState()
     const newState = this.getResolvedState(nextProps, nextState)
+
     // Props that trigger a data update
     if (
       oldState.data !== newState.data ||
@@ -187,22 +190,49 @@ export default React.createClass({
   setStateWithData (newState, cb) {
     const oldState = this.getResolvedState()
     const newResolvedState = this.getResolvedState({}, newState)
-    if (
-      oldState.resolvedData !== newResolvedState.resolvedData ||
-      oldState.sorting !== newResolvedState.sorting
-    ) {
-      Object.assign(newState, this.getSortedData({}, newState))
+    const { freezeWhenExpanded } = newResolvedState
+
+    // Default to unfrozen state
+    newResolvedState.frozen = false
+
+    // If freezeWhenExpanded is set, check for frozen conditions
+    if (freezeWhenExpanded) {
+      // if any rows are expanded, freeze the existing data and sorting
+      const keys = Object.keys(newResolvedState.expandedRows)
+      for (var i = 0; i < keys.length; i++) {
+        if (newResolvedState.expandedRows[keys[i]]) {
+          newResolvedState.frozen = true
+          break
+        }
+      }
     }
+
+    // If the data isn't frozen and either the data or
+    // sorting model has changed, update the data
+    if (
+      (oldState.frozen && !newResolvedState.frozen) ||
+      oldState.sorting !== newResolvedState.sorting ||
+      (!newResolvedState.frozen && oldState.resolvedData !== newResolvedState.resolvedData)
+    ) {
+      // If collapseOnChange is set, automatically close expanded subcomponents
+      if (this.props.collapseOnChange) {
+        newResolvedState.expandedRows = {}
+      }
+      Object.assign(newResolvedState, this.getSortedData(newResolvedState))
+    }
+
     // Calculate pageSize all the time
     if (newResolvedState.resolvedData) {
-      newState.pages = newResolvedState.manual ? newResolvedState.pages : Math.ceil(newResolvedState.resolvedData.length / newResolvedState.pageSize)
+      newResolvedState.pages = newResolvedState.manual ? newResolvedState.pages : Math.ceil(newResolvedState.resolvedData.length / newResolvedState.pageSize)
     }
-    return this.setState(newState, cb)
+
+    return this.setState(newResolvedState, cb)
   },
 
   shouldComponentUpdate (nextProps, nextState) {
     const oldState = this.getResolvedState()
     const newState = this.getResolvedState(nextProps, nextState)
+
     // State changes that trigger a render
     if (
       oldState.sortedData !== newState.sortedData ||
@@ -376,6 +406,7 @@ export default React.createClass({
         if (column.pivotColumns) {
           return (
             <ThComponent
+              key={i}
               className={classnames(
                 'rt-pivot-header',
                 classes
@@ -390,6 +421,7 @@ export default React.createClass({
         }
         return (
           <ThComponent
+            key={i}
             className={classnames(
               'rt-expander-header',
               classes
@@ -629,6 +661,7 @@ export default React.createClass({
                   const PivotCell = column.pivotRender
                   return (
                     <TdComponent
+                      key={i2}
                       className={classnames(
                         'rt-pivot',
                         classes
@@ -669,6 +702,7 @@ export default React.createClass({
                 // Return the regular expander cell
                 return (
                   <TdComponent
+                    key={i2}
                     className={classnames(
                       classes,
                       {hidden: !show}

src/utils.js

@@ -15,7 +15,8 @@ export default {
   makeTemplateComponent,
   groupBy,
   isArray,
-  splitProps
+  splitProps,
+  compactObject
 }
 
 function get (obj, path, def) {
@@ -173,3 +174,13 @@ function splitProps ({className, style, ...rest}) {
     rest
   }
 }
+
+function compactObject (obj) {
+  const newObj = {}
+  for (var key in obj) {
+    if (obj.hasOwnProperty(key) && obj[key] !== undefined && typeof obj[key] !== 'undefined') {
+      newObj[key] = obj[key]
+    }
+  }
+  return newObj
+}

stories/SubComponents.js

@@ -125,4 +125,4 @@ export default (
   />
 )
   `
-}
+}

yarn.lock

@@ -2998,7 +2998,7 @@ indexof@0.0.1:
   version "0.0.1"
   resolved "https://registry.yarnpkg.com/indexof/-/indexof-0.0.1.tgz#82dc336d232b9062179d05ab3293a66059fd435d"
 
-inflight@^1.0.4:
+inflight@^1.0.4, inflight@^1.0.6:
   version "1.0.6"
   resolved "https://registry.yarnpkg.com/inflight/-/inflight-1.0.6.tgz#49bd6331d7d02d0c09bc910a1075ba8165b56df9"
   dependencies:
@@ -5248,6 +5248,10 @@ standard@^8.0.0:
   version "1.3.1"
   resolved "https://registry.yarnpkg.com/statuses/-/statuses-1.3.1.tgz#faf51b9eb74aaef3b3acf4ad5f61abf24cb7b93e"
 
+storybook@^0.0.0:
+  version "0.0.0"
+  resolved "https://registry.yarnpkg.com/storybook/-/storybook-0.0.0.tgz#b3b9508fb99fd83615674917583cfe9e1532931d"
+
 stream-browserify@^2.0.0, stream-browserify@^2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/stream-browserify/-/stream-browserify-2.0.1.tgz#66266ee5f9bdb9940a4e4514cafb43bb71e5c9db"