diff --git a/build/reactable.js b/build/reactable.js index 84b53ba7..6702439b 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,31 @@ 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 }, + 'all' + ); + return _react['default'].createElement( + 'option', + { key: i, value: opt }, + opt + ); + }); + + return _react['default'].createElement( + 'select', + { + defaultValue: props.selected, + onChange: function (e) { + return props.onItemsPerPageChange(parseInt(e.target.value, 10)); + } }, + options + ); + } }); (function (global, factory) { @@ -1019,6 +1077,7 @@ window.ReactDOM["default"] = window.ReactDOM; column: null, direction: this.props.defaultSortDescending ? -1 : 1 }, + itemsPerPage: this.props.itemsPerPage || 0, filter: '' }; @@ -1454,7 +1513,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 +1521,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 +1575,20 @@ 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) { + _this.setState({ itemsPerPage: itemsPerPage }); + if (_this.props.onItemsPerPageChange) { + _this.props.onItemsPerPageChange(itemsPerPage); + } + }, previousPageLabel: this.props.previousPageLabel, nextPageLabel: this.props.nextPageLabel, key: 'paginator' }) : null, 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..c21a855c 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,28 @@ 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 }, + 'all' + ); + return _react2['default'].createElement( + 'option', + { key: i, value: opt }, + opt + ); + }); + + return _react2['default'].createElement( + 'select', + { + 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 e2235b66..fd20f9d4 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,20 @@ 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) { + _this.setState({ itemsPerPage: itemsPerPage }); + if (_this.props.onItemsPerPageChange) { + _this.props.onItemsPerPageChange(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..1d4e0d9f 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,17 @@ export class Paginator extends React.Component { } }; +function RowSelector(props) { + let options = props.options.map((opt, i) => { + if (opt === 'all') return ; + return ; + }); + + return ( + + ); +} diff --git a/src/reactable/table.jsx b/src/reactable/table.jsx index 82601180..9a8f2fb8 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,20 @@ 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 }); + if (this.props.onItemsPerPageChange) { + this.props.onItemsPerPageChange(itemsPerPage); + } + }} previousPageLabel={this.props.previousPageLabel} nextPageLabel={this.props.nextPageLabel} key="paginator"/> diff --git a/test.html b/test.html index e45d78ef..cb6c5206 100644 --- a/test.html +++ b/test.html @@ -1,8 +1,9 @@ - - + + +