JSFiddle - React, Tailwind, and code Playground

by gilbertomg

HTML

<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tabela Interativa</title>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.0/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-icons/1.10.0/font/bootstrap-icons.min.css" rel="stylesheet">
  
       
</head>
<body>
    <div class="container mt-5">
        <div class="row">
            <div class="col-12">
                <h1 class="mb-4 text-center">Tabela de Pessoas</h1>
                
                <!-- Campo de Pesquisa -->
                <div class="row mb-4">
                    <div class="col-md-6 mx-auto">
                        <div class="input-group">
                            <span class="input-group-text">
                                <i class="bi bi-search"></i>
                            </span>
                            <input type="text" class="form-control" id="searchInput" placeholder="Pesquisar por nome, cidade...">
                            <button class="btn btn-outline-secondary" type="button" id="clearSearch">
                                <i class="bi bi-x-lg"></i>
                            </button>
                        </div>
                    </div>
                </div>

                <!-- Tabela -->
                <div class="card shadow">
                    <div class="card-body">
                        <div class="table-responsive">
                            <table class="table table-hover table-striped">
                                <thead class="table-dark">
                                    <tr>
                                        <th class="sortable" data-column="id">
                                            ID 
                                            <i class="bi bi-arrow-up-down sort-icon ms-1"></i>
          ...

CSS

.sortable {
            cursor: pointer;
            user-select: none;
        }
        .sortable:hover {
            background-color: #6e88a1;
        }
        .sort-icon {
            opacity: 0.3;
            transition: opacity 0.2s;
        }
        .sortable:hover .sort-icon {
            opacity: 0.7;
        }
        .sort-active {
            opacity: 1 !important;
        }

JavaScript

// Dados mockados
        const data = [
            { id: 1, nome: "Ana Silva", idade: 28, peso: 65.5, cidade: "São Paulo" },
            { id: 2, nome: "Carlos Santos", idade: 35, peso: 82.3, cidade: "Rio de Janeiro" },
            { id: 3, nome: "Maria Oliveira", idade: 42, peso: 58.7, cidade: "Belo Horizonte" },
            { id: 4, nome: "João Pereira", idade: 31, peso: 75.2, cidade: "Curitiba" },
            { id: 5, nome: "Lucia Costa", idade: 26, peso: 62.1, cidade: "Salvador" },
            { id: 6, nome: "Pedro Almeida", idade: 48, peso: 88.9, cidade: "Fortaleza" },
            { id: 7, nome: "Fernanda Lima", idade: 33, peso: 55.4, cidade: "Brasília" },
            { id: 8, nome: "Roberto Souza", idade: 29, peso: 79.6, cidade: "Recife" },
            { id: 9, nome: "Juliana Rocha", idade: 37, peso: 67.8, cidade: "Porto Alegre" },
            { id: 10, nome: "Marcos Ferreira", idade: 44, peso: 91.2, cidade: "Manaus" }
        ];

        let currentData = [...data];
        let sortDirection = {};
        let currentPage = 1;
        const itemsPerPage = 5;

        // Elementos do DOM
        const tableBody = document.getElementById('tableBody');
        const searchInput = document.getElementById('searchInput');
        const clearSearch = document.getElementById('clearSearch');
        const tableInfo = document.getElementById('tableInfo');
        const pagination = document.getElementById('pagination');

        // Função para obter dados da página atual
        function getCurrentPageData() {
            const startIndex = (currentPage - 1) * itemsPerPage;
            const endIndex = startIndex + itemsPerPage;
            return currentData.slice(startIndex, endIndex);
        }

        // Função para calcular total de páginas
        function getTotalPages() {
            return Math.ceil(currentData.length / itemsPerPage);
        }

        // Função para renderizar a tabela
        function...