@luciomarques/ng-table-sort

Angular table sort — pequeno componente standalone para colocar um ícone de ordenação no cabeçalho da tabela (<th>). Cada clique alterna: ascendente → descendente → sem ordenação. Você trata a lógica (ordenar o array) no componente pai.

Feito para Angular 21+ (com peerDependencies alinhadas ao pacote). Precisa de Font Awesome (CSS global na app) para o ícone aparecer.

Instalar

npm install @luciomarques/ng-table-sort

Inclua o CSS do Font Awesome uma vez no projeto (por exemplo em angular.json → styles, ou o pacote @fortawesome/fontawesome-free).

Usar

1. Importe NgTableSort no componente que tem o template (standalone):

import { NgTableSort, SortEvent } from '@luciomarques/ng-table-sort';

@Component({
  standalone: true,
  imports: [NgTableSort],
  // ...
})
export class MinhaListaComponent {
  sortColumn = '';
  sortDirection = '';

  onSort(e: SortEvent) {
    this.sortColumn = e.column;
    this.sortDirection = e.direction;
    // ordenar seus dados aqui (e.direction: 'asc' | 'desc' | '')
  }
}

2. No HTML, dentro do <th>:

<th>
  Nome
  <ng-table-sort
    column="nome"
    label="Nome"
    activeColor="#1565c0"
    [activeColumn]="sortColumn"
    [activeDirection]="sortDirection"
    (sortChange)="onSort($event)">
  </ng-table-sort>
</th>

Para colunas numéricas, use tipo="number".

Cor quando ativo: opcionalmente passe activeColor com um hexadecimal ou nome CSS (ex.: activeColor="#1976d2"). Se não passar, vale a cor definida no estilo padrão do componente (vermelho na classe .nts-active).

Dica: depois de cada (sortChange), atualize sortColumn e sortDirection como no exemplo — assim o ícone e o estado ativo acompanham a coluna ordenada.

Resumo rápido

| Entrada | Função | |--------|--------| | column | ID da coluna (obrigatório) | | label | Texto do tooltip “Ordenar por …” | | tipo | 'string' (padrão) ou 'number' | | activeColor | Cor do ícone quando ativo (ex.: #0d47a1); opcional | | activeColumn / activeDirection | Estado atual vindo do pai | | (sortChange) | Evento com { column, direction } |

Busca comum: Angular sortable table header, npm table sort component, standalone sort icon th.