156 lines
4.7 KiB
Markdown
156 lines
4.7 KiB
Markdown
# 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
|
|
}
|
|
}
|
|
``` |