Change sorting of data in D3.js

Question

I am rendering a table using D3.js. The initial render sorts the data according to one key. I do not understand where I can intercept the sorting and bind it to a click event on the column header.

The working code for rendering a table is the following:

d3.csv("ranks.csv", function(error, data) {
    if (error) throw error;


    //sort the data by overall ranking
    data = data.sort(function(a, b) {
      return +a.touchdowns_rank - +b.touchdowns_rank;
    });

    render(data);
  });

  // RENDER TABLE
  function render(data) {
    // append the rows
    var tr = d3
      .select("tbody")
      .selectAll("tr")
      .data(data)
      .enter()
      .append("tr");

    // for each column append a th

    tr.append("th").html(function(d) {
      console.log(d);
      first_column = `<img class="teamlogo" src="Arizona.gif" alt="Arizona" />
            <span class="city-name">${d.City}</span><br />
            <span class="team-name">${d.team}</span>
          </th>`;
      return first_column;
    });

    tr.append("th")
      .text(function(d) {
        console.log(d);
        return d.touchdowns_rank;
      });

    tr.append("th")
      .text(function(d) {
        console.log(d);
        return d.ticket_rank;
      });

    tr.append("th")
      .text(function(d) {
        console.log(d);
        return d.precipitation_rank;
      })
      .style("background-color", d => cellColor(d.precipitation_rank))
      .style("font-size", 0);

    tr.append("th")
      .text(function(d) {
        console.log(d);
        return d.beer_rank;
      });

  }