Created
April 24, 2017 15:34
-
-
Save AllenFang/dc5f1bcc22f767de015fff50a37ad06f to your computer and use it in GitHub Desktop.
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 */ | |
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; | |
if (i < 3) { | |
products.push({ | |
id: id, | |
name: 'Item name ' + id, | |
price: 2100 + i, | |
expand: [ { | |
fieldA: 'test1', | |
fieldB: (i + 1) * 99, | |
fieldC: (i + 1) * Math.random() * 100, | |
fieldD: '123eedd' + i | |
}, { | |
fieldA: 'test2', | |
fieldB: i * 99, | |
fieldC: i * Math.random() * 100, | |
fieldD: '123eedd' + i | |
} ] | |
}); | |
} else { | |
products.push({ | |
id: id, | |
name: 'Item name ' + id, | |
price: 2100 + i | |
}); | |
} | |
} | |
} | |
addProducts(5); | |
class BSTable extends React.Component { | |
render() { | |
if (this.props.data) { | |
return ( | |
<BootstrapTable data={ this.props.data }> | |
<TableHeaderColumn dataField='fieldA' isKey={ true }>Field A</TableHeaderColumn> | |
<TableHeaderColumn dataField='fieldB'>Field B</TableHeaderColumn> | |
<TableHeaderColumn dataField='fieldC'>Field C</TableHeaderColumn> | |
<TableHeaderColumn dataField='fieldD'>Field D</TableHeaderColumn> | |
</BootstrapTable>); | |
} else { | |
return (<p>?</p>); | |
} | |
} | |
} | |
export default class ExpandRow extends React.Component { | |
constructor(props) { | |
super(props); | |
} | |
isExpandableRow(row) { | |
if (row.id < 3) return true; | |
else return false; | |
} | |
expandComponent(row) { | |
return ( | |
<BSTable data={ row.expand } /> | |
); | |
} | |
render() { | |
const options = { | |
expandRowBgColor: 'rgb(242, 255, 163)' | |
}; | |
return ( | |
<BootstrapTable data={ products } | |
options={ options } | |
expandableRow={ this.isExpandableRow } | |
expandComponent={ this.expandComponent } | |
expandColumnOptions={ { expandColumnVisible: true } }> | |
<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