add example page call expose-api-table

examples/js/others/demo.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import MouseEventTable from './mouse-event-table';
 import TableInTabs from './table-in-tabs';
+import ExposeApiTable from './expose-api-table';
 import { Col, Panel } from 'react-bootstrap';
 
 class Demo extends React.Component {
@@ -17,6 +18,11 @@ class Demo extends React.Component {
           <h5>react-bootstrap-table in tabs</h5>
           <TableInTabs/>
         </Panel>
+        <Panel header={ 'Expose Api Table Example)' }>
+          <h5>Source in /examples/js/advance/expose-api-table.js</h5>
+          <h5>expose api to get page by row key</h5>
+          <ExposeApiTable/>
+        </Panel>
       </Col>
     );
   }

examples/js/others/expose-api-table.js

@@ -0,0 +1,69 @@
+/* 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(100);
+
+export default class ExposeApiTable extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      text: ''
+    };
+  }
+
+  handleClick = (rowKey) => {
+    console.log(this.refs.table.getPageByRowKey(rowKey));
+  }
+
+  render() {
+    return (
+      <div>
+        <div className='form-inline'>
+          { `typing your row key -> ` }
+          <input
+            className='form-control'
+            ref='rowKeyInput'
+            onChange={ (e) => {
+              this.setState( {
+                text: e.target.value
+              } );
+            } }
+            value={ this.state.text } />
+          { ' ' }
+          <button
+            className='btn btn-success'
+            onClick={ () => {
+              this.handleClick(parseInt(this.refs.rowKeyInput.value, 10));
+            } }>
+              get the page
+          </button>
+        </div>
+        <BootstrapTable
+          ref='table'
+          data={ products }
+          pagination={ true }
+          search={ true }>
+          <TableHeaderColumn dataField='id' isKey={ true }>Product ID</TableHeaderColumn>
+          <TableHeaderColumn dataField='name'>Product Name</TableHeaderColumn>
+          <TableHeaderColumn dataField='price'>Product Price</TableHeaderColumn>
+        </BootstrapTable>
+      </div>
+   );
+  }
+}