# Data Table Component

Um componente de tabela reutilizável com recursos avançados e otimização mobile.

## Características

- Ordenação de colunas
- Filtros por coluna expansíveis
- Paginação otimizada para mobile
- Reordenação de colunas por drag and drop
- Configuração flexível
- Estilo Material Design
- **Responsividade Mobile Avançada**
- **Layout Edge-to-Edge em Mobile**
- **Header Reorganizado em Duas Linhas**
- **Paginação Compacta**

## Otimizações Mobile (≤ 768px)

### Header da Tabela
O header é automaticamente reorganizado em duas linhas para melhor aproveitamento do espaço:

```
┌─────────────────────────────────────┐
│ [🔍 Busca Global - 80%] [Filtros-20%]│ ← Linha 1
│ [Req] [Colunas] [Agrupar] [5▼] [Exp] │ ← Linha 2  
└─────────────────────────────────────┘
```

**Funcionalidades:**
- **Busca Global**: 80% da largura para máximo aproveitamento
- **Botões Compactos**: Textos abreviados ("Col", "Grup", "Exp")
- **Layout Edge-to-Edge**: Sem bordas laterais
- **Filtros Toggle**: Expansão/contração dos filtros por coluna

### Paginação Mobile
Layout compacto em linha única:

```
┌─────────────────────────────────────┐
│ 1-5 de 5    [◀] [1] [2] [3] [▶]     │ ← Linha única
└─────────────────────────────────────┘
```

**Melhorias:**
- **Texto Compacto**: "1-5 de 5" ao invés de texto longo
- **Altura Reduzida**: padding otimizado
- **Alinhamento Inteligente**: Info à esquerda, controles à direita
- **Navegação Touch-Friendly**: Botões adequados para toque

## Inputs e Outputs

### Inputs Principais
```typescript
@Input() config!: TableConfig;           // Configuração da tabela
@Input() data: any[] = [];               // Dados a serem exibidos
@Input() loading: boolean = false;       // Estado de carregamento
@Input() tableId!: string;               // ID para persistência de preferências
@Input() serverSidePagination = true;    // Paginação no servidor
@Input() totalDataItems = 0;             // Total de itens (server-side)
@Input() requestFilters: RequestFilter[] = []; // Filtros externos
```

### Outputs Principais
```typescript
@Output() sortChange = new EventEmitter<{field: string, direction: 'asc'|'desc'}>();
@Output() pageChange = new EventEmitter<{page: number, pageSize: number}>();
@Output() filterChange = new EventEmitter<{[key: string]: string}>();
@Output() columnsChange = new EventEmitter<Column[]>();
@Output() actionClick = new EventEmitter<{action: string, data: any}>();
```

## Como usar

1. Importe o componente:
```typescript
import { DataTableComponent, TableConfig } from './shared/components/data-table/data-table.component';
```

2. Configure a tabela:
```typescript
const config: TableConfig = {
  columns: [
    { field: 'codigo', header: 'Código', sortable: true, filterable: true },
    { field: 'nome', header: 'Nome', sortable: true, filterable: true },
    // Adicione colunas adicionais conforme necessário
  ],
  pageSize: 10,
  pageSizeOptions: [5, 10, 25, 50],
  showFirstLastButtons: true
};
```

3. Use o componente no template:
```html
<app-data-table
  [config]="config"
  [data]="dados"
  (sortChange)="onSort($event)"
  (pageChange)="onPage($event)"
  (filterChange)="onFilter($event)"
  (columnsChange)="onColumnsChange($event)">
</app-data-table>
```

## Exemplo de uso em um componente

```typescript
import { Component } from '@angular/core';
import { DataTableComponent, TableConfig } from './shared/components/data-table/data-table.component';

@Component({
  selector: 'app-exemplo',
  template: `
    <app-data-table
      [config]="config"
      [data]="dados"
      (sortChange)="onSort($event)"
      (pageChange)="onPage($event)"
      (filterChange)="onFilter($event)"
      (columnsChange)="onColumnsChange($event)">
    </app-data-table>
  `,
  imports: [DataTableComponent],
  standalone: true
})
export class ExemploComponent {
  config: TableConfig = {
    columns: [
      { field: 'codigo', header: 'Código', sortable: true, filterable: true },
      { field: 'nome', header: 'Nome', sortable: true, filterable: true }
    ]
  };

  dados = [
    { codigo: '001', nome: 'Exemplo 1' },
    { codigo: '002', nome: 'Exemplo 2' }
  ];

  onSort(event: any) {
    // Implemente a lógica de ordenação
  }

  onPage(event: any) {
    // Implemente a lógica de paginação
  }

  onFilter(event: any) {
    // Implemente a lógica de filtro
  }

  onColumnsChange(event: any) {
    // Implemente a lógica de mudança de colunas
  }
}
```