testes/Modulos Angular/projects/idt_app/docs/data-table

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

@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

@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:

import { DataTableComponent, TableConfig } from './shared/components/data-table/data-table.component';

2. Configure a tabela:

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:

<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

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
  }
}