Task: Create a webpage with a multifunctional cryptocurrency table. Connect to an API and display a list of coins in the table. Minimum requirements: Project created from scratch Only Typescript Connect to API Sort by column values Search by cell values (works on a logical AND principle) Additional tasks: Custom pagination Minimal styles (pleasant and neat appearance) Global search across all cell values Ability to pin columns

To create a page with a multifunctional cryptocurrency table in TypeScript, you can break down the task as follows:

1. Project Initialization

   • Create a project from scratch (for example, using Vite or Create React App with TypeScript).

2. Fetching Data

   • Connect to a cryptocurrency API (e.g., CoinGecko or CoinMarketCap).
   • Make a request and get a list of coins.

3. Displaying the Table

   • Create a table component that accepts data.
   • Display columns with the necessary fields (name, price, change, etc.).

4. Column Sorting

   • Add the ability to sort by column values (ascending/descending).

5. Cell Value Search (Logical AND)

   • Implement a filter that checks that all search conditions across columns are met simultaneously.

6. Additional Tasks:

   • Pagination: implement custom pagination with page selection.
   • Minimal Styles: style the table neatly using CSS or CSS-in-JS.
   • Global Search: add a field to search across all cells.
   • Fixed Columns: implement fixed columns during horizontal scrolling.

Example of a simplified request and display (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>
  );
};

Further, you can add sorting, filters, pagination, and styles as needed.