Added code for custom buttons

Author: mbaroukhcw

examples/js/app.js

@@ -31,6 +31,7 @@ const routes = (
         <Route path='others' component={ require('./others/demo') } />
         <Route path='complex' component={ require('./complex/demo') } />
         <Route path='remote' component={ require('./remote/demo') } />
+        <Route path='custom' component={ require('./custom/demo') } />
       </Route>
       <Route path='*' component={ PageNotFound }/>
     </Route>

examples/js/components/App.js

@@ -75,6 +75,9 @@ class App extends React.Component {
     }, {
       text: 'A complex demo',
       href: 'complex'
+    }, {
+      text: 'Custom buttons',
+      href: 'custom'
     } ];
 
     const exampleMenuItems = examples.map((item, idx) => {

examples/js/custom/custom-buttons.js

@@ -0,0 +1,39 @@
+/* eslint no-alert: 0 */
+import React from 'react';
+import { BootstrapTable, TableHeaderColumn } from 'react-bootstrap-table';
+
+const products = Array.apply(null, Array(10)).map( (v, id) => {
+  return {
+    id: id,
+    name: 'Item name ' + id,
+    price: 2100 + id
+  };
+});
+
+class CustomButtons extends React.Component {
+  render() {
+    const customButtons = [
+      {
+        text: 'Display an alert',
+        handler: () => alert('Custom button Clicked')
+      },
+      {
+        text: 'Do not click here !',
+        handler: () => alert('You, bad boy !'),
+        bsStyle: 'warning',
+        icon: 'alert'
+      }
+    ];
+    return (
+      <BootstrapTable
+          data={ products }
+          customButtons={ customButtons }>
+        <TableHeaderColumn dataField='id' isKey={ true }>Product ID</TableHeaderColumn>
+        <TableHeaderColumn dataField='name'>Product Name</TableHeaderColumn>
+        <TableHeaderColumn dataField='price'>Product Price</TableHeaderColumn>
+      </BootstrapTable>
+    );
+  }
+}
+
+export default CustomButtons;

examples/js/custom/demo.js

@@ -0,0 +1,19 @@
+import React from 'react';
+import renderLinks from '../utils';
+import { Col, Panel } from 'react-bootstrap';
+import CustomButtons from './custom-buttons';
+
+class Demo extends React.Component {
+  render() {
+    return (
+        <Col md={ 8 } mdOffset={ 1 }>
+            <Panel header={ 'A react-bootstrap-table with custom buttons' }>
+               { renderLinks('custom/custom-buttons.js') }
+               <CustomButtons />
+            </Panel>
+        </Col>
+    );
+  }
+}
+
+export default Demo;

src/BootstrapTable.js

@@ -746,7 +746,8 @@ class BootstrapTable extends Component {
       || insertRow
       || deleteRow
       || search
-      || this.props.exportCSV) {
+      || this.props.exportCSV
+      || this.props.customButtons.length > 0) {
       let columns;
       if (Array.isArray(children)) {
         columns = children.map(function(column) {
@@ -794,7 +795,9 @@ class BootstrapTable extends Component {
             onDropRow={ this.handleDropRow }
             onSearch={ this.handleSearch }
             onExportCSV={ this.handleExportCSV }
-            onShowOnlySelected={ this.handleShowOnlySelected }/>
+            onShowOnlySelected={ this.handleShowOnlySelected }
+            customButtons={ this.props.customButtons } />
+
         </div>
       );
     } else {
@@ -977,7 +980,13 @@ BootstrapTable.propTypes = {
   }),
   exportCSV: PropTypes.bool,
   csvFileName: PropTypes.string,
-  ignoreSinglePage: PropTypes.bool
+  ignoreSinglePage: PropTypes.bool,
+  customButtons: React.PropTypes.arrayOf(React.PropTypes.shape({
+    text: React.PropTypes.string.isRequired,
+    icon: React.PropTypes.string,
+    bsStyle: React.PropTypes.string,
+    handler: React.PropTypes.func.isRequired
+  }))
 };
 BootstrapTable.defaultProps = {
   height: '100%',
@@ -1062,7 +1071,8 @@ BootstrapTable.defaultProps = {
   },
   exportCSV: false,
   csvFileName: 'spreadsheet.csv',
-  ignoreSinglePage: false
+  ignoreSinglePage: false,
+  customButtons: []
 };
 
 export default BootstrapTable;

src/toolbar/ToolBar.js

@@ -1,3 +1,4 @@
+/* eslint no-console: 0 */
 import React, { Component, PropTypes } from 'react';
 import classSet from 'classnames';
 import Const from '../Const';
@@ -187,6 +188,7 @@ class ToolBar extends Component {
     let deleteBtn = null;
     let exportCSV = null;
     let showSelectedOnlyBtn = null;
+    let customButtons = null;
 
     if (this.props.enableInsert) {
       insertBtn = (
@@ -233,6 +235,17 @@ class ToolBar extends Component {
         </button>
       );
     }
+    if (this.props.customButtons.length > 0) {
+      customButtons = this.props.customButtons.map((b, i) => (
+          <button type='button'
+            key={ i }
+            className={ 'btn btn-' + (b.bsStyle ? b.bsStyle : 'primary') }
+            onClick={ b.handler }>
+            { b.icon ? (<i className={ 'glyphicon glyphicon-' + b.icon }></i>) : null }
+            { b.text }
+          </button>
+      ));
+    }
 
     const searchTextInput = this.renderSearchPanel();
     const modal = this.props.enableInsert ? this.renderInsertRowModal() : null;
@@ -244,6 +257,7 @@ class ToolBar extends Component {
             { exportCSV }
             { insertBtn }
             { deleteBtn }
+            { customButtons }
             { showSelectedOnlyBtn }
           </div>
         </div>
@@ -379,7 +393,13 @@ ToolBar.propTypes = {
   saveText: PropTypes.string,
   closeText: PropTypes.string,
   clearSearch: PropTypes.bool,
-  ignoreEditable: PropTypes.bool
+  ignoreEditable: PropTypes.bool,
+  customButtons: React.PropTypes.arrayOf(React.PropTypes.shape({
+    text: React.PropTypes.string.isRequired,
+    icon: React.PropTypes.string,
+    bsStyle: React.PropTypes.string,
+    handler: React.PropTypes.func.isRequired
+  }))
 };
 
 ToolBar.defaultProps = {