Middle+

Aufgabe: Erstellen Sie eine Seite mit einer multifunktionalen Kryptowährungstabelle. Verbinden Sie sich mit der API und zeigen Sie die Liste der Münzen in der Tabelle an. Mindestanforderungen: Projekt von Grund auf neu erstellt Nur Typescript Mit der API verbinden Sortierung nach Werten in der Spalte Suche nach Werten in den Zellen (funktioniert nach dem Prinzip logisches UND) Zusätzliche Aufgaben: Eigene Paginierung Minimale Stile (angenehmes und ordentliches Aussehen) Allgemeine Suche nach Werten in allen Zellen Möglichkeit, Spalten zu fixieren

sobes.tech KI

Antwort von AI

Для создания страницы с многофункциональной таблицей криптовалюты на 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>
  );
};

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

Zurück Als nächstes