Bootstrap 5 - Tabela interativa com ordenação e pesquisa

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