list.js - Custom sort function on button click without jQuery

Question

List.js without jQuery. It's working as supplied out of the box.

Mission:

When a 'List By Price' button is clicked, sold-out items need to display at the bottom of the sorted list - regardless of ascending or descending.

I've begun to develop a customer sort().

    list.sort('price', {
      order: 'asc',
      sortFunction: function (a, b) {
        console.log('sorting price');
       // sort mechanics here
      }
  });

However, it executes when list.js initialises (not wanted) and doesn't execute when the button is pressed (wanted).

---

EDIT: Working code...

NOTE ---> listjs.com

var options = {
  valueNames: [ 'price' ]
};

var userList = new List('for-sale', options);

body {
  font-family:sans-serif;
  font-size:18px;
}
td {
  padding:10px; 
}
.sold, .red{
  font-weight:bold;
  color:red;
}
.intro + .intro{
  border-bottom:1px solid #000;
  padding-bottom: 1rem;
  margin-bottom: 2rem;
}

<p class="intro"><span class="red">Sold out</span> items should ALWAYS appear at the bottom of the list after being sorted - regardless of ascending or descending sort.</p><p class="intro">The button toggles ascending and descending</p>
<div id="for-sale">
  <button class="sort" data-sort="price">
    Sort by price
  </button>
  <table>
    <!-- IMPORTANT, class="list" have to be at tbody -->
    <tbody class="list">
      <tr>
        <td class="price sold">Sold out</td>
      </tr>
      <tr>
        <td class="price">90</td>
      </tr>
      <tr>
        <td class="price">10</td>
      </tr>
      <tr>
        <td class="price sold">Sold out</td>
      </tr>
      <tr>
        <td class="price">30</td>
      </tr>
      <tr>
        <td class="price">70</td>
      </tr>
      <tr>
        <td class="price">50</td>
      </tr>
    </tbody>
  </table>

</div>

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