forked from jeremieroy/react_smart_table
-
Notifications
You must be signed in to change notification settings - Fork 0
/
react_smart_table.js
87 lines (74 loc) · 3.17 KB
/
react_smart_table.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
(function (root, factory) {
if (typeof define === 'function' && define.amd) { // AMD
define(['react'], factory);
} else if (typeof exports === 'object') { // Node, CommonJS-like
module.exports = factory(require('react'));
} else { // Browser globals (root is window)
root.ReactSmartTable = factory(root.React);
}
}(this, function (React) {
"use strict";
var exports = {};
var Table = exports.Table = React.createClass({displayName: "Table",
getDefaultProps: function() {
return {
filterByColumn: false,
tableClass: "table",
sortNeutralClass: "sort-neutral",
sortAscendingClass: "sort-ascending",
sortDescendingClass: "sort-descending"
};
},
getInitialState: function() {
return {
data : this.props.data, // TODO: fix antipattern
sortOrderAscending: true,
sortColumn: "id"
};
},
getColumns: function() {
return Object.keys(this.state.data[0]);
},
sortColumn: function(column) {
return function(event) {
console.log("column:"+column)
var newSortOrder = (this.state.sortColumn != column)?true:(!this.state.sortOrderAscending);
this.setState({sortColumn: column, sortOrderAscending:newSortOrder});
}.bind(this);
},
sortClass: function(column) {
var ascOrDesc = (this.state.sortOrderAscending) ? "glyphicon glyphicon-triangle-bottom" : "glyphicon glyphicon-triangle-top";
return (this.state.sortColumn == column) ? ascOrDesc : "";
},
render: function() {
var columns = this.getColumns();
var tr_headers = columns.map(function (col, i) {
return React.DOM.th({key:i, onClick:this.sortColumn(col), className:this.sortClass(col)}, col);
}, this);
var tr_filters = columns.map(function (col, i) {
return React.DOM.th({key:i}, col);
});
var thead = React.DOM.thead( {key: "thead"}, [
React.DOM.tr( {key: "tr_headers"}, tr_headers ),
(this.props.filterByColumn)?React.DOM.tr( {key: "tr_filters"}, tr_filters ):null
]);
// sort
var dataCopy = this.state.data;
var key = this.state.sortColumn;
var order = this.state.sortOrderAscending?1:-1;
dataCopy.sort( function(x,y){
return (x[key] === y[key])? 0: (x[key] > y[key] ? order : -order);
});
var tr_body = dataCopy.map(function (row, i) {
return React.DOM.tr( {key:i},
columns.map(function (col, j) {
return React.DOM.td({key:j}, row[col]);
})
)
});
var tbody = React.DOM.tbody( {key: "tbody"}, tr_body );
return React.DOM.table( {className:this.props.tableClass}, [thead, tbody] );
}
});
return exports;
}));