From b7bfdc575c96098f89d389cc3d1eb570d3507b0a Mon Sep 17 00:00:00 2001 From: Jerry Zou Date: Sun, 4 Sep 2016 10:43:15 +0800 Subject: [PATCH 1/4] Support changing itemsPerPage --- build/reactable.js | 76 +++++++++++++++++++++++++++++++++---- src/reactable/paginator.jsx | 43 +++++++++++++++++++-- src/reactable/table.jsx | 7 +++- test.html | 32 ++++++++++++++-- 4 files changed, 143 insertions(+), 15 deletions(-) diff --git a/build/reactable.js b/build/reactable.js index 84b53ba7..521890de 100644 --- a/build/reactable.js +++ b/build/reactable.js @@ -21,10 +21,23 @@ window.ReactDOM["default"] = window.ReactDOM; columns: true, sortable: true, filterable: true, + filtering: true, + onFilter: true, + filterPlaceholder: true, filterClassName: true, + currentFilter: true, + sort: true, sortBy: true, + sortableColumns: true, + onSort: true, defaultSort: true, + defaultSortDescending: true, itemsPerPage: true, + filterBy: true, + hideFilterInput: true, + noDataText: true, + currentPage: true, + pageButtonLimit: true, childNode: true, data: true, children: true @@ -848,10 +861,17 @@ window.ReactDOM["default"] = window.ReactDOM; var Paginator = (function (_React$Component) { _inherits(Paginator, _React$Component); - function Paginator() { + function Paginator(props) { _classCallCheck(this, Paginator); - _get(Object.getPrototypeOf(Paginator.prototype), 'constructor', this).apply(this, arguments); + _get(Object.getPrototypeOf(Paginator.prototype), 'constructor', this).call(this, props); + + if (this.props.rowOptions) { + this.rowOptions = this.props.rowOptions.split(',').map(function (option) { + if (option === 'all') return 'all'; + return parseInt(option, 10); + }); + } } _createClass(Paginator, [{ @@ -964,9 +984,22 @@ window.ReactDOM["default"] = window.ReactDOM; _react['default'].createElement( 'td', { colSpan: this.props.colSpan }, - this.renderPrevious(), - pageButtons, - this.renderNext() + this.rowOptions ? _react['default'].createElement( + 'span', + { className: 'row-selector' }, + _react['default'].createElement(RowSelector, { + options: this.rowOptions, + selected: this.props.itemsPerPage, + onItemsPerPageChange: this.props.onItemsPerPageChange }), + 'rows per page.' + ) : null, + numPages > 1 ? _react['default'].createElement( + 'span', + { className: 'pagination-buttons' }, + this.renderPrevious(), + pageButtons, + this.renderNext() + ) : null ) ) ); @@ -978,6 +1011,30 @@ window.ReactDOM["default"] = window.ReactDOM; exports.Paginator = Paginator; ; + + function RowSelector(props) { + var options = props.options.map(function (opt, i) { + if (opt === 'all') return _react['default'].createElement( + 'option', + { key: i, value: Number.MAX_SAFE_INTEGER, selected: isSelected }, + 'all' + ); + var isSelected = opt === props.selected; + return _react['default'].createElement( + 'option', + { key: i, value: opt, selected: isSelected }, + opt + ); + }); + + return _react['default'].createElement( + 'select', + { onChange: function (e) { + return props.onItemsPerPageChange(parseInt(e.target.value, 10)); + } }, + options + ); + } }); (function (global, factory) { @@ -1019,6 +1076,7 @@ window.ReactDOM["default"] = window.ReactDOM; column: null, direction: this.props.defaultSortDescending ? -1 : 1 }, + itemsPerPage: this.props.itemsPerPage || 0, filter: '' }; @@ -1454,7 +1512,7 @@ window.ReactDOM["default"] = window.ReactDOM; } // Determine pagination properties and which columns to display - var itemsPerPage = 0; + var itemsPerPage = this.state.itemsPerPage; var pagination = false; var numPages = undefined; var currentPage = this.state.currentPage; @@ -1462,7 +1520,6 @@ window.ReactDOM["default"] = window.ReactDOM; var currentChildren = filteredChildren; if (this.props.itemsPerPage > 0) { - itemsPerPage = this.props.itemsPerPage; numPages = Math.ceil(filteredChildren.length / itemsPerPage); if (currentPage > numPages - 1) { @@ -1517,12 +1574,17 @@ window.ReactDOM["default"] = window.ReactDOM; pageButtonLimit: pageButtonLimit, numPages: numPages, currentPage: currentPage, + rowOptions: this.props.rowOptions, + itemsPerPage: itemsPerPage, onPageChange: function (page) { _this.setState({ currentPage: page }); if (_this.props.onPageChange) { _this.props.onPageChange(page); } }, + onItemsPerPageChange: function (itemsPerPage) { + return _this.setState({ itemsPerPage: itemsPerPage }); + }, previousPageLabel: this.props.previousPageLabel, nextPageLabel: this.props.nextPageLabel, key: 'paginator' }) : null, diff --git a/src/reactable/paginator.jsx b/src/reactable/paginator.jsx index 62f1e6dd..45a685f9 100644 --- a/src/reactable/paginator.jsx +++ b/src/reactable/paginator.jsx @@ -5,6 +5,17 @@ function pageHref(num) { } export class Paginator extends React.Component { + constructor(props) { + super(props); + + if (this.props.rowOptions) { + this.rowOptions = this.props.rowOptions.split(',').map(option => { + if (option === 'all') return 'all'; + return parseInt(option, 10); + }); + } + } + handlePrevious(e) { e.preventDefault() this.props.onPageChange(this.props.currentPage - 1) @@ -96,9 +107,22 @@ export class Paginator extends React.Component { - {this.renderPrevious()} - {pageButtons} - {this.renderNext()} + {this.rowOptions ? + + + rows per page. + + : null} + {numPages > 1 ? + + {this.renderPrevious()} + {pageButtons} + {this.renderNext()} + + : null} @@ -106,3 +130,16 @@ export class Paginator extends React.Component { } }; +function RowSelector(props) { + let options = props.options.map((opt, i) => { + if (opt === 'all') return ; + let isSelected = opt === props.selected; + return ; + }); + + return ( + + ); +} diff --git a/src/reactable/table.jsx b/src/reactable/table.jsx index 82601180..a1481c2b 100644 --- a/src/reactable/table.jsx +++ b/src/reactable/table.jsx @@ -18,6 +18,7 @@ export class Table extends React.Component { column: null, direction: this.props.defaultSortDescending ? -1 : 1 }, + itemsPerPage: this.props.itemsPerPage || 0, filter: '' }; @@ -453,7 +454,7 @@ export class Table extends React.Component { } // Determine pagination properties and which columns to display - let itemsPerPage = 0; + let itemsPerPage = this.state.itemsPerPage; let pagination = false; let numPages; let currentPage = this.state.currentPage; @@ -461,7 +462,6 @@ export class Table extends React.Component { let currentChildren = filteredChildren; if (this.props.itemsPerPage > 0) { - itemsPerPage = this.props.itemsPerPage; numPages = Math.ceil(filteredChildren.length / itemsPerPage); if (currentPage > numPages - 1) { @@ -510,12 +510,15 @@ export class Table extends React.Component { pageButtonLimit={pageButtonLimit} numPages={numPages} currentPage={currentPage} + rowOptions={this.props.rowOptions} + itemsPerPage={itemsPerPage} onPageChange={page => { this.setState({ currentPage: page }); if (this.props.onPageChange) { this.props.onPageChange(page) } }} + onItemsPerPageChange={itemsPerPage => this.setState({ itemsPerPage })} previousPageLabel={this.props.previousPageLabel} nextPageLabel={this.props.nextPageLabel} key="paginator"/> diff --git a/test.html b/test.html index e45d78ef..50597024 100644 --- a/test.html +++ b/test.html @@ -1,8 +1,9 @@ - - + + + From a0485aff8119d8642f0ccac82ebf54ff1b61fa55 Mon Sep 17 00:00:00 2001 From: Jerry Zou Date: Sun, 4 Sep 2016 14:26:00 +0800 Subject: [PATCH 2/4] commit missing built files --- lib/reactable/lib/filter_props_from.js | 13 +++++++ lib/reactable/paginator.js | 54 +++++++++++++++++++++++--- lib/reactable/table.js | 9 ++++- 3 files changed, 69 insertions(+), 7 deletions(-) diff --git a/lib/reactable/lib/filter_props_from.js b/lib/reactable/lib/filter_props_from.js index adf1eb06..d3c1f4f3 100644 --- a/lib/reactable/lib/filter_props_from.js +++ b/lib/reactable/lib/filter_props_from.js @@ -9,10 +9,23 @@ var internalProps = { columns: true, sortable: true, filterable: true, + filtering: true, + onFilter: true, + filterPlaceholder: true, filterClassName: true, + currentFilter: true, + sort: true, sortBy: true, + sortableColumns: true, + onSort: true, defaultSort: true, + defaultSortDescending: true, itemsPerPage: true, + filterBy: true, + hideFilterInput: true, + noDataText: true, + currentPage: true, + pageButtonLimit: true, childNode: true, data: true, children: true diff --git a/lib/reactable/paginator.js b/lib/reactable/paginator.js index 0c27cc77..80df6b0f 100644 --- a/lib/reactable/paginator.js +++ b/lib/reactable/paginator.js @@ -25,10 +25,17 @@ function pageHref(num) { var Paginator = (function (_React$Component) { _inherits(Paginator, _React$Component); - function Paginator() { + function Paginator(props) { _classCallCheck(this, Paginator); - _get(Object.getPrototypeOf(Paginator.prototype), 'constructor', this).apply(this, arguments); + _get(Object.getPrototypeOf(Paginator.prototype), 'constructor', this).call(this, props); + + if (this.props.rowOptions) { + this.rowOptions = this.props.rowOptions.split(',').map(function (option) { + if (option === 'all') return 'all'; + return parseInt(option, 10); + }); + } } _createClass(Paginator, [{ @@ -141,9 +148,22 @@ var Paginator = (function (_React$Component) { _react2['default'].createElement( 'td', { colSpan: this.props.colSpan }, - this.renderPrevious(), - pageButtons, - this.renderNext() + this.rowOptions ? _react2['default'].createElement( + 'span', + { className: 'row-selector' }, + _react2['default'].createElement(RowSelector, { + options: this.rowOptions, + selected: this.props.itemsPerPage, + onItemsPerPageChange: this.props.onItemsPerPageChange }), + 'rows per page.' + ) : null, + numPages > 1 ? _react2['default'].createElement( + 'span', + { className: 'pagination-buttons' }, + this.renderPrevious(), + pageButtons, + this.renderNext() + ) : null ) ) ); @@ -155,3 +175,27 @@ var Paginator = (function (_React$Component) { exports.Paginator = Paginator; ; + +function RowSelector(props) { + var options = props.options.map(function (opt, i) { + if (opt === 'all') return _react2['default'].createElement( + 'option', + { key: i, value: Number.MAX_SAFE_INTEGER, selected: isSelected }, + 'all' + ); + var isSelected = opt === props.selected; + return _react2['default'].createElement( + 'option', + { key: i, value: opt, selected: isSelected }, + opt + ); + }); + + return _react2['default'].createElement( + 'select', + { onChange: function (e) { + return props.onItemsPerPageChange(parseInt(e.target.value, 10)); + } }, + options + ); +} diff --git a/lib/reactable/table.js b/lib/reactable/table.js index e2235b66..7d2de668 100644 --- a/lib/reactable/table.js +++ b/lib/reactable/table.js @@ -50,6 +50,7 @@ var Table = (function (_React$Component) { column: null, direction: this.props.defaultSortDescending ? -1 : 1 }, + itemsPerPage: this.props.itemsPerPage || 0, filter: '' }; @@ -485,7 +486,7 @@ var Table = (function (_React$Component) { } // Determine pagination properties and which columns to display - var itemsPerPage = 0; + var itemsPerPage = this.state.itemsPerPage; var pagination = false; var numPages = undefined; var currentPage = this.state.currentPage; @@ -493,7 +494,6 @@ var Table = (function (_React$Component) { var currentChildren = filteredChildren; if (this.props.itemsPerPage > 0) { - itemsPerPage = this.props.itemsPerPage; numPages = Math.ceil(filteredChildren.length / itemsPerPage); if (currentPage > numPages - 1) { @@ -548,12 +548,17 @@ var Table = (function (_React$Component) { pageButtonLimit: pageButtonLimit, numPages: numPages, currentPage: currentPage, + rowOptions: this.props.rowOptions, + itemsPerPage: itemsPerPage, onPageChange: function (page) { _this.setState({ currentPage: page }); if (_this.props.onPageChange) { _this.props.onPageChange(page); } }, + onItemsPerPageChange: function (itemsPerPage) { + return _this.setState({ itemsPerPage: itemsPerPage }); + }, previousPageLabel: this.props.previousPageLabel, nextPageLabel: this.props.nextPageLabel, key: 'paginator' }) : null, From 7c8896fff6875febc9d221b3e0bc4f847e7ef093 Mon Sep 17 00:00:00 2001 From: Jerry Zou Date: Sun, 4 Sep 2016 14:45:43 +0800 Subject: [PATCH 3/4] expose `onItemsPerPageChange` API --- build/reactable.js | 14 +++++++++----- lib/reactable/paginator.js | 9 +++++---- lib/reactable/table.js | 5 ++++- src/reactable/paginator.jsx | 9 +++++---- src/reactable/table.jsx | 7 ++++++- 5 files changed, 29 insertions(+), 15 deletions(-) diff --git a/build/reactable.js b/build/reactable.js index 521890de..6702439b 100644 --- a/build/reactable.js +++ b/build/reactable.js @@ -1016,20 +1016,21 @@ window.ReactDOM["default"] = window.ReactDOM; var options = props.options.map(function (opt, i) { if (opt === 'all') return _react['default'].createElement( 'option', - { key: i, value: Number.MAX_SAFE_INTEGER, selected: isSelected }, + { key: i, value: Number.MAX_SAFE_INTEGER }, 'all' ); - var isSelected = opt === props.selected; return _react['default'].createElement( 'option', - { key: i, value: opt, selected: isSelected }, + { key: i, value: opt }, opt ); }); return _react['default'].createElement( 'select', - { onChange: function (e) { + { + defaultValue: props.selected, + onChange: function (e) { return props.onItemsPerPageChange(parseInt(e.target.value, 10)); } }, options @@ -1583,7 +1584,10 @@ window.ReactDOM["default"] = window.ReactDOM; } }, onItemsPerPageChange: function (itemsPerPage) { - return _this.setState({ itemsPerPage: itemsPerPage }); + _this.setState({ itemsPerPage: itemsPerPage }); + if (_this.props.onItemsPerPageChange) { + _this.props.onItemsPerPageChange(itemsPerPage); + } }, previousPageLabel: this.props.previousPageLabel, nextPageLabel: this.props.nextPageLabel, diff --git a/lib/reactable/paginator.js b/lib/reactable/paginator.js index 80df6b0f..c21a855c 100644 --- a/lib/reactable/paginator.js +++ b/lib/reactable/paginator.js @@ -180,20 +180,21 @@ function RowSelector(props) { var options = props.options.map(function (opt, i) { if (opt === 'all') return _react2['default'].createElement( 'option', - { key: i, value: Number.MAX_SAFE_INTEGER, selected: isSelected }, + { key: i, value: Number.MAX_SAFE_INTEGER }, 'all' ); - var isSelected = opt === props.selected; return _react2['default'].createElement( 'option', - { key: i, value: opt, selected: isSelected }, + { key: i, value: opt }, opt ); }); return _react2['default'].createElement( 'select', - { onChange: function (e) { + { + defaultValue: props.selected, + onChange: function (e) { return props.onItemsPerPageChange(parseInt(e.target.value, 10)); } }, options diff --git a/lib/reactable/table.js b/lib/reactable/table.js index 7d2de668..fd20f9d4 100644 --- a/lib/reactable/table.js +++ b/lib/reactable/table.js @@ -557,7 +557,10 @@ var Table = (function (_React$Component) { } }, onItemsPerPageChange: function (itemsPerPage) { - return _this.setState({ itemsPerPage: itemsPerPage }); + _this.setState({ itemsPerPage: itemsPerPage }); + if (_this.props.onItemsPerPageChange) { + _this.props.onItemsPerPageChange(itemsPerPage); + } }, previousPageLabel: this.props.previousPageLabel, nextPageLabel: this.props.nextPageLabel, diff --git a/src/reactable/paginator.jsx b/src/reactable/paginator.jsx index 45a685f9..1d4e0d9f 100644 --- a/src/reactable/paginator.jsx +++ b/src/reactable/paginator.jsx @@ -132,13 +132,14 @@ export class Paginator extends React.Component { function RowSelector(props) { let options = props.options.map((opt, i) => { - if (opt === 'all') return ; - let isSelected = opt === props.selected; - return ; + if (opt === 'all') return ; + return ; }); return ( - props.onItemsPerPageChange(parseInt(e.target.value, 10))} > {options} ); diff --git a/src/reactable/table.jsx b/src/reactable/table.jsx index a1481c2b..9a8f2fb8 100644 --- a/src/reactable/table.jsx +++ b/src/reactable/table.jsx @@ -518,7 +518,12 @@ export class Table extends React.Component { this.props.onPageChange(page) } }} - onItemsPerPageChange={itemsPerPage => this.setState({ itemsPerPage })} + onItemsPerPageChange={itemsPerPage => { + this.setState({ itemsPerPage }); + if (this.props.onItemsPerPageChange) { + this.props.onItemsPerPageChange(itemsPerPage); + } + }} previousPageLabel={this.props.previousPageLabel} nextPageLabel={this.props.nextPageLabel} key="paginator"/> From 1bf84806f0c42b4045d71879c902f662914cedd3 Mon Sep 17 00:00:00 2001 From: Jerry Zou Date: Tue, 6 Sep 2016 10:08:11 +0800 Subject: [PATCH 4/4] update test.html --- test.html | 35 +++++------------------------------ 1 file changed, 5 insertions(+), 30 deletions(-) diff --git a/test.html b/test.html index 50597024..cb6c5206 100644 --- a/test.html +++ b/test.html @@ -1,9 +1,9 @@ - - - + + +