В этой задаче вам предстоит реализовать таблицу с возможностью сортировки по столбцам.
В качестве данных передаётся список с объектами, данные передаются через 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
Реализуйте таблицу
Подсказки
- Вы можете использовать компонент бутстрапа
Для полного доступа к испытанию нужен базовый план
Базовый план откроет полный доступ ко всем курсам, упражнениям и урокам Хекслета, проектам и пожизненный доступ к теории пройденных уроков. Подписку можно отменить в любой момент.