Javascript: Table

JS: React Hooks
Last update: 24 Mar 23:20
0
Students

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

For full access to the challenge you need a professional subscription.

A professional subscription will give you full access to all Hexlet courses, projects and lifetime access to the theory of lessons learned. You can cancel your subscription at any time.

Get access
130
courses
1000
exercises
2000+
hours of theory
3200
tests