Skip to content
This repository was archived by the owner on Jan 15, 2022. It is now read-only.

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

Merged
glittershark merged 1 commit into from
May 20, 2016
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 9 additions & 1 deletion build/reactable.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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() {
Expand All @@ -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);
Expand Down
2 changes: 1 addition & 1 deletion build/tests/reactable_test.js
View file
Open in desktop

Large diffs are not rendered by default.

10 changes: 9 additions & 1 deletion lib/reactable/table.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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() {
Expand All @@ -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);
Expand Down
9 changes: 8 additions & 1 deletion src/reactable/table.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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();
Expand All @@ -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);
Expand Down
45 changes: 45 additions & 0 deletions tests/reactable_test.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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(){
Expand Down