Задание: Создать страницу с многофункциональной таблицей криптовалюты. Нужно подключиться к API и отобразить список монет в таблице. Минимальные требования: Проект создан с нуля Only Typescript Подключиться к API Сортировка по значениям в столбце Поиск по значениям в ячейках (работает по принципу логического И) Дополнительные задачи: Собственная пагинация Минимальные стили (приятный и аккуратный вид) Общий поиск по значениям во всех ячейках Возможность закреплять столбики

Для создания страницы с многофункциональной таблицей криптовалюты на TypeScript можно разбить задачу так:

1. Инициализация проекта

   • Создать проект с нуля (например, с помощью Vite или Create React App с TypeScript).

2. Получение данных

   • Подключиться к API криптовалют (например, CoinGecko или CoinMarketCap).
   • Сделать запрос и получить список монет.

3. Отображение таблицы

   • Создать компонент таблицы, который принимает данные.
   • Отобразить колонки с нужными полями (название, цена, изменение и т.д.).

4. Сортировка по столбцам

   • Добавить возможность сортировки по значениям в столбцах (по возрастанию/убыванию).

5. Поиск по значениям в ячейках (логический И)

   • Сделать фильтр, который проверяет, что все условия поиска по столбцам выполняются одновременно.

6. Дополнительные задачи:

   • Пагинация: реализовать собственную пагинацию с выбором страницы.
   • Минимальные стили: оформить таблицу аккуратно с помощью CSS или CSS-in-JS.
   • Общий поиск: добавить поле для поиска по всем ячейкам сразу.
   • Закрепление столбиков: реализовать фиксированные колонки при горизонтальной прокрутке.

Пример упрощённого запроса и отображения (React + TypeScript):

import React, { useEffect, useState } from 'react';

interface Coin {
  id: string;
  name: string;
  current_price: number;
  symbol: string;
}

export const CryptoTable: React.FC = () => {
  const [coins, setCoins] = useState<Coin[]>([]);

  useEffect(() => {
    fetch('https://api.coingecko.com/api/v3/coins/markets?vs_currency=usd')
      .then(res => res.json())
      .then(data => setCoins(data));
  }, []);

  return (
    <table>
      <thead>
        <tr>
          <th>Name</th>
          <th>Symbol</th>
          <th>Price</th>
        </tr>
      </thead>
      <tbody>
        {coins.map(coin => (
          <tr key={coin.id}>
            <td>{coin.name}</td>
            <td>{coin.symbol}</td>
            <td>{coin.current_price}</td>
          </tr>
        ))}
      </tbody>
    </table>
  );
};

Дальше можно добавить сортировку, фильтры, пагинацию и стили по мере необходимости.