File tree Expand file tree Collapse file tree 1 file changed +21
-6
lines changed Expand file tree Collapse file tree 1 file changed +21
-6
lines changed Original file line number Diff line number Diff line change @@ -18,15 +18,30 @@ function addProducts(quantity) {
18
18
}
19
19
20
20
addProducts ( 5 ) ;
21
-
21
+ var order = 'desc' ;
22
22
export default class SortTable extends React . Component {
23
+
24
+ handleBtnClick = e => {
25
+ if ( order === 'desc' ) {
26
+ this . refs . table . handleSort ( 'asc' , 'name' ) ;
27
+ order = 'asc' ;
28
+ } else {
29
+ this . refs . table . handleSort ( 'desc' , 'name' ) ;
30
+ order = 'desc' ;
31
+ }
32
+ }
33
+
23
34
render ( ) {
24
35
return (
25
- < BootstrapTable data = { products } >
26
- < TableHeaderColumn dataField = "id" isKey = { true } dataSort = { true } > Product ID</ TableHeaderColumn >
27
- < TableHeaderColumn dataField = "name" dataSort = { true } > Product Name</ TableHeaderColumn >
28
- < TableHeaderColumn dataField = "price" > Product Price</ TableHeaderColumn >
29
- </ BootstrapTable >
36
+ < div >
37
+ < p style = { { color :'red' } } > You cam click header to sort or click following button to perform a sorting by expose API</ p >
38
+ < button onClick = { this . handleBtnClick } > Sort Product Name</ button >
39
+ < BootstrapTable ref = "table" data = { products } >
40
+ < TableHeaderColumn dataField = "id" isKey = { true } dataSort = { true } > Product ID</ TableHeaderColumn >
41
+ < TableHeaderColumn dataField = "name" dataSort = { true } > Product Name</ TableHeaderColumn >
42
+ < TableHeaderColumn dataField = "price" > Product Price</ TableHeaderColumn >
43
+ </ BootstrapTable >
44
+ </ div >
30
45
) ;
31
46
}
32
47
} ;
You can’t perform that action at this time.
0 commit comments