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 |
|---|---|---|---|---|---|---|
| 7 |
SSD 1TB NVMe
|
Armazenamento | R$ 449.90 | 38 un. | Ativo |
|
| 8 |
Memória RAM 16GB
|
Componentes | R$ 299.90 | 5 un. | Inativo |
|
| 9 |
Placa de Vídeo RTX 3060
|
Componentes | R$ 2299.90 | 3 un. | Ativo |
|
Mostrando 7–9
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.