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
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.