JSFiddle - React, Tailwind, and code Playground

by Mawel Don

HTML

<script src="https://getfirebug.com/firebug-lite-debug.js"></script>
Click on the user you want to take as sorting variable.
<table>
  <tr id="not">
    <th>Shop Name</th>
    <th>Note Gloable</th>
  </tr>
  
</table>

SCSS

table{
  border-collapse: collapse;
  th{
    cursor: pointer;
  }
  tr, td{
    padding: 3px;
    border-style:dotted;
    border: 1px solid #000;
  }
}

JavaScript

/* Null pour un magasin prend la valeur moyenne du magasin */
var shopsNotation = [[4,3,3,0,5,4,6
],[0,null,2,1,3,4,null],[null,null,null,null,6,null,9],[3,4,3,2,5,1,4],[null,4,3,null,5,0,1],[2,2,3,5,5,9,null]];

var usersWeight = [[1,1,1,1,1,1,1],[1,1,2,0,0,0,0],[1,0,1,0,1,0,0],[0,0,1,1,1,0,4]];

usersWeight.forEach(function(ppl,i){
	$('tr:last').append('<th>User '+i+'</th>');
});

//Moyenne Globale
var notationShop;
var i;
shopsNotation.forEach(function(shop, indexShop){
	i = 0;
  notationShop = 0;
	$('table').append('<tr></tr>');
  shop.forEach(function(note){
		if(note == null) return;
    i++;
		notationShop += note;
  });
  $('tr:last').append('<td>Shop '+indexShop+'</td>');
  $('tr:last').append('<td></td>');
	$('td:last').text(notationShop / i);
});

//Affiche les moyennes par User
var row = 1, userNote, val, turn;
shopsNotation.forEach(function(shop){
  usersWeight.forEach(function(user,line){
    userNote = 0;
    turn = 0;
    user.forEach(function(note,index){
    	if(note == 0) return
      turn ++;
      val = shop[index] == null ? notationShop / i : shop[index];
      userNote += note * val;
    });
    if(line % 4 == 0) row++;
		$('tr:nth-child('+row+')').append('<td>'+userNote/turn+'</td>');
  });	
});

/*
//It's getting closer and closer
var i, j, column, max;
$('th').on('click', function(){
	column = $(this).index() + 1;
  for(i=1; i < $('tr').length; i++){ //Pour le nombre de colone
  	tdi = $('tr').eq(i).children('td:nth-child('+column+')');
    max = tdi;
  	for(j=i; j < $('tr').length; j++){
    	tdj = $('tr').eq(j).children('td:nth-child('+column+')');
      if(tdj.text() > max.text()){
      	max = tdj;
      }
    }
     console.log(max.text())
     $('table').append(max.parent());
  }
});
*/

//ES6 Solution with sort()
[...document.querySelectorAll('th')].forEach(th => {
  	const table = th.parentNode.parentNode;
		th.addEventListener('click', () => {
    	let rows = [...table.querySelectorAll('tr:not(#not)')]
     ...