Fork: Código fonte extraído de @senior-hcm-service-tower/hst-simple-table e mantido independentemente para o contexto ERP.

ERP Service Tower Senior - Simple Table

Componente desenvolvido para uso em telas customizadas e BPMs pelo time de serviços customizados ERP da Senior Sistemas.

Requisitos

• Angular: 18.0.1
• primeflex: 3.3.1
• primeng: 17.18.9

Instalação

npm install @senior-erp-service-tower/hst-simple-table

Visão Geral

O componente hst-simple-table exibe uma tabela simples paginada (sem seleção) com suporte a lazy loading por paginação. Ideal para exibir listagens somente leitura com navegação entre páginas.

Parâmetros de Entrada (@Input)

| Input | Tipo | Valor Padrão | Descrição | | --- | --- | --- | --- | | records | Record[] | [] | Lista de registros exibidos na tabela | | columnsConfig | ColumnConfig[] | [] | Configuração das colunas (header, campo, tamanho) | | loading | boolean | false | Ativa o estado de loading (skeleton) na tabela | | rowsPage | number | 10 | Quantidade de registros exibidos por página |

Eventos de Saída (@Output)

| Output | Tipo emitido | Descrição | | --- | --- | --- | | onLazyLoad | RequestData | Emitido ao mudar de página, informando o offset para buscar novos dados |

Modelos Exportados

ColumnConfig

Define a configuração de cada coluna da tabela.

export interface ColumnConfig {
  field: string;   // Nome da propriedade no objeto de dados
  header: string;  // Título exibido no cabeçalho da coluna
  size?: string;   // Largura da coluna (ex: '40%', '200px')
}

Record

Interface genérica para os registros da tabela.

export interface Record {
  [key: string]: string | number | boolean;
}

RequestData

Interface emitida no evento onLazyLoad.

export interface RequestData {
  skip: number;  // Offset da página atual (ex: 0, 10, 20...)
}

Exemplos de Uso

1. Uso básico com dados estáticos

<hst-simple-table
  [records]="solicitacoes"
  [columnsConfig]="colunas">
</hst-simple-table>

import { Component } from '@angular/core';
import { SimpleTableComponent, ColumnConfig, Record } from '@senior-erp-service-tower/hst-simple-table';

@Component({
  selector: 'app-lista-solicitacoes',
  standalone: true,
  imports: [SimpleTableComponent],
  template: `
    <hst-simple-table
      [records]="solicitacoes"
      [columnsConfig]="colunas">
    </hst-simple-table>
  `
})
export class ListaSolicitacoesComponent {
  colunas: ColumnConfig[] = [
    { field: 'protocolo', header: 'Protocolo', size: '20%' },
    { field: 'solicitante', header: 'Solicitante', size: '40%' },
    { field: 'data', header: 'Data', size: '20%' },
    { field: 'status', header: 'Status', size: '20%' }
  ];

  solicitacoes: Record[] = [
    { protocolo: '001', solicitante: 'João Silva', data: '01/01/2024', status: 'Aprovado' },
    { protocolo: '002', solicitante: 'Maria Santos', data: '02/01/2024', status: 'Pendente' },
    { protocolo: '003', solicitante: 'Pedro Costa', data: '03/01/2024', status: 'Rejeitado' }
  ];
}

2. Com lazy loading (paginação server-side)

import { Component, OnInit } from '@angular/core';
import { SimpleTableComponent, ColumnConfig, Record, RequestData } from '@senior-erp-service-tower/hst-simple-table';

@Component({
  selector: 'app-lista-paginada',
  standalone: true,
  imports: [SimpleTableComponent],
  template: `
    <hst-simple-table
      [records]="registros"
      [columnsConfig]="colunas"
      [loading]="carregando"
      [rowsPage]="10"
      (onLazyLoad)="aoMudarPagina($event)">
    </hst-simple-table>
  `
})
export class ListaPaginadaComponent implements OnInit {
  registros: Record[] = [];
  carregando = false;

  colunas: ColumnConfig[] = [
    { field: 'matricula', header: 'Matrícula', size: '20%' },
    { field: 'nome', header: 'Nome', size: '50%' },
    { field: 'departamento', header: 'Departamento', size: '30%' }
  ];

  ngOnInit(): void {
    this.carregarDados(0);
  }

  aoMudarPagina(event: RequestData): void {
    this.carregarDados(event.skip);
  }

  private carregarDados(skip: number): void {
    this.carregando = true;
    this.service.buscar(10, skip).subscribe(resultado => {
      this.registros = resultado.items;
      this.carregando = false;
    });
  }
}

3. Customizando quantidade de registros por página

<hst-simple-table
  [records]="registros"
  [columnsConfig]="colunas"
  [rowsPage]="5"
  (onLazyLoad)="aoMudarPagina($event)">
</hst-simple-table>

Comportamento

• Paginação: A tabela exibe paginator nativo do PrimeNG com navegação entre páginas
• Skeleton Loading: Quando loading = true, a tabela exibe skeletons nas células
• Tooltip: Cada célula exibe tooltip com o conteúdo completo ao passar o mouse
• Mensagem vazia: Quando não há registros, exibe "Não há registros"
• Truncamento: Textos longos são truncados com ellipsis
• Lazy Load: O evento onLazyLoad é disparado sempre que o usuário muda de página, enviando o skip (offset) correspondente

Diferença entre Simple Table e Selectable Table

| Característica | Simple Table | Selectable Table | | --- | --- | --- | | Seleção de registros | Não | Sim (checkbox) | | Tipo de scroll | Paginação | Virtual scroll | | Evento de seleção | Não | onSelectedChange | | Caso de uso | Listagens somente leitura | Seleção múltipla de itens |