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 |
|---|---|---|---|---|---|---|
| 1 |
Notebook Dell Inspiron 15
|
Informática | R$ 3499.90 | 75 un. | Ativo |
|
| 2 |
Mouse Gamer RGB
|
Periféricos | R$ 129.90 | 150 un. | Ativo |
|
| 3 |
Teclado Mecânico
|
Periféricos | R$ 349.90 | 45 un. | Ativo |
|
Mostrando 1–3
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.