Created
November 7, 2016 19:43
-
-
Save martinpinto/5acc1cf47b761eb2be57a30479f92996 to your computer and use it in GitHub Desktop.
Sample application using version 3.0.0 of react-bootstrap-table
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import React, { Component } from 'react'; | |
import './App.css'; | |
import ReactTable from './react-sample-table'; | |
class App extends Component { | |
render() { | |
return ( | |
<div className="main main-raised"> | |
<div className="container"> | |
<ReactTable /> | |
</div> | |
</div> | |
); | |
} | |
} | |
export default App; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import ReactDOM from 'react-dom'; | |
import { BootstrapTable as bt, TableHeaderColumn } from 'react-bootstrap-table'; | |
// The class below is a wrapper around react-bootstrap-table library and overrides | |
// the Add button click event in the toolbar which launches a form. | |
// We want to override that behaviour by calling props.options.onAdd event handler | |
class BootstrapTable extends bt { | |
componentDidMount() { | |
super.componentDidMount(); | |
var onAdd = this.props.options || {}; | |
//var props = this.props; | |
const dom = ReactDOM.findDOMNode(this); | |
const addButton = dom.getElementsByClassName('react-bs-table-add-btn')[0]; | |
if (addButton) { | |
addButton.onclick = function onclick(event) { | |
event.stopPropagation(); | |
onAdd.onAdd(); | |
}; | |
} | |
} | |
render() { | |
return super.render({ ...this.props }); | |
} | |
} | |
export { | |
BootstrapTable, | |
TableHeaderColumn | |
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* eslint max-len: 0 */ | |
/* eslint no-unused-vars: 0 */ | |
/* eslint no-alert: 0 */ | |
import React from 'react'; | |
import { BootstrapTable, TableHeaderColumn, InsertButton } from './react-bootstrap-table.patch'; | |
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(5); | |
export default class ReactTable extends React.Component { | |
createCustomInsertButton = () => { | |
return ( | |
<InsertButton | |
btnText='CustomInsertText' | |
btnContextual='btn-warning' | |
className='my-custom-class' | |
btnGlyphicon='glyphicon-edit'/> | |
); | |
} | |
render() { | |
const options = { | |
onAdd: this.createCustomInsertButton | |
}; | |
return ( | |
<BootstrapTable data={ products } options={ options } insertRow> | |
<TableHeaderColumn dataField='id' isKey={ true }>Product ID</TableHeaderColumn> | |
<TableHeaderColumn dataField='name'>Product Name</TableHeaderColumn> | |
<TableHeaderColumn dataField='price'>Product Price</TableHeaderColumn> | |
</BootstrapTable> | |
); | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Hi @invalidred thanks so much for helping out! I did as you told me and added the InsertButton to the export list in
react-bootstrap-table.patch.js
. I still get the same error: