Exemplo de Tabela Responsiva
Demonstração de tabela com listagem de dados, badges de status e botões de ação
Lista de Produtos
| ID | Nome | Categoria | Preço | Estoque | Status | Ações |
|---|---|---|---|---|---|---|
| 4 |
Monitor LG 27" 4K
|
Monitores | R$ 1899.90 | 12 un. | Ativo |
|
| 5 |
Webcam Full HD
|
Periféricos | R$ 249.90 | 8 un. | Ativo |
|
| 6 |
Headset Bluetooth
|
Áudio | R$ 199.90 | 92 un. | Ativo |
|
Mostrando 4–6
de 10 produtos
Recursos Demonstrados
Componentes Bootstrap
.table- Tabela responsiva.table-hover- Efeito hover nas linhas.table-responsive- Scroll horizontal em telas pequenas.badge- Badges de status coloridas.btn-group- Grupo de botões de ação.card- Card container
Funcionalidades
- Listagem de dados em tabela
- Badges de status condicionais (cores dinâmicas)
- Formatação de valores monetários
- Botões de ação (visualizar, editar, excluir)
- Ícones do Bootstrap Icons
- Layout responsivo (mobile-friendly)
- Modal de confirmação para exclusão
- Paginação genérica via macro
paginacao_completa()
Dica: Esta é uma demonstração com dados mockados.
Em uma aplicação real, os dados viriam do banco de dados através de um repositório.