# SINAGEM DataTable Module

Módulo reutilizável para implementar DataTables no sistema SINAGEM com design consistente e funcionalidades avançadas.

## 🚀 Funcionalidades

- ✅ Design responsivo e moderno seguindo o padrão SINAGEM
- ✅ Suporte a dados client-side e server-side (AJAX)
- ✅ Configuração de idioma em português
- ✅ Tooltips automáticos nos botões de ação
- ✅ Estados de loading e empty states
- ✅ Controles de paginação e pesquisa integrados
- ✅ Ordenação e filtros avançados
- ✅ Totalmente personalizável

## 📦 Instalação

### 1. Layout Principal

O módulo já está integrado no `layouts/app.blade.php` com todos os CDNs necessários:

```html
<!-- CSS -->
<link rel="stylesheet" href="https://cdn.datatables.net/1.13.7/css/dataTables.bootstrap5.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/responsive/2.5.0/css/responsive.bootstrap5.min.css">
<link rel="stylesheet" href="{{ asset('assets/css/modules/datatable.css') }}">

<!-- JavaScript -->
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script src="https://cdn.datatables.net/1.13.7/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.13.7/js/dataTables.bootstrap5.min.js"></script>
<script src="https://cdn.datatables.net/responsive/2.5.0/js/dataTables.responsive.min.js"></script>
<script src="https://cdn.datatables.net/responsive/2.5.0/js/responsive.bootstrap5.min.js"></script>
<script src="{{ asset('assets/js/modules/datatable.js') }}"></script>
```

### 2. Arquivos do Módulo

- `public/assets/css/modules/datatable.css` - Estilos personalizados
- `public/assets/js/modules/datatable.js` - Lógica JavaScript
- `public/assets/js/modules/datatable-examples.js` - Exemplos de uso

## 📋 Como Usar

### Exemplo Básico

```html
@extends('layouts.app')

@section('content')
<div class="sinagem-datatable-wrapper">
    <div class="sinagem-datatable">
        <table id="minha-tabela" class="table table-hover">
            <thead>
                <tr>
                    <th>Nome</th>
                    <th>Email</th>
                    <th class="no-sort text-center">Ações</th>
                </tr>
            </thead>
            <tbody>
                @forelse($usuarios as $usuario)
                <tr>
                    <td>{{ $usuario->name }}</td>
                    <td>{{ $usuario->email }}</td>
                    <td class="text-center">
                        <a href="#" class="btn-action btn btn-sm btn-outline-primary" title="Editar">
                            <i class="bi bi-pencil"></i>
                        </a>
                    </td>
                </tr>
                @empty
                <tr>
                    <td colspan="3" class="sinagem-datatable-empty">
                        <i class="bi bi-people"></i>
                        <h4>Nenhum usuário encontrado</h4>
                        <p>Comece cadastrando o primeiro usuário.</p>
                    </td>
                </tr>
                @endforelse
            </tbody>
        </table>
    </div>
</div>
@endsection

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Inicializar DataTable
    const table = initSinagemDataTable({
        tableId: 'minha-tabela',
        pageLength: 15
    });

    // Adicionar tooltips
    const tooltipTriggerList = [].slice.call(document.querySelectorAll('[title]'));
    const tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
        return new bootstrap.Tooltip(tooltipTriggerEl);
    });
});
</script>
@endpush
```

### Exemplo com AJAX (Server-side)

```javascript
const table = initSinagemDataTable({
    tableId: 'tabela-ajax',
    ajaxUrl: '/api/usuarios',
    columns: [
        { data: 'id', title: 'ID' },
        { data: 'name', title: 'Nome' },
        { data: 'email', title: 'Email' },
        {
            data: 'actions',
            title: 'Ações',
            orderable: false,
            render: function(data, type, row) {
                return `
                    <a href="/usuarios/${row.id}/edit" class="btn-action btn btn-sm btn-outline-primary">
                        <i class="bi bi-pencil"></i>
                    </a>
                `;
            }
        }
    ],
    pageLength: 25
});
```

## ⚙️ Configurações Disponíveis

| Parâmetro | Tipo | Padrão | Descrição |
|-----------|------|--------|-----------|
| `tableId` | string | 'data-table' | ID da tabela HTML |
| `ajaxUrl` | string | null | URL para dados AJAX |
| `columns` | array | [] | Configuração de colunas (server-side) |
| `pageLength` | number | 15 | Registros por página |
| `searching` | boolean | true | Habilitar pesquisa |
| `paging` | boolean | true | Habilitar paginação |
| `ordering` | boolean | true | Habilitar ordenação |
| `info` | boolean | true | Mostrar informações |
| `responsive` | boolean | true | Design responsivo |
| `language` | object | pt-BR | Configurações de idioma |

## 🎨 Classes CSS

### Estrutura
- `.sinagem-datatable-wrapper` - Container principal
- `.sinagem-datatable` - Wrapper da tabela
- `.sinagem-datatable-header` - Cabeçalho personalizado
- `.sinagem-datatable-title` - Título da tabela

### Estados
- `.sinagem-datatable-loading` - Estado de carregamento
- `.sinagem-datatable-empty` - Estado vazio

### Elementos
- `.btn-action` - Botões de ação
- `.no-sort` - Colunas não ordenáveis
- `.text-center` - Alinhamento central
- `.text-right` - Alinhamento à direita

## 🔧 Funções Globais

```javascript
// Recarregar tabela
reloadDataTable('minha-tabela');

// Redesenhar tabela
redrawDataTable('minha-tabela');

// Obter instância DataTable
const table = getTableInstance('minha-tabela');
```

## 📱 Responsividade

O módulo é totalmente responsivo e se adapta automaticamente a diferentes tamanhos de tela:

- **Desktop**: Tabela completa com todos os controles
- **Tablet**: Controles empilhados, tabela responsiva
- **Mobile**: Priorização de colunas importantes, controles otimizados

## 🎯 Boas Práticas

1. **IDs Únicos**: Sempre use IDs únicos para tabelas
2. **Lazy Loading**: Considere para tabelas com muitos dados
3. **Tooltips**: Adicione títulos descritivos aos botões
4. **Estados Vazios**: Implemente mensagens apropriadas
5. **Performance**: Use server-side para +1000 registros
6. **Acessibilidade**: Mantenha contraste e navegação por teclado

## 🐛 Troubleshooting

### Problema: Tabela não inicializa
**Solução**: Verifique se o DOM está carregado e o ID da tabela existe

### Problema: AJAX não funciona
**Solução**: Verifique URL, método HTTP e formato de resposta JSON

### Problema: Estilos não aplicam
**Solução**: Confirme que os arquivos CSS estão sendo carregados

### Problema: Responsividade quebrada
**Solução**: Verifique se as classes Bootstrap estão carregadas

## 📝 Exemplos Completos

Veja `public/assets/js/modules/datatable-examples.js` para exemplos detalhados de implementação em diferentes cenários.

## 🤝 Contribuição

Para modificar ou estender o módulo:

1. Edite `public/assets/js/modules/datatable.js` para lógica
2. Edite `public/assets/css/modules/datatable.css` para estilos
3. Teste em diferentes navegadores e dispositivos
4. Atualize esta documentação

---

**SINAGEM v1.0.0** - Módulo DataTable