Exemplo de como criar um #tabela #interativa completa com #Bootstrap 5 e JavaScript.

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

 

CDN

 <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">