Tabla de Datos Moderna con Ordenación y Filtrado

                .data-table-container {
  background: white;
  border-radius: 15px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  padding: 25px;
  max-width: 1000px;
  margin: 0 auto;
}

.table-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 25px;
  flex-wrap: wrap;
  gap: 15px;
}

.table-header h2 {
  margin: 0;
  font-size: 1.8rem;
  color: #333;
  font-weight: 700;
}

.table-controls {
  display: flex;
  gap: 15px;
  flex-wrap: wrap;
}

.search-box {
  position: relative;
}

.search-box input {
  padding: 10px 15px 10px 40px;
  border: 2px solid #e1e5e9;
  border-radius: 8px;
  font-size: 14px;
  width: 250px;
  transition: border-color 0.3s ease;
}

.search-box input:focus {
  outline: none;
  border-color: #667eea;
}

.search-icon {
  position: absolute;
  left: 15px;
  top: 50%;
  transform: translateY(-50%);
  color: #999;
}

.filter-dropdown select {
  padding: 10px 15px;
  border: 2px solid #e1e5e9;
  border-radius: 8px;
  font-size: 14px;
  background: white;
  cursor: pointer;
  transition: border-color 0.3s ease;
}

.filter-dropdown select:focus {
  outline: none;
  border-color: #667eea;
}

.table-wrapper {
  overflow-x: auto;
  border-radius: 10px;
  border: 1px solid #e1e5e9;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 800px;
}

.data-table th {
  background: #f8f9ff;
  padding: 15px 20px;
  text-align: left;
  font-weight: 600;
  color: #333;
  cursor: pointer;
  user-select: none;
  position: relative;
  border-bottom: 2px solid #e1e5e9;
}

.data-table th:hover {
  background: #edf0ff;
}

.sort-icon {
  margin-left: 5px;
  opacity: 0.5;
  font-size: 12px;
}

.data-table th.sort-asc .sort-icon::after {
  content: "↑";
  opacity: 1;
}

.data-table th.sort-desc .sort-icon::after {
  content: "↓";
  opacity: 1;
}

.data-table td {
  padding: 15px 20px;
  border-bottom: 1px solid #e1e5e9;
  color: #555;
}

.data-table tbody tr:hover {
  background: #f8f9ff;
}

.data-table tbody tr:last-child td {
  border-bottom: none;
}

.table-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 25px;
  flex-wrap: wrap;
  gap: 15px;
}

.pagination-info {
  color: #666;
  font-size: 14px;
}

.pagination-controls {
  display: flex;
  align-items: center;
  gap: 10px;
}

.pagination-btn {
  padding: 8px 15px;
  background: #f1f5f9;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 500;
  transition: all 0.3s ease;
}

.pagination-btn:hover:not(:disabled) {
  background: #667eea;
  color: white;
}

.pagination-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.page-numbers {
  display: flex;
  align-items: center;
}

.current-page {
  background: #667eea;
  color: white;
  padding: 8px 12px;
  border-radius: 6px;
  font-weight: 500;
}

/* Diseño responsivo */
@media (max-width: 768px) {
  .table-header {
    flex-direction: column;
    align-items: stretch;
  }
  
  .table-controls {
    justify-content: center;
  }
  
  .search-box input {
    width: 100%;
  }
  
  .table-footer {
    flex-direction: column;
    text-align: center;
  }
}

/* Animación de carga */
.data-table-container.loading::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
}

