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">
    <style>
        .sortable {
            cursor: pointer;
            user-select: none;
        }
        .sortable:hover {
            background-color: #f8f9fa;
        }
        .sort-icon {
            opacity: 0.3;
            transition: opacity 0.2s;
        }
        .sortable:hover .sort-icon {
            opacity: 0.7;
        }
        .sort-active {
            opacity: 1 !important;
        }
    </style>
</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...

CSS

.sortable {
            cursor: pointer;
            user-select: none;
        }
        .sortable:hover {
            background-color: #f8f9fa;
        }
        .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 = {};

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

        // Função para renderizar a tabela
        function renderTable(dataToRender = currentData) {
            tableBody.innerHTML = '';
            
            if (dataToRender.length === 0) {
                tableBody.innerHTML = `
                    <tr>
                        <td colspan="5" class="text-center text-muted py-4">
                            <i class="bi bi-search fs-1 d-block mb-2"></i>
                            Nenhum registro encontrado
                        </td>
                    </tr>
                `;
            } else {
                dataToRender.forEach(row => {
                    const tr =...