# Header Filter System - Documentação

## Descrição
Sistema de filtro personalizado reutilizável para tabelas que permite filtros interativos nos headers das colunas.

## Arquivos Principais

### 1. `js/header-filter.css`
Arquivo CSS que estiliza o sistema de filtro
- Cores padrão: #2b5d85 para o menu
- Responsivo para mobile
- Suporta animações suaves

### 2. `js/header-filter.js`
Arquivo JavaScript que implementa a lógica do filtro
- Auto-inicializa ao carregar a página
- Suporta múltiplos filtros simultâneos
- Inclui pesquisa dentro do filtro

## Como Usar

### 1. Incluir os arquivos no seu template/página

```html
<!-- Adicionar no HEAD ou antes do footer -->
<link rel="stylesheet" href="../js/header-filter.css">
<script src="../js/header-filter.js"></script>
```

### 2. Estrutura HTML da Tabela

Cada coluna que terá filtro deve ter a seguinte estrutura:

```html
<th>
    <div class='header-filter' data-col-name='nome_coluna'>
        <div style='display:flex;align-items:center;gap:8px;'>
            <button class='btn btn-sm btn-outline-secondary btn-filter-toggle' type='button' aria-expanded='false' title='Filtrar por Nome da Coluna'>
                <i class='material-symbols-outlined' style='font-size:16px'>filter_list</i>
            </button>
            <span class='header-title'>Nome da Coluna</span>
        </div>
        <div class='filter-menu' data-col-name='nome_coluna'></div>
    </div>
</th>
```

### 3. Atributos Importantes

- **`data-col-name`**: Deve corresponder ao nome/id da coluna (usado para identificação)
- **`title`** no botão: Descrição do que se filtra (melhor UX)
- **`id="datatable-tabletools"`**: ID da tabela (obrigatório para auto-inicialização)

### 4. Funcionalidades

- ✅ Filtro dropdown por coluna
- ✅ Múltiplos filtros simultâneos
- ✅ Pesquisa/busca dentro do filtro
- ✅ Botão "Todos" para selecionar todos
- ✅ Botão "Limpar" para limpar filtros
- ✅ Contagem de registros por valor
- ✅ Valores ordenados alfabeticamente

## Exemplo Completo

```php
<?php
include ('select.php');
include ('../include/lista.php');
?>

<link rel="stylesheet" href="../js/header-filter.css">

<table class="table table-bordered" id="datatable-tabletools">
    <thead>
        <tr>
            <th>
                <div class='header-filter' data-col-name='status'>
                    <div style='display:flex;align-items:center;gap:8px;'>
                        <button class='btn btn-sm btn-outline-secondary btn-filter-toggle' type='button' title='Filtrar por Status'>
                            <i class='material-symbols-outlined' style='font-size:16px'>filter_list</i>
                        </button>
                        <span class='header-title'>Status</span>
                    </div>
                    <div class='filter-menu' data-col-name='status'></div>
                </div>
            </th>
            <th>
                <div class='header-filter' data-col-name='nome'>
                    <div style='display:flex;align-items:center;gap:8px;'>
                        <button class='btn btn-sm btn-outline-secondary btn-filter-toggle' type='button' title='Filtrar por Nome'>
                            <i class='material-symbols-outlined' style='font-size:16px'>filter_list</i>
                        </button>
                        <span class='header-title'>Nome</span>
                    </div>
                    <div class='filter-menu' data-col-name='nome'></div>
                </div>
            </th>
        </tr>
    </thead>
    <tbody>
        <?php while($row = pg_fetch_array($result)) { ?>
            <tr>
                <td><?php echo $row['status']; ?></td>
                <td><?php echo $row['nome']; ?></td>
            </tr>
        <?php } ?>
    </tbody>
</table>

<script src="../js/header-filter.js"></script>
```

## API Programática

O sistema também expõe uma API global para inicialização manual:

```javascript
// Inicializar filtro manualmente
HeaderFilter.init('minha-tabela-id');
```

## Customizações

### Cores
Editar `js/header-filter.css`:
- `#2b5d85` - Cor do menu de filtro
- `#1f6fb5` - Cor dos botões

### Espaçamento
Modificar as propriedades `gap`, `padding`, `margin` no CSS conforme necessário.

### Responsividade
O CSS já inclui breakpoint em `480px` para mobile. Personalizar conforme necessário.

## Compatibilidade

- ✅ Chrome/Edge (todas versões recentes)
- ✅ Firefox (todas versões recentes)
- ✅ Safari
- ✅ Mobile browsers
- ✅ IE 11+ (com polyfills)

## Performance

- ✅ Até 10.000 linhas - Performance excelente
- ✅ 10.000-50.000 linhas - Performance boa
- ✅ 50.000+ linhas - Considerar paginação

## Troubleshooting

### Filtro não aparece
- Verificar se `id="datatable-tabletools"` está presente na tabela
- Verificar se `.header-filter` está presente no `<th>`
- Verificar console do navegador para erros

### Filtro não funciona
- Verificar se `data-col-name` está definido
- Verificar se o conteúdo das células está correto
- Verificar se os arquivos CSS e JS estão carregados

### Performance lenta
- Considerar paginação da tabela
- Verificar número de linhas
- Usar índices no banco de dados

## Changelog

### v1.0 (Inicial)
- Implementação do sistema de filtro
- CSS responsivo
- API programática
