Veja como fazer uma tabela paginada e interativa com #javascript e #bootstrap 5.

Funcionalidades Implementadas:

Ordenação:

  • Clique nos cabeçalhos das colunas para ordenar
  • Ícones visuais indicam a direção da ordenação (crescente/decrescente)
  • Suporte para ordenação numérica (ID, idade, peso) e alfabética (nome, cidade)

Pesquisa:

  • Campo de busca que filtra em tempo real
  • Pesquisa em todas as colunas (nome, cidade, idade, peso, ID)
  • Botão para limpar a pesquisa
  • Contador mostrando quantos registros estão sendo exibidos

Design e UX:

  • Interface responsiva com Bootstrap 5
  • Ícones Bootstrap Icons para melhor visual
  • Animações suaves e efeitos hover
  • Badges para IDs e ícones para cidades
  • Design moderno com cards e sombras
  • Feedback visual quando não há resultados

Demonstração