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 |
|
| 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 |
|
| 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 |
|
| 10 |
Cadeira Gamer
|
Mobília | R$ 899.90 | 18 un. | Ativo |
|
Total de produtos: 10
Produtos ativos: 9
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
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.