title: React-table V7 sort column on button click
body: <p>I am following the example here <a href="https://codesandbox.io/s/flamboyant-frog-evtjy" rel="nofollow noreferrer">Codesandbox Example</a> and by default I can sort each column by clicking on each header. If I have a table like the following:</p>
  <div class="s-table-container">
  <table class="s-table">
  <thead>
  <tr>
  <th>score</th>
  <th>firstName</th>
  <th>lastName</th>
  <th></th>
  <th></th>
  </tr>
  </thead>
  <tbody>
  <tr>
  <td>6</td>
  <td>Anne</td>
  <td>Faith</td>
  <td></td>
  <td></td>
  </tr>
  <tr>
  <td>10</td>
  <td>Bob</td>
  <td>Smith</td>
  <td></td>
  <td></td>
  </tr>
  <tr>
  <td></td>
  <td></td>
  <td></td>
  <td></td>
  <td></td>
  </tr>
  </tbody>
  </table>
  </div>
  <p>I want to sort them using a separate dropdown component with options:</p>
  <ul>
  <li>Sort score from high to low</li>
  <li>Sort score from low to high</li>
  <li>Sort first name from high to low</li>
  <li>Sort first name from low to high</li>
  <li>Sort last name from high to low</li>
  <li>Sort last name from low to high</li>
  </ul>
  <p>How do I do this using react-table v7?</p>