Skip to content

Commit 5823e2a

Browse files
committed
example for #1451
1 parent 5999c48 commit 5823e2a

File tree

2 files changed

+50
-0
lines changed

2 files changed

+50
-0
lines changed

examples/js/style/demo.js

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ require('./style.css');
33
import React from 'react';
44
import TrClassStringTable from './tr-class-string-table';
55
import TrClassFunctionTable from './tr-class-function-table';
6+
import TrStyleTable from './tr-style-table';
67
import TdClassStringTable from './td-class-string-table';
78
import TdClassFunctionTable from './td-class-function-table';
89
import EditTdClassTable from './edit-td-class-table';
@@ -41,6 +42,15 @@ class Demo extends React.Component {
4142
</div>
4243
</div>
4344
</div>
45+
<div className='col-md-offset-1 col-md-8'>
46+
<div className='panel panel-default'>
47+
<div className='panel-heading'>Set String or Function for <code>trStyle</code> on &lt;BootstrapTable&gt;</div>
48+
<div className='panel-body'>
49+
<h5>Source in /examples/js/style/tr-style-table.js</h5>
50+
<TrStyleTable />
51+
</div>
52+
</div>
53+
</div>
4454
<div className='col-md-offset-1 col-md-8'>
4555
<div className='panel panel-default'>
4656
<div className='panel-heading'>Set String as <code>classname</code> & <code>columnClassName</code> on &lt;TableHeaderColumn&gt;(header &amp; column)</div>
Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
/* eslint max-len: 0 */
2+
/* eslint no-unused-vars: 0 */
3+
import React from 'react';
4+
import { BootstrapTable, TableHeaderColumn } from 'react-bootstrap-table';
5+
6+
7+
const products = [];
8+
9+
function addProducts(quantity) {
10+
const startId = products.length;
11+
for (let i = 0; i < quantity; i++) {
12+
const id = startId + i;
13+
products.push({
14+
id: id,
15+
name: 'Item name ' + id,
16+
price: 2100 + i
17+
});
18+
}
19+
}
20+
21+
22+
addProducts(5);
23+
24+
export default class TrClassStringTable extends React.Component {
25+
26+
trStyle = (row, rowIndex) => {
27+
return { backgroundColor: '#FFFAFA' };
28+
}
29+
30+
render() {
31+
const selectRow = { mode: 'checkbox', bgColor: 'red' };
32+
return (
33+
<BootstrapTable data={ products } trStyle={ this.trStyle } selectRow={ selectRow }>
34+
<TableHeaderColumn dataField='id' isKey={ true }>Product ID</TableHeaderColumn>
35+
<TableHeaderColumn dataField='name'>Product Name</TableHeaderColumn>
36+
<TableHeaderColumn dataField='price'>Product Price</TableHeaderColumn>
37+
</BootstrapTable>
38+
);
39+
}
40+
}

0 commit comments

Comments
 (0)