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

ERP Service Tower Senior - Selectable 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-selectable-table

Visão Geral

O componente hst-selectable-table exibe uma tabela com virtual scroll, seleção múltipla via checkbox (individual e "selecionar todos") e suporte a lazy loading. Ideal para listas grandes onde o usuário precisa selecionar um ou mais registros.

Parâmetros de Entrada (@Input)

| Input | Tipo | Valor Padrão | Descrição | | --- | --- | --- | --- | | records | Record[] | [] | Lista de registros exibidos na tabela | | selectedRecords | Record[] | [] | Lista de registros atualmente selecionados | | columnsConfig | ColumnConfig[] | [] | Configuração das colunas (header, campo, tamanho) | | loading | boolean | false | Ativa o estado de loading (skeleton) na tabela | | scrollHeight | string | '300px' | Altura da área de scroll da tabela | | totalRecords | number | 0 | Número total de registros (para virtual scroll) |

Eventos de Saída (@Output)

| Output | Tipo emitido | Descrição | | --- | --- | --- | | onSelectedChange | SelectedChange | Emitido sempre que a seleção é alterada (checkbox individual ou "selecionar todos") | | onLazyLoad | RequestData | Emitido quando o scroll atinge o fim dos dados carregados, solicitando mais registros |

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 para buscar os próximos registros
}

SelectedChange

Interface emitida no evento onSelectedChange.

export interface SelectedChange {
  selectedAll: boolean;  // true se "selecionar todos" foi marcado
  values: Record[];      // Lista dos registros selecionados
}

Exemplos de Uso

1. Uso básico

<hst-selectable-table
  [records]="colaboradores"
  [selectedRecords]="selecionados"
  [columnsConfig]="colunas"
  [totalRecords]="totalColaboradores"
  (onSelectedChange)="aoAlterarSelecao($event)">
</hst-selectable-table>

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

@Component({
  selector: 'app-selecao-colaboradores',
  standalone: true,
  imports: [SelectableTableComponent],
  template: `
    <hst-selectable-table
      [records]="colaboradores"
      [selectedRecords]="selecionados"
      [columnsConfig]="colunas"
      [totalRecords]="total"
      [loading]="carregando"
      scrollHeight="400px"
      (onSelectedChange)="aoAlterarSelecao($event)"
      (onLazyLoad)="aoCarregarMais($event)">
    </hst-selectable-table>

    <p>Selecionados: {{ selecionados.length }}</p>
  `
})
export class SelecaoColaboradoresComponent {
  colaboradores: Record[] = [];
  selecionados: Record[] = [];
  carregando = false;
  total = 0;

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

  aoAlterarSelecao(event: SelectedChange): void {
    this.selecionados = event.values;
    console.log('Selecionou todos?', event.selectedAll);
    console.log('Registros selecionados:', event.values);
  }

  aoCarregarMais(event: { skip: number }): void {
    this.carregando = true;
    this.service.buscar(event.skip).subscribe(resultado => {
      this.colaboradores = [...this.colaboradores, ...resultado.items];
      this.total = resultado.total;
      this.carregando = false;
    });
  }
}

2. Com lazy loading (virtual scroll)

O componente utiliza virtual scroll com lazy loading. Quando o usuário rola até o final dos dados carregados, o evento onLazyLoad é emitido com o skip correspondente.

async ngOnInit(): Promise<void> {
  await this.carregarDados(0);
}

async carregarDados(skip: number): Promise<void> {
  this.carregando = true;
  const resultado = await this.service.buscar(10, skip);

  // Concatena novos registros aos existentes
  this.colaboradores = [...this.colaboradores, ...resultado.items];
  this.total = resultado.total;
  this.carregando = false;
}

aoCarregarMais(event: { skip: number }): void {
  this.carregarDados(event.skip);
}

3. Tabela com dados estáticos

colaboradores: Record[] = [
  { matricula: 1, nome: 'João da Silva', cargo: 'Analista' },
  { matricula: 2, nome: 'Maria Santos', cargo: 'Coordenadora' },
  { matricula: 3, nome: 'Pedro Costa', cargo: 'Desenvolvedor' }
];

total = 3;

Comportamento

• Virtual Scroll: A tabela utiliza virtual scroll com item size de 46px para otimizar a renderização de listas grandes
• Skeleton Loading: Quando loading = true, a tabela exibe skeletons nas células
• Seleção: Checkbox individual em cada linha e checkbox global no header
• 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