expose onItemsPerPageChange API

Author: zry656565

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,

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

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,

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 <option key={i} value={Number.MAX_SAFE_INTEGER} selected={isSelected}>all</option>;
-        let isSelected = opt === props.selected;
-        return <option key={i} value={opt} selected={isSelected}>{opt}</option>;
+        if (opt === 'all') return <option key={i} value={Number.MAX_SAFE_INTEGER}>all</option>;
+        return <option key={i} value={opt}>{opt}</option>;
     });
 
     return (
-        <select onChange={e => props.onItemsPerPageChange(parseInt(e.target.value, 10))} >
+        <select
+            defaultValue={props.selected}
+            onChange={e => props.onItemsPerPageChange(parseInt(e.target.value, 10))} >
             {options}
         </select>
     );

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"/>