[efdeiasoliveira]

po-table

#2978

---

PR Checklist [Revisor]

• Padrão de Commit (Coeso, de acordo com o que está sendo realizado)
• Código (Boas práticas, nome de variavéis/métodos, etc.)
• Testes unitários (Cobre a situação implementada e coverage está mantido)
• Documentação (Clara, objetiva e com exemplos caso necessário)
• Samples (A implementação possui exemplo no Labs/Caso de uso)
• Rodado em navegadores suportados (Chrome, FireFox, Edge)

Qual o comportamento atual?

O cabeçalho das colunas do po-table não aceita nenhum conteúdo além do título. Os templates que existem hoje (p-table-column-template, p-table-cell-template e p-table-row-template) atuam só nas linhas da tabela.

Na prática, quem precisa de algo no cabeçalho, como uma pesquisa por coluna (bem comum em telas de consulta), acaba tendo que trocar o po-table por uma tabela própria ou mexer no DOM do componente. Foi o que aconteceu com a gente numa ferramenta de consultas SQL: os usuários queriam filtrar direto pela coluna, como fazem no DBeaver, e não havia como fazer isso pelo po-table.

Qual o novo comportamento?

Criei a diretiva p-table-header-template, seguindo a mesma linha das diretivas de template que já existem. O conteúdo do template aparece logo abaixo do título da coluna:

<po-table [p-columns]="columns" [p-items]="items">
  <!-- específico para a coluna "status" -->
  <ng-template p-table-header-template p-property="status">
    <span>Use o filtro avançado</span>
  </ng-template>

  <!-- genérico para as demais colunas -->
  <ng-template p-table-header-template let-column>
    <input type="text" (input)="onFilter(column.property, $event)" />
  </ng-template>
</po-table>

Alguns pontos sobre como fiz:

• Com p-property, o template vale só para aquela coluna. Sem p-property, vale para todas as colunas que não têm um template específico. O específico tem prioridade.
• O contexto do template recebe a coluna ($implicit), então dá para usar column.property, column.label etc.
• O conteúdo é renderizado nos quatro pontos onde o <th> das colunas é montado (com e sem drag and drop, com e sem virtual scroll). Por isso funciona em qualquer combinação de p-height, p-virtual-scroll e p-draggable.
• O wrapper do template para a propagação de click, mousedown e touchstart. Assim, clicar ou digitar dentro do template não ordena a coluna nem inicia o arraste. Clicar no título continua ordenando normalmente.
• A diretiva já segue o padrão novo do projeto (input() com signals, inject(), sem any), mas foi declarada no PoTableModule junto das outras diretivas da tabela, para manter a consistência do componente.
• O wrapper usa a classe po-table-header-template. Não mexi no @po-ui/style; a ideia é que o espaçamento fique a cargo de quem usa. Se preferirem um estilo padrão, posso abrir o ajuste no repositório de estilos também.

Também atualizei a descrição do po-table citando o novo template e adicionei o sample sample-po-table-header-template, que mostra a pesquisa por coluna funcionando.

Simulação

• Pelo sample "PO Table - Header Template" na documentação do po-table: cada coluna mostra uma caixinha de pesquisa, e a coluna status mostra um texto próprio (template específico). Digitar na caixinha filtra os itens, e clicar dentro dela não ordena a coluna.
• Testes unitários novos:
  • po-table.component.spec.ts: getHeaderTemplate (template específico, genérico e ausente);
  • po-table-header-template.directive.spec.ts: criação da diretiva e leitura do p-property;
  • po-table-header-template.integration.spec.ts: renderiza um po-table de verdade e confere que o template aparece no cabeçalho, que o específico tem prioridade, que clicar dentro do template não ordena e que clicar no título continua ordenando.

Observações

Já validamos essa versão (gerada a partir da v21.10.0) numa aplicação nossa de consultas SQL, com pesquisa por coluna, ordenação via p-sort-by e p-draggable ligados ao mesmo tempo, e o comportamento ficou bem estável.

Rodando a suíte completa do po-table localmente (Windows + ChromeHeadless), alguns testes de deleteItems/changesAfterDelete falham com Cannot read properties of undefined (reading 'nativeElement') e o navegador desconecta. Isso acontece igual na v21.10.0 sem nenhuma alteração minha, então parece algo do ambiente local. Achei melhor avisar.

Um exemplo de uso real, numa tela de consultas SQL: a lupa no cabeçalho da coluna # mostra ou esconde uma caixinha de pesquisa embaixo de cada título (template genérico + template específico via p-property), junto com p-sort e p-draggable.

[github-actions]

🔎 Análise de impacto

Risco estimado: 🟡 Médio · Arquivos: 11 (+379/-3)

Pontos de atenção

• 🆕 po-table: nova(s) propriedade(s) → p-property

Unidades alteradas

Unidade	Tipo de mudança	Consumidores diretos	Impacto total	Risco
po-table	exports/módulos, documentação, testes, API pública, template, lógica, samples	po-chart, po-lookup	4	🟡 Médio — altera exports/módulos

Componentes impactados

Diretos (2): po-chart, po-lookup

Indiretos (2)

po-dynamic, po-field

Onde testar

• po-table
• po-chart
• po-lookup

Arquivos por unidade

• po-table: components/po-table/index.ts, components/po-table/po-table-base.component.ts, components/po-table/po-table-header-template/po-table-header-template.directive.spec.ts, components/po-table/po-table-header-template/po-table-header-template.directive.ts, components/po-table/po-table-header-template/po-table-header-template.integration.spec.ts, components/po-table/po-table.component.html, components/po-table/po-table.component.spec.ts, components/po-table/po-table.component.ts, components/po-table/po-table.module.ts, components/po-table/samples/sample-po-table-header-template/sample-po-table-header-template.component.html, components/po-table/samples/sample-po-table-header-template/sample-po-table-header-template.component.ts

_{Gerado automaticamente a partir do grafo de imports e seletores da branch base · PR #2979.}