po-angular
po-angular copied to clipboard
Virtual Scroll no componente Po-Table
Descrição da melhoria
O Virtual Scroll exibe uma lista virtual "infinita". Por motivos de desempenho, nem todo item da lista é renderizado de uma vez. Em vez disso, um pequeno subconjunto de registros (o suficiente para preencher a janela de visualização) é renderizado e reutilizado conforme o usuário rola.
Caso de uso
Uma lista que contém muitos itens (e não pode haver paginação por questões de negócio) precisa ser renderizada na tela sem travamentos da UI. Hoje ao renderizar muitos itens de uma lista, a UI congela evitando a interação do usuário. Após renderização, a tela fica lenta com a utilização, o scroll da tabela fica lento. Ao selecionar (checkbox) um item, a seleção também não é instantânea. Isso porque o DOM fica enorme.
Informações adicionais
- Exemplos de uso:
<!-- trocar o *ngFor pela API CDK -->
<cdk-virtual-scroll-viewport itemSize="50">
<div *cdkVirtualFor="let item of items">
{{ item }}
</div>
</cdk-virtual-scroll-viewport>
<!-- Module -->
import { ScrollingModule } from '@angular/cdk/scrolling';
- Instruções de uso: O usuário poderá escolher se quer usar o virtual scroll ou não.