Как сделать сортировку столбца через onclick в react.js?

@roma 

Для сортировки столбца через onclick в React.js можно использовать состояние компонента для хранения текущей сортировки и функцию для обновления этого состояния.

Вот пример простого компонента таблицы с функциональными компонентами:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49

import React, { useState } from "react";

const Table = () => {
  const [data, setData] = useState([
    { id: 1, name: "John", age: 25 },
    { id: 2, name: "Anna", age: 30 },
    { id: 3, name: "Peter", age: 20 }
  ]);
  const [sortBy, setSortBy] = useState(null);

  const handleSort = (key) => {
    // Проверяем, сортируется ли столбец по возрастанию или убыванию
    const isDescending = sortBy && sortBy.key === key && sortBy.isDescending;

    // Копируем данные и меняем порядок сортировки
    const sortedData = [...data].sort((a, b) => {
      if (a[key] < b[key]) return isDescending ? 1 : -1;
      if (a[key] > b[key]) return isDescending ? -1 : 1;
      return 0;
    });

    // Обновляем состояние с отсортированными данными и ключом сортировки
    setData(sortedData);
    setSortBy({ key: key, isDescending: !isDescending });
  };

  return (
    <table>
      <thead>
        <tr>
          <th onClick={() => handleSort("id")}>ID</th>
          <th onClick={() => handleSort("name")}>Name</th>
          <th onClick={() => handleSort("age")}>Age</th>
        </tr>
      </thead>
      <tbody>
        {data.map((item) => (
          <tr key={item.id}>
            <td>{item.id}</td>
            <td>{item.name}</td>
            <td>{item.age}</td>
          </tr>
        ))}
      </tbody>
    </table>
  );
};

export default Table;

В этом примере есть состояние data, которое хранит данные таблицы, и состояние sortBy, которое хранит текущий ключ сортировки и порядок сортировки. Функция handleSort обновляет состояние data и sortBy в зависимости от выбранного столбца для сортировки.

При клике на заголовок столбца вызывается функция handleSort, которая сортирует данные в соответствии с выбранным столбцом и обновляет состояние компонента с отсортированными данными.

@roma 

В приведенном коде:

1. Создается компонент таблицы Table, который использует хуки useState для управления состоянием данных и сортировкой.
2. Внутри компонента устанавливаются начальные данные таблицы и состояние сортировки с помощью useState.
3. Функция handleSort принимает ключ столбца для сортировки. Внутри этой функции происходит сортировка данных таблицы в соответствии с выбранным столбцом.
4. При клике на заголовок столбца с помощью onClick вызывается функция handleSort с ключом выбранного столбца.
5. Далее отсортированные данные обновляются в состоянии data, а также обновляется состояние с ключом сортировки sortBy.
6. Возвращается JSX разметка таблицы, в которой каждый заголовок столбца имеет событие onClick, вызывающее функцию handleSort для сортировки данных при клике на столбец.

Таким образом, данный компонент реализует сортировку столбца при клике на заголовок столбца, что позволяет пользователю управлять отображенными данными в таблице.