Hi All:
I try to take the challenge of react leader board and stuck in the th and td not align issue.
May I know if anyone could help?
http://codepen.io/skyevil12/pen/KNZRoV?editors=0111
BR.
Winston
Upload my code snippet below for ref. :
class Table extends React.Component {
componentWillMount() {
store.dispatch(getRankData(‘https://fcctop100.herokuapp.com/api/fccusers/top/recent’));
}
componentDidMount() {
// this._renderTable();
}
componentDidUpdate() {
this._renderTable();
}
_renderTable() {
var state = store.getState();
if(!state || !(state.rankData)) return;
var rankData = state.rankData;
if(0 == rankData.length) return;
d3.selectAll(‘table’).remove();
var i = 0;
var columns = [
{ head: '#', cl: 'num', html: function(rank) {return i++;} },
{ head: 'Camper Name', cl: 'center', html: function(rank) {return rank.username;} },
{ head: 'Points in past 30 days', cl: 'num', html: function(rank) {return rank.recent;} },
{ head: 'All time points' , cl: 'num', html: function(rank) {return rank.alltime;} }
];
var table = d3.select(this.refs.table)
.append('table');
table.append('thread').append('tr')
.selectAll('th')
.data(columns).enter()
.append('th')
.attr('class', function(column){ return column.cl; })
.text(function(column){ return column.head; });
var rows = table.append('tbody')
.selectAll('tr')
.data(rankData).enter()
.append('tr');
rows.selectAll('td')
.data(function(row,i) {
return columns.map(function(c){
var cell = {};
d3.keys(c).forEach(function(k){
cell[k] = typeof c[k] == 'function' ? c[k](row,i) : c[k];
});
return cell;
});
}).enter()
.append('td')
.html(function(column) { return column.html; })
.attr('class', function(column) { return column.cl; });
}