Middle+

Sarcină: Creați o pagină cu un tabel multifuncțional de criptomonede. Trebuie să vă conectați la API și să afișați lista de monede în tabel. Cerinte minime: Proiect creat de la zero Numai Typescript Conectare la API Sortare după valori în coloană Căutare după valori în celule (funcționează pe principiul logic AND) Sarcini suplimentare: Paginare proprie Stiluri minime (aspect plăcut și ordonat) Căutare generală în toate valorile celulelor Posibilitatea de a fixa coloanele

sobes.tech AI

Răspuns de la 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>
  );
};

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

Anterior În continuare