JSFiddle - React, Tailwind, and code Playground

by jmeile

HTML

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Directorio de Empleados</title>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">

    <style>
        /* Estilo opcional para mejorar la visualización en tablas */
        .table th, .table td {
            vertical-align: middle;
        }
        /* Hacer que las cabeceras de tabla parezcan clickables */
        .table thead th {
            cursor: pointer;
        }
        /* Estilo para los indicadores de orden (Flechas) */
        .sort-indicator {
            font-size: 0.8em;
            margin-left: 5px;
            color: rgba(255, 255, 255, 0.5);
            opacity: 0.7;
        }
        .table thead th.sorted-asc .sort-indicator,
        .table thead th.sorted-desc .sort-indicator {
            color: #fff;
            opacity: 1;
        }
        /* Alinear verticalmente el botón con los selects/input */
        .filter-row {
            align-items: flex-end;
        }
    </style>
</head>
<body>
    <div class="container mt-4">
        <h1 class="mb-4">Directorio de Empleados (Estilo Northwind)</h1>

        <div class="row mb-3 g-2 filter-row"> <div class="col-md-3">
                 <label for="searchInput" class="form-label visually-hidden">Buscar</label>
                <input type="text" id="searchInput" class="form-control" placeholder="Buscar en todo...">
            </div>
            <div class="col-md-3">
                 <label for="countryFilter" class="form-label visually-hidden">Filtrar País</label>
                <select id="countryFilter" class="form-select">
                    <option value="">Filtrar por País...</option>
                    </select>
            </div>
            <div class="col-md-2">
        ...

JavaScript

// Datos de ejemplo simulados de Northwind Employees (AMPLIADO)
const employees = [
    // Originales
    { firstName: 'Nancy', lastName: 'Davolio', title: 'Sales Representative', email: '[email protected]', extension: '5467', country: 'USA', branch: 'Seattle' },
    { firstName: 'Andrew', lastName: 'Fuller', title: 'Vice President, Sales', email: '[email protected]', extension: '3457', country: 'USA', branch: 'Tacoma' },
    { firstName: 'Janet', lastName: 'Leverling', title: 'Sales Representative', email: '[email protected]', extension: '3355', country: 'USA', branch: 'Kirkland' },
    { firstName: 'Margaret', lastName: 'Peacock', title: 'Sales Representative', email: '[email protected]', extension: '5176', country: 'USA', branch: 'Redmond' },
    { firstName: 'Steven', lastName: 'Buchanan', title: 'Sales Manager', email: '[email protected]', extension: '3453', country: 'UK', branch: 'London' },
    { firstName: 'Michael', lastName: 'Suyama', title: 'Sales Representative', email: '[email protected]', extension: '428', country: 'UK', branch: 'London' },
    { firstName: 'Robert', lastName: 'King', title: 'Sales Representative', email: '[email protected]', extension: '465', country: 'UK', branch: 'London' },
    { firstName: 'Laura', lastName: 'Callahan', title: 'Inside Sales Coordinator', email: '[email protected]', extension: '2344', country: 'USA', branch: 'Seattle' },
    { firstName: 'Anne', lastName: 'Dodsworth', title: 'Sales Representative', email: '[email protected]', extension: '452', country: 'UK', branch: 'London' },
    { firstName: 'Peter', lastName: 'Schmidt', title: 'Developer', email: '[email protected]', extension: '1234', country: 'Switzerland', branch: 'Zürich' },

    // Nuevos Empleados (4 por sucursal)
    // Seattle (USA)
    { firstName: 'John', lastName: 'Smith', title: 'Software Engineer', email: '[email protected]', extension: '1111', country: 'USA', branch: 'Seattle' },
    {...