React sortable table not sorting

Question

New React developer here. I am trying to create a sortable table, and to get started I snagged the following codepen example which is a good starter. From that, I stripped some stuff away and made the following short table:

// Player Ranking Table Component
class PlayerRankings extends React.Component {
  constructor(props) {
    super(props);
  }

  generateRankData() {
    var data = [{rank: 1, week: 3, month: 2, player: "Steph", pos: "PG", team: "Warriors", war: 6, ws: 5.2}, {rank: 2, week: -1, month: -1, player: "Mike", pos: "PG", team: "Warriors", war: -4, ws: 5.2}, {rank: 3, week: 13, month: 5, player: "Paul", pos: "SG", team: "Knicks", war: 3, ws: 4.8}];
    
    return data;
  }
  render() {
    
    let rankData = this.generateRankData()
    let tableRows = rankData.map(row => (
      <tr>
        <td>{row.rank}</td>
        <td>{row.week}</td>
        <td>{row.month}</td>
        <td>{row.player}</td>
        <td>{row.pos}</td>
        <td>{row.team}</td>
        <td>{row.war}</td>
        <td>{row.ws}</td>
      </tr>
    ));
    
    // Here's my table
    let mytable = 
        <div id='rankings'>
          <table>
            <thead>
              <tr>
                <th><button className="sort" data-sort="rank">Rank</button></th>
                <th><button className="sort" data-sort="week">1-Week Change</button></th>
                <th><button className="sort" data-sort="month">1-Month Change</button></th>
                <th><button className="sort" data-sort="player">Player</button></th>
                <th><button className="sort" data-sort="position">Position</button></th>
                <th><button className="sort" data-sort="team">Team</button></th>
                <th><button className="sort" data-sort="war">WAR</button></th>
                <th><button className="sort" data-sort="ws">WS</button></th>
                <th><input className="search" placeholder="Search" /></th>

              </tr>
            </thead>     
            <tbody className='list'>
              {tableRows}
            </tbody>
          </table>
          <ul className="pagination"></ul>
        </div>

        
    var options = {
      valueNames: ['rank', 'week', 'month', 'player', 'position', 'team', 'war', 'ws']
    };
    
    var composersList = new List('rankings', options);
     
    return(
      <div>
        {mytable}
      </div>
    )
  }
}


ReactDOM.render(
  <PlayerRankings />,
  document.getElementById('root')
);

tr {
   border-bottom: 10px solid #CCC;
}

td {
  padding: 10px;
}


/* Style Table Headers */
.sort, button {
  padding: 8px 25px;
  border: none;
  display: inline-block;
  color: black;
  background-color: transparent;
  text-decoration: none;
  height: 30px;
  font-size: 0.9em;
  font-weight: bold;
}

.sort:hover {
  text-decoration: none;
  background-color: #DDD;
}

.sort:focus {
  outline: none;
}

.sort:after {
  display: inline-block;
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 5px solid transparent;
  content: "";
  position: relative;
  top: -10px;
  right: -5px;
}

.sort.asc:after {
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid #000;
  content: "";
  position: relative;
  top: 4px;
  right: -5px;
}

.sort.desc:after {
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 5px solid #000;
  content: "";
  position: relative;
  top: -4px;
  right: -5px;
}

input.search {
  float: right;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<link href='https://fonts.googleapis.com/css?family=Sorts+Mill+Goudy:400,400italic' rel='stylesheet' type='text/css'>

<script src="http://cdnjs.cloudflare.com/ajax/libs/list.js/1.5.0/list.min.js"></script>

<div id='root'> </div>

Unfortunately my snippet isn't working here at all due to a "List is not defined" error, which makes it difficult for me to showcase my actual question, which is why I am not able to sort my list by clicking on the headers. (The List is not defined error is not happening locally on my machine, however the list is not sorting locally for me, which is the error). Sorting works in the codepen I linked to but not in my code.

Any help getting the snippet working here, and then helping to resolve why my table is not sorting, would be greatly appreciated. Until then I'll keep working on it.

Thanks!

Answer 1

To achieve sorting you should make these changes:

1. Use the componentDidMount lifecycle hook to make sorting work for the table

   componentDidMount() {
       var options = {
          valueNames: ['rank', 'week', 'month', 'player', 'position', 'team', 'war', 'ws']
       };
       var composersList = new List('rankings', options);
   }
   

2. Assign className of the column to sort to each <td>

   let tableRows = rankData.map(row => (
      <tr>
         <td className="rank">{row.rank}</td>
         ... more ...
      </tr>
   ));
   

code sample - https://codepen.io/nagasai/pen/KRmzYg