Javascript: Таблица

В этой задаче вам предстоит реализовать таблицу с возможностью сортировки по столбцам.

В качестве данных передаётся список с объектами, данные передаются через props. Вам нужно вывести таблицу, в которой каждый столбец будет указывать на значение в объекте. Клик по заглавию столбца сортирует таблицу. При первом клике - сортировка по возрастанию, при втором - по убыванию. Сортировка выполняется только по одному столбцу. По умолчанию список выводится в том порядке, в котором пришёл.

Сами объекты могут иметь любую плоскую структуру, это значит, что ключи у них могут быть другими.

Пример данных:

const list = [
  { id: 1, firstName: 'Amaya', lastName: 'Torphy', jobTitle: 'Legacy Group Facilitator', email: 'Rosie_Mann@gmail.com' },
  { id: 2, firstName: 'Weston', lastName: 'Huel', jobTitle: 'Regional Data Agent', email: 'Tristian_Vandervort68@yahoo.com' },
  { id: 3, firstName: 'Bridgette', lastName: 'Corwin', jobTitle: 'Internal Usability Officer', email: 'Sherman.Purdy@hotmail.com' },
];

Пример таблицы:

<table class="table">
  <thead>
    <tr>
      <th>id</th>
      <th>firstName</th>
      <th>lastName</th>
      <th>jobTitle</th>
      <th>email</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Amaya</td>
      <td>Torphy</td>
      <td>Legacy Group Facilitator</td>
      <td>Rosie_Mann@gmail.com</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Weston</td>
      <td>Huel</td>
      <td>Regional Data Agent</td>
      <td>Tristian_Vandervort68@yahoo.com</td>
    </tr>
    <tr>
      <td>3</td>
      <td>Bridgette</td>
      <td>Corwin</td>
      <td>Internal Usability Officer</td>
      <td>Sherman.Purdy@hotmail.com</td>
    </tr>
  </tbody>
</table>

src/App.jsx

Реализуйте таблицу

Подсказки

• Вы можете использовать компонент бутстрапа