onclick сортировка по ячейки в таблице

by Aleksandr Tomashov

HTML

<table class="js-teachers">
  <thead>
    <tr>
      <th>Name</th>
      <th>Age</th>
      <th>Gender</th>
      <th>Status</th>
    </tr>
  </thead>
  <tbody>

  </tbody>
</table>

CSS

table,
td,
th {
  border: 1px solid gray;
}

.male td {
  background-color: #65bff3;
}

.female td {
  background-color: #932bb3;
}

.available td {
  border: 2px solid green;
}

.unavailable td {
  border: 2px solid red;
}

JavaScript

//===================================================//
//=== onclick сортировка по ячейки в таблице  =======//
//===================================================//


let users = [
{
    name: 'Ilia',
    age: 30,
    gender: 'm',
    available: true,
    status: 'Free'
  },
  {
    name: 'Tim',
    age: 39,
    gender: 'm',
    available: true,
    status: 'On duty'
  },
  {
    name: 'Marina',
    age: 23,
    gender: 'f',
    available: false,
    status: 'Ready to teach',
  },
  {
    name: 'Sasha',
    age: 37,
    gender: 'm',
    status: 'Unknown'
  },
  {
    name: 'Ivan',
    age: 23,
    gender: 'm',
    available: true,
    status: 'Ready to teach',
  }
]

let table = document.querySelector('.js-teachers')

let [nameHead, ageHead, genderHead, statusHead] = table.tHead.rows[0].cells;

nameHead.onclick = function() {
  let sortedUsers = users.sort((userA, userB) => {
    return userA.name > userB.name;
  });
  fillTable(table, sortedUsers);
};

ageHead.onclick = function() {
  let sortedUsers = users.sort((userA, userB) => {
    return userA.age > userB.age;
  });
  fillTable(table, sortedUsers);
};

genderHead.onclick = function() {
  let sortedUsers = users.sort((userA, userB) => {
    return userA.gender > userB.gender;
  });
  fillTable(table, sortedUsers);
};

statusHead.onclick = function() {
  let sortedUsers = users.sort((userA, userB) => {
    return userA.status > userB.status;
  });
  fillTable(table, sortedUsers);
};

function fillTable(table, teachers) {
  let rowsHtml = '';

  for (let teacher of teachers) {
    let cssClasses = [];
    let hidden = false;
    let style = '';

    switch (teacher.available) {
      case true:
        cssClasses.push('available');
        break;
      case false:
        cssClasses.push('unavailable');
        break;
      default:
        hidden = true;
    }

    if (teacher.gender === 'm') {
      cssClasses.push('male')
    } else if (teacher.gender === 'f') {
      cssClasses.push('female')
    }

  ...