add a example for fully customize size per page dropdown

Author: AllenFang

examples/js/custom/demo.js

@@ -26,6 +26,7 @@ import CustomButtonGroup from './toolbar/custom-button-group';
 import CustomToolBar1 from './toolbar/custom-toolbar-1';
 import LeftSearchPanel from './toolbar/left-search-panel';
 import CustomSizePerPage from './pagination/custom-size-per-page';
+import FullyCustomSizePerPage from './pagination/fully-custom-size-per-page';
 import CustomPaginationPanel from './pagination/custom-pagination-panel';
 
 import { Col, Panel } from 'react-bootstrap';
@@ -130,6 +131,10 @@ class Demo extends React.Component {
           { renderLinks('custom/pagination/custom-size-per-page.js') }
             <CustomSizePerPage/>
         </Panel>
+        <Panel header={ 'Fully Custom for Size Per Page DropDown Demo' }>
+          { renderLinks('custom/pagination/fully-custom-size-per-page.js') }
+            <FullyCustomSizePerPage/>
+        </Panel>
         <Panel header={ 'Custom Pagination Panel Demo' }>
           { renderLinks('custom/pagination/custom-pagination-panel.js') }
             <CustomPaginationPanel/>

examples/js/custom/pagination/fully-custom-size-per-page.js

@@ -0,0 +1,60 @@
+/* eslint max-len: 0 */
+/* eslint no-console: 0 */
+import React from 'react';
+import { BootstrapTable, TableHeaderColumn } from 'react-bootstrap-table';
+
+
+const products = [];
+
+function addProducts(quantity) {
+  const startId = products.length;
+  for (let i = 0; i < quantity; i++) {
+    const id = startId + i;
+    products.push({
+      id: id,
+      name: 'Item name ' + id,
+      price: 2100 + i
+    });
+  }
+}
+
+addProducts(70);
+
+export default class FullyCustomSizePerPageDropDown extends React.Component {
+  constructor(props) {
+    super(props);
+  }
+
+  renderSizePerPageDropDown = props => {
+    return (
+      <div className='btn-group'>
+        {
+          [ 10, 25, 30 ].map(n => {
+            const isActive = (n === props.currSizePerPage) ? 'active' : null;
+            return (
+              <button type='button' className={ `btn btn-info ${isActive}` } onClick={ () => props.changeSizePerPage(n) }>{ n }</button>
+            );
+          })
+        }
+      </div>
+    );
+  }
+
+  render() {
+    const options = {
+      sizePerPageDropDown: this.renderSizePerPageDropDown
+    };
+    return (
+      <div>
+        <BootstrapTable
+          data={ products }
+          options={ options }
+          pagination>
+          <TableHeaderColumn dataField='id' isKey={ true }>Product ID</TableHeaderColumn>
+          <TableHeaderColumn dataField='name'>Product Name</TableHeaderColumn>
+          <TableHeaderColumn dataField='price'>Product Price</TableHeaderColumn>
+        </BootstrapTable>
+      </div>
+    );
+  }
+}