D3 table th and td not align issue(Solved by typo issue found, Thanks all)

D3 table th and td not align issue(Solved by typo issue found, Thanks all)
0

#1

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


#2

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; });

}

render() {
return (

);
}
}

And my current CSS is

body { font-family: ‘Helvetica Neue’, Helvetica; font-weight: 300; padding: 20px; }
th { text-align: left; }
th, td { padding: 0 1em 0.5ex 0; }
th.center, td.center { text-align: center; }
th.num, td.num { text-align: right; }