.data-table-container.loading::after::before {
  content: '';
  width: 30px;
  height: 30px;
  border: 3px solid #f3f3f3;
  border-top: 3px solid #667eea;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

              

                document.addEventListener('DOMContentLoaded', function() {
  // Obtener elementos del DOM
  const table = document.getElementById('employeeTable');
  const tbody = table.querySelector('tbody');
  const searchInput = document.getElementById('searchInput');
  const departmentFilter = document.getElementById('departmentFilter');
  const headers = table.querySelectorAll('th[data-sort]');
  const prevPageBtn = document.getElementById('prevPage');
  const nextPageBtn = document.getElementById('nextPage');
  
  // Datos de ejemplo (en una aplicación real, esto vendría de una API)
  const employees = [
    { name: "John Smith", department: "Ingeniería", position: "Desarrollador Senior", salary: "\$95,000", joinDate: "2020-05-15" },
    { name: "Emily Johnson", department: "Marketing", position: "Gerente de Marketing", salary: "\$85,000", joinDate: "2019-03-22" },
    { name: "Michael Brown", department: "Ventas", position: "Representante de Ventas", salary: "\$65,000", joinDate: "2021-01-10" },
    { name: "Sarah Davis", department: "Ingeniería", position: "Desarrollador Frontend", salary: "\$80,000", joinDate: "2020-11-05" },
    { name: "Robert Wilson", department: "RRHH", position: "Especialista en RRHH", salary: "\$70,000", joinDate: "2018-07-19" },
    { name: "Jennifer Lee", department: "Ingeniería", position: "Desarrollador Backend", salary: "\$90,000", joinDate: "2019-12-03" },
    { name: "David Miller", department: "Marketing", position: "Especialista de Contenido", salary: "\$60,000", joinDate: "2021-03-17" },
    { name: "Lisa Anderson", department: "Ventas", position: "Gerente de Ventas", salary: "\$95,000", joinDate: "2018-11-28" },
    { name: "James Taylor", department: "RRHH", position: "Reclutador", salary: "\$65,000", joinDate: "2020-08-14" },
    { name: "Patricia Thomas", department: "Ingeniería", position: "Ingeniero DevOps", salary: "\$100,000", joinDate: "2019-06-21" }
  ];
  
  // Gestión de estado
  let currentSort = { column: null, direction: 'asc' };
  let currentFilter = { search: '', department: '' };
  let currentPage = 1;
  const recordsPerPage = 5;
  
  // Inicializar la tabla
  function initTable() {
    renderTable();
    setupEventListeners();
  }
  
  // Configurar escuchadores de eventos
  function setupEventListeners() {
    // Ordenación
    headers.forEach(header => {
      header.addEventListener('click', () => {
        const column = header.getAttribute('data-sort');
        handleSort(column);
      });
    });
    
    // Búsqueda
    searchInput.addEventListener('input', () => {
      currentFilter.search = searchInput.value.toLowerCase();
      currentPage = 1;
      renderTable();
    });
    
    // Filtrado
    departmentFilter.addEventListener('change', () => {
      currentFilter.department = departmentFilter.value;
      currentPage = 1;
      renderTable();
    });
    
    // Paginación
    prevPageBtn.addEventListener('click', () => {
      if (currentPage > 1) {
        currentPage--;
        renderTable();
      }
    });
    
    nextPageBtn.addEventListener('click', () => {
      const totalPages = Math.ceil(getFilteredData().length / recordsPerPage);
      if (currentPage < totalPages) {
        currentPage++;
        renderTable();
      }
    });
  }
  
  // Manejar ordenación
  function handleSort(column) {
    // Restablecer indicadores de ordenación
    headers.forEach(header => {
      header.classList.remove('sort-asc', 'sort-desc');
    });
    
    // Determinar dirección de ordenación
    if (currentSort.column === column) {
      currentSort.direction = currentSort.direction === 'asc' ? 'desc' : 'asc';
    } else {
      currentSort.column = column;
      currentSort.direction = 'asc';
    }
    
    // Agregar indicador de ordenación al encabezado clickeado
    const header = table.querySelector(`th[data-sort="\${column}"]`);
    header.classList.add(currentSort.direction === 'asc' ? 'sort-asc' : 'sort-desc');
    
    renderTable();
  }
  
  // Obtener datos filtrados
  function getFilteredData() {
    return employees.filter(employee => {
      const matchesSearch = 
        currentFilter.search === '' || 
        employee.name.toLowerCase().includes(currentFilter.search) ||
        employee.position.toLowerCase().includes(currentFilter.search);
        
      const matchesDepartment = 
        currentFilter.department === '' || 
        employee.department === currentFilter.department;
        
      return matchesSearch && matchesDepartment;
    });
  }
  
  // Ordenar datos
  function getSortedData(data) {
    if (!currentSort.column) return data;
    
    return [...data].sort((a, b) => {
      const aVal = a[currentSort.column];
      const bVal = b[currentSort.column];
      
      // Manejar valores numéricos
      if (currentSort.column === 'salary') {
        const aNum = parseInt(aVal.replace(/[^0-9]/g, ''));
        const bNum = parseInt(bVal.replace(/[^0-9]/g, ''));
        return currentSort.direction === 'asc' ? aNum - bNum : bNum - aNum;
      }
      
      // Manejar valores de fecha
      if (currentSort.column === 'joinDate') {
        return currentSort.direction === 'asc' ? 
          new Date(aVal) - new Date(bVal) : 
          new Date(bVal) - new Date(aVal);
      }
      
      // Manejar valores de texto
      if (aVal < bVal) return currentSort.direction === 'asc' ? -1 : 1;
      if (aVal > bVal) return currentSort.direction === 'asc' ? 1 : -1;
      return 0;
    });
  }
  
  // Renderizar tabla
  function renderTable() {
    // Mostrar estado de carga
    const container = document.querySelector('.data-table-container');
    container.classList.add('loading');
    
    // Simular retraso de API
    setTimeout(() => {
      // Obtener datos filtrados y ordenados
      let filteredData = getFilteredData();
      const totalRecords = filteredData.length;
      filteredData = getSortedData(filteredData);
      
      // Calcular paginación
      const totalPages = Math.ceil(totalRecords / recordsPerPage);
      const startIndex = (currentPage - 1) * recordsPerPage;
      const endIndex = Math.min(startIndex + recordsPerPage, totalRecords);
      const pageData = filteredData.slice(startIndex, endIndex);
      
      // Renderizar filas de la tabla
      tbody.innerHTML = '';
      pageData.forEach(employee => {
        const row = document.createElement('tr');
        row.innerHTML = `
          <td>\${employee.name}</td>
          <td>\${employee.department}</td>
          <td>\${employee.position}</td>
          <td>\${employee.salary}</td>
          <td>\${employee.joinDate}</td>
        `;
        tbody.appendChild(row);
      });
      
      // Actualizar información de paginación
      document.getElementById('startRecord').textContent = startIndex + 1;
      document.getElementById('endRecord').textContent = endIndex;
      document.getElementById('totalRecords').textContent = totalRecords;
      
      // Actualizar botones de paginación
      prevPageBtn.disabled = currentPage === 1;
      nextPageBtn.disabled = currentPage === totalPages || totalPages === 0;
      
      // Actualizar visualización de números de página
      const pageNumbers = document.querySelector('.page-numbers');
      pageNumbers.innerHTML = '';
      for (let i = 1; i <= totalPages; i++) {
        const pageSpan = document.createElement('span');
        pageSpan.textContent = i;
        pageSpan.className = i === currentPage ? 'current-page' : 'page-number';
        if (i !== currentPage) {
          pageSpan.addEventListener('click', () => {
            currentPage = i;
            renderTable();
          });
        }
        pageNumbers.appendChild(pageSpan);
      }
      
      // Ocultar estado de carga
      container.classList.remove('loading');
    }, 300);
  }
  
  // Inicializar la tabla
  initTable();
});