JSFiddle - React, Tailwind, and code Playground

HTML

<table>
  <thead>
    <tr>
      <th>Name</th>
      <th onclick='sort(this)'>Volume</th>
    </tr>
  </thead>
  <tr>
    <td>Joey</td>
    <td>Data Not Enough</td>
  </tr>
  <tr>
    <td>Ross</td>
    <td>-5</td>
  </tr>
  <tr>
    <td>Monica</td>
    <td>1</td>
  </tr>
  <tr>
    <td>Ben</td>
    <td>100</td>
  </tr>
  <tr>
    <td>Chandler</td>
    <td>Data Not Enough</td>
  </tr>
</table>

JavaScript

function sortData(data, method) {
  let lessData = 'Data Not Enough'
  let lastItems = []
  let sortedList;
  if (method == 'descending') {
    sortedList = data.sort((a, b) => {
      return a - b
    })
  } else if (method == 'ascending') {
    sortedList = data.sort((a, b) => {
      return b - a
    })
  }
  for (let i = 0; i < sortedList.length; i++) {
    if (sortedList[i] == lessData) {
      let item = sortedList[i]
      sortedList.splice(i, 1)
      sortedList.push(item)
    }
  }
  sortedList = sortedList.concat(lastItems)
  return sortedList
}


let count = 0
function sort(x) {
  let ths = x.parentElement.querySelectorAll('th')
  let i = 0;
  let total = 0
  let index;
  for (let i = 0; i < ths.length; i++) {
    if (ths[i].innerHTML == x.innerHTML) {
      index = i
    }
    total = i + 1
  }
  let items = []
  let tds = document.querySelectorAll('td')
  for (let x = index; x < tds.length; x += total) {
    items.push(tds[x].innerHTML)
  }
  let arr;
  if (count % 2 == 0) {
    arr = sortData(items, 'descending')
  } else {
    arr = sortData(items, 'ascending')
  }
  count++
  i = index

  arr.forEach((e) => {
    document.querySelectorAll('td')[i].innerHTML = e
    i += total
  })
}