Categoría · Widgets Nivel de Dificultad · Intermedio Publicado el · 22 de agosto de 2025

Tabla de Datos Moderna con Ordenación y Filtrado

Elegante tabla de datos con funciones de ordenación, filtrado y paginación, perfecta para mostrar datos estructurados en aplicaciones web.

#table #data #sorting #filtering #pagination #ui

Diseño Responsivo

Sí

Soporte para Modo Oscuro

líneas

498

Compatibilidad del Navegador

Chrome · Firefox · Safari · Edge

Vista Previa en Vivo

Interactúa con el componente sin salir de la página.

400px

Resumen

Elegante tabla de datos con funciones de ordenación, filtrado y paginación, perfecta para mostrar datos estructurados en aplicaciones web.

Cómo usarlo

Copia el marcado HTML en tu página.
Pega el CSS en tu hoja de estilos y verifica que los selectores coincidan con el HTML.
Pega el JavaScript y cárgalo después del HTML.
Ajusta espaciados, colores y textos para tu sistema de diseño.

Consejos de personalización

Renombra las clases para evitar conflictos con tu CSS existente.
Reemplaza colores fijos por variables CSS para facilitar el tema.
Comprueba el diseño en 320px, 768px y 1024px.

HTML

líneas

CSS

228

líneas

JavaScript

186

líneas

                <div class="data-table-container">
  <div class="table-header">
    <h2>Directorio de Empleados</h2>
    <div class="table-controls">
      <div class="search-box">
        <input type="text" id="searchInput" placeholder="Buscar empleados..." />
        <span class="search-icon">🔍</span>
      </div>
      <div class="filter-dropdown">
        <select id="departmentFilter">
          <option value="">Todos los Departamentos</option>
          <option value="Engineering">Ingeniería</option>
          <option value="Marketing">Marketing</option>
          <option value="Sales">Ventas</option>
          <option value="HR">RRHH</option>
        </select>
      </div>
    </div>
  </div>
  
  <div class="table-wrapper">
    <table class="data-table" id="employeeTable">
      <thead>
        <tr>
          <th data-sort="name">Nombre <span class="sort-icon">↕</span></th>
          <th data-sort="department">Departamento <span class="sort-icon">↕</span></th>
          <th data-sort="position">Posición <span class="sort-icon">↕</span></th>
          <th data-sort="salary">Salario <span class="sort-icon">↕</span></th>
          <th data-sort="joinDate">Fecha de Ingreso <span class="sort-icon">↕</span></th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>John Smith</td>
          <td>Ingeniería</td>
          <td>Desarrollador Senior</td>
          <td>\$95,000</td>
          <td>2020-05-15</td>
        </tr>
        <tr>
          <td>Emily Johnson</td>
          <td>Marketing</td>
          <td>Gerente de Marketing</td>
          <td>\$85,000</td>
          <td>2019-03-22</td>
        </tr>
        <tr>
          <td>Michael Brown</td>
          <td>Ventas</td>
          <td>Representante de Ventas</td>
          <td>\$65,000</td>
          <td>2021-01-10</td>
        </tr>
        <tr>
          <td>Sarah Davis</td>
          <td>Ingeniería</td>
          <td>Desarrollador Frontend</td>
          <td>\$80,000</td>
          <td>2020-11-05</td>
        </tr>
        <tr>
          <td>Robert Wilson</td>
          <td>RRHH</td>
          <td>Especialista en RRHH</td>
          <td>\$70,000</td>
          <td>2018-07-19</td>
        </tr>
      </tbody>
    </table>
  </div>
  
  <div class="table-footer">
    <div class="pagination-info">
      Mostrando <span id="startRecord">1</span> a <span id="endRecord">5</span> de <span id="totalRecords">5</span> registros
    </div>
    <div class="pagination-controls">
      <button class="pagination-btn" id="prevPage">Anterior</button>
      <span class="page-numbers">
        <span class="current-page">1</span>
      </span>
      <button class="pagination-btn" id="nextPage">Siguiente</button>
    </div>
  </div>
</div>

              

                .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;
}@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;
  }
}.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() {

  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');

  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" }
  ];

  let currentSort = { column: null, direction: 'asc' };
  let currentFilter = { search: '', department: '' };
  let currentPage = 1;
  const recordsPerPage = 5;

  function initTable() {
    renderTable();
    setupEventListeners();
  }

  function setupEventListeners() {

    headers.forEach(header => {
      header.addEventListener('click', () => {
        const column = header.getAttribute('data-sort');
        handleSort(column);
      });
    });

    searchInput.addEventListener('input', () => {
      currentFilter.search = searchInput.value.toLowerCase();
      currentPage = 1;
      renderTable();
    });

    departmentFilter.addEventListener('change', () => {
      currentFilter.department = departmentFilter.value;
      currentPage = 1;
      renderTable();
    });

    prevPageBtn.addEventListener('click', () => {
      if (currentPage > 1) {
        currentPage--;
        renderTable();
      }
    });
    
    nextPageBtn.addEventListener('click', () => {
      const totalPages = Math.ceil(getFilteredData().length / recordsPerPage);
      if (currentPage < totalPages) {
        currentPage++;
        renderTable();
      }
    });
  }

  function handleSort(column) {

    headers.forEach(header => {
      header.classList.remove('sort-asc', 'sort-desc');
    });

    if (currentSort.column === column) {
      currentSort.direction = currentSort.direction === 'asc' ? 'desc' : 'asc';
    } else {
      currentSort.column = column;
      currentSort.direction = 'asc';
    }

    const header = table.querySelector(`th[data-sort="\${column}"]`);
    header.classList.add(currentSort.direction === 'asc' ? 'sort-asc' : 'sort-desc');
    
    renderTable();
  }

  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;
    });
  }

  function getSortedData(data) {
    if (!currentSort.column) return data;
    
    return [...data].sort((a, b) => {
      const aVal = a[currentSort.column];
      const bVal = b[currentSort.column];

      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;
      }

      if (currentSort.column === 'joinDate') {
        return currentSort.direction === 'asc' ? 
          new Date(aVal) - new Date(bVal) : 
          new Date(bVal) - new Date(aVal);
      }

      if (aVal < bVal) return currentSort.direction === 'asc' ? -1 : 1;
      if (aVal > bVal) return currentSort.direction === 'asc' ? 1 : -1;
      return 0;
    });
  }

  function renderTable() {

    const container = document.querySelector('.data-table-container');
    container.classList.add('loading');

    setTimeout(() => {

      let filteredData = getFilteredData();
      const totalRecords = filteredData.length;
      filteredData = getSortedData(filteredData);

      const totalPages = Math.ceil(totalRecords / recordsPerPage);
      const startIndex = (currentPage - 1) * recordsPerPage;
      const endIndex = Math.min(startIndex + recordsPerPage, totalRecords);
      const pageData = filteredData.slice(startIndex, endIndex);

      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);
      });

      document.getElementById('startRecord').textContent = startIndex + 1;
      document.getElementById('endRecord').textContent = endIndex;
      document.getElementById('totalRecords').textContent = totalRecords;

      prevPageBtn.disabled = currentPage === 1;
      nextPageBtn.disabled = currentPage === totalPages || totalPages === 0;

      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);
      }

      container.classList.remove('loading');
    }, 300);
  }

  initTable();
});

              

Compatibilidad del Navegador

Chrome

>= 50

Firefox

>= 45

Safari

>= 10

Edge

>= 15

Convertidor de Markdown a HTML

Generador de Políticas de Privacidad

Tabla de Datos Moderna con Ordenación y Filtrado

Vista Previa en Vivo

Resumen

Cómo usarlo

Consejos de personalización

Compatibilidad del Navegador

Fragmentos de Código Relacionados

Precios de Atracción Magnética

Galería de Imágenes Animada

Insignia de Notificación Animada

Explora packs de plantillas