JSFiddle - React, Tailwind, and code Playground

by DupontTD

HTML

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <table id="table">
		<thead>
    <tr>
      <th>Cours &#8593;</th>
      <th>TD &#8593;</th>
      <th>C &#8593;</th>
    </tr>
			</thead>
		<tbody>
    <tr>
      <td>HTML</td>
      <td>100</td>
      <td>1</td>
    </tr>
    <tr>
       <td>CSS</td>
      <td>10</td>
      <td>100</td>
    </tr>
    <tr>
      <td>Js</td>
      <td>2</td>
      <td>2</td>
    </tr>
			</tbody>
  </table>
</body>
</html>

JavaScript

function sortedColumns(col) {
	
	let sortedRows;

  console.log(table.tBodies[0].rows[0].cells[col].innerHTML);
  console.log(isNaN(table.tBodies[0].rows[0].cells[col].innerHTML));
  console.log(typeof table.tBodies[0].rows[0].cells[col].textContent);


  if (isNaN(table.tBodies[0].rows[0].cells[col].innerHTML)) {
    sortedRows = Array.from(table.tBodies[0].rows).sort((rowA, rowB) => {

      return rowA.cells[col].textContent > rowB.cells[col].textContent ? 1 : -1
    });

  } else {
    sortedRows = Array.from(table.tBodies[0].rows).sort((rowA, rowB) => {

      return +rowA.cells[col].textContent > +rowB.cells[col].textContent ? 1 : -1
    });
  }
	
  table.tBodies[0].append(...sortedRows);
}


Array.from(table.rows[0].cells, (el,i) => el.addEventListener("click", function( e ) {   
   sortedColumns(i);
  })
);