Middle+

Tâche : Créer une page avec un tableau multifonctionnel de cryptomonnaies. Il faut se connecter à l'API et afficher la liste des monnaies dans le tableau. Exigences minimales : Projet créé de zéro Only Typescript Se connecter à l'API Tri par valeurs dans la colonne Recherche par valeurs dans les cellules (fonctionne selon le principe ET logique) Tâches supplémentaires : Pagination personnalisée Styles minimaux (aspect agréable et soigné) Recherche globale dans toutes les cellules Possibilité de fixer des colonnes

sobes.tech IA

Réponse de l'IA

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

Инициализация проекта
- Создать проект с нуля (например, с помощью Vite или Create React App с TypeScript).
Получение данных
- Подключиться к API криптовалют (например, CoinGecko или CoinMarketCap).
- Сделать запрос и получить список монет.
Отображение таблицы
- Создать компонент таблицы, который принимает данные.
- Отобразить колонки с нужными полями (название, цена, изменение и т.д.).
Сортировка по столбцам
- Добавить возможность сортировки по значениям в столбцах (по возрастанию/убыванию).
Поиск по значениям в ячейках (логический И)
- Сделать фильтр, который проверяет, что все условия поиска по столбцам выполняются одновременно.
Дополнительные задачи:
- Пагинация: реализовать собственную пагинацию с выбором страницы.
- Минимальные стили: оформить таблицу аккуратно с помощью 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>
  );
};

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

Précédent Suivant