Javascript: Table

In this task, you will implement a table that can be sorted by columns.

The list with objects is passed as data via props. You need to output a table where each column will point to a value in the object. Clicking on a column heading sorts the table. First click sorts in ascending order, second click sorts in descending order. Sorting is performed for one column only. By default, the list is displayed in the order in which it arrived.

The objects themselves can have any flat structure, which means that their keys can be different.

Example of data:

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' },
];

Example of table:

<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

Implement a table

Hints

• You can use bootstrap component