add ability to set the current page via a prop passed to the table

Author: samm0ss

build/reactable.js

@@ -1016,7 +1016,7 @@ window.ReactDOM["default"] = window.ReactDOM;
             _get(Object.getPrototypeOf(Table.prototype), 'constructor', this).call(this, props);
 
             this.state = {
-                currentPage: 0,
+                currentPage: this.props.currentPage ? this.props.currentPage : 0,
                 currentSort: {
                     column: null,
                     direction: this.props.defaultSortDescending ? -1 : 1
@@ -1249,6 +1249,13 @@ window.ReactDOM["default"] = window.ReactDOM;
                     this.setState({ currentSort: this.getCurrentSort(sortBy) });
                 }
             }
+        }, {
+            key: 'updateCurrentPage',
+            value: function updateCurrentPage(nextPage) {
+                if (nextPage !== this.state.currentPage) {
+                    this.setState({ currentPage: nextPage });
+                }
+            }
         }, {
             key: 'componentWillMount',
             value: function componentWillMount() {
@@ -1260,6 +1267,7 @@ window.ReactDOM["default"] = window.ReactDOM;
             key: 'componentWillReceiveProps',
             value: function componentWillReceiveProps(nextProps) {
                 this.initialize(nextProps);
+                this.updateCurrentPage(nextProps.currentPage);
                 this.updateCurrentSort(nextProps.sortBy);
                 this.sortByCurrentSort();
                 this.filterBy(nextProps.filterBy);

build/tests/reactable_test.js

@@ -45,7 +45,7 @@ var Table = (function (_React$Component) {
         _get(Object.getPrototypeOf(Table.prototype), 'constructor', this).call(this, props);
 
         this.state = {
-            currentPage: 0,
+            currentPage: this.props.currentPage ? this.props.currentPage : 0,
             currentSort: {
                 column: null,
                 direction: this.props.defaultSortDescending ? -1 : 1
@@ -278,6 +278,13 @@ var Table = (function (_React$Component) {
                 this.setState({ currentSort: this.getCurrentSort(sortBy) });
             }
         }
+    }, {
+        key: 'updateCurrentPage',
+        value: function updateCurrentPage(nextPage) {
+            if (nextPage !== this.state.currentPage) {
+                this.setState({ currentPage: nextPage });
+            }
+        }
     }, {
         key: 'componentWillMount',
         value: function componentWillMount() {
@@ -289,6 +296,7 @@ var Table = (function (_React$Component) {
         key: 'componentWillReceiveProps',
         value: function componentWillReceiveProps(nextProps) {
             this.initialize(nextProps);
+            this.updateCurrentPage(nextProps.currentPage);
             this.updateCurrentSort(nextProps.sortBy);
             this.sortByCurrentSort();
             this.filterBy(nextProps.filterBy);

lib/reactable/table.js

@@ -13,7 +13,7 @@ export class Table extends React.Component {
         super(props);
 
         this.state = {
-            currentPage: 0,
+            currentPage: this.props.currentPage ? this.props.currentPage : 0,
             currentSort: {
                 column: null,
                 direction: this.props.defaultSortDescending ? -1 : 1
@@ -239,6 +239,12 @@ export class Table extends React.Component {
         }
     }
 
+    updateCurrentPage(nextPage) {
+        if (nextPage !== this.state.currentPage) {
+            this.setState({ currentPage: nextPage});
+        }
+    }
+
     componentWillMount() {
         this.initialize(this.props);
         this.sortByCurrentSort();
@@ -247,6 +253,7 @@ export class Table extends React.Component {
 
     componentWillReceiveProps(nextProps) {
         this.initialize(nextProps);
+        this.updateCurrentPage(nextProps.currentPage)
         this.updateCurrentSort(nextProps.sortBy);
         this.sortByCurrentSort();
         this.filterBy(nextProps.filterBy);

src/reactable/table.jsx

@@ -1055,6 +1055,51 @@ describe('Reactable', function() {
                 expect(currentPage).to.equal(2);
             });
         });
+
+        describe('update currentPage via a prop passed to table', function() {
+            before(function() {
+
+              var ParentComponent = React.createClass({
+                getInitialState: function() {
+                  return {currentPage: 4}
+                },
+
+                render () {
+                  return ( 
+                    <Reactable.Table className="table" id="table" data={[
+                        {'Name': 'Griffin Smith', 'Age': '18'},
+                        {'Age': '23', 'Name': 'Lee Salminen'},
+                        {'Age': '28', 'Position': 'Developer'},
+                        {'Name': 'Griffin Smith', 'Age': '18'},
+                        {'Age': '23', 'Name': 'Test Person'},
+                        {'Name': 'Ian Zhang', 'Age': '28', 'Position': 'Developer'},
+                        {'Name': 'Griffin Smith', 'Age': '18', 'Position': 'Software Developer'},
+                        {'Age': '23', 'Name': 'Lee Salminen'},
+                        {'Age': '28', 'Position': 'Developer'},
+                    ]} itemsPerPage={2} currentPage={this.state.currentPage} />
+                  );
+                }
+              })
+              this.component = ReactDOM.render(React.createElement(ParentComponent), ReactableTestUtils.testNode());
+            });
+
+            after(ReactableTestUtils.resetTestEnvironment);
+
+            it('set default currentPage', function() {
+                let activePage = $('#table tbody.reactable-pagination ' +
+                    'a.reactable-page-button.reactable-current-page');
+                expect(activePage.length).to.equal(1);
+                expect(activePage).to.have.text('5');
+            });
+
+            it('update currentPage using props', function() {
+                this.component.setState({currentPage: 2})
+                let activePage = $('#table tbody.reactable-pagination ' +
+                    'a.reactable-page-button.reactable-current-page')
+                expect(activePage.length).to.equal(1);
+                expect(activePage).to.have.text('3');
+            });
+        });
     });
 
     describe('sorting', function(){