I have a datatable with 11 columns. I'm using the toggleable columns feature. I would like to show the 11 column selection options, but initially leave only 4 selected. I studied several options of the MultiSelect component, but I did not find an answer to my question.
Follow a few pieces of my codes:
Code: Select all
colunasSelecionaveis: any[];
opcoesColunas: SelectItem[];
definirColunasSelecionaveis() {
this.colunasSelecionaveis = [
{ field: 'identificador1', header: 'Descrição Terminal', sortable: true },
{ field: 'qtdeComandosSemRespDnp3', header: 'Comandos s/ Resposta', sortable: true, styleClass: 'col-centralizada' },
{ field: 'qtdeFalhaComSat', header: 'Falhas Comun. Satélite', sortable: true, styleClass: 'col-centralizada' },
{ field: 'nivelSinal', header: 'Nível Sinal', sortable: true, styleClass: 'col-centralizada' },
{ field: 'comunicacaoHabilitada', header: 'Comun. Habilit.', sortable: true, styleClass: 'col-centralizada' },
{ field: 'municipio.uf', header: 'UF', styleClass: 'col-uf' },
{ field: 'statusInstalacao', header: 'Status Instalação', sortable: true, styleClass: 'col-centralizada' },
{ field: 'dataNivelSinal', header: 'Data/Hora Nível Sinal', sortable: true, styleClass: 'col-dataHoraComAnoAbreviado' },
{ field: 'datatUltimoEnvioSatUtc', header: 'Data/Hora Último Envio Sat.', sortable: true, styleClass: 'col-dataHoraComAnoAbreviado' },
{ field: 'dataUltimoRecebimentoSatUtc', header: 'Data/Hora Receb. Sat.', sortable: true, styleClass: 'col-dataHoraComAnoAbreviado' },
{
field: 'dataUltRespostaDnp3Utc', header: 'Data/Hora Última Resposta Remota', sortable: true,
styleClass: 'col-dataHoraComAnoAbreviado'
}
];
this.popularComboColunasSelecionaveis();
}
popularComboColunasSelecionaveis() {
this.opcoesColunas = [];
for (let i = 0; i < this.colunasSelecionaveis.length; i++) {
this.opcoesColunas.push({ label: this.colunasSelecionaveis[i].header, value: this.colunasSelecionaveis[i] });
}
}
Code: Select all
<p-dataTable [value]="devices" [responsive]="true" emptyMessage="Nenhum equipamento encontrado" [paginator]="true" [rows]="filtro.itensPorPagina"
[rowsPerPageOptions]="[5,10,15,20,25]" selectionMode="single" [(selection)]="deviceSelecionado" [lazy]="true" [totalRecords]="totalRegistros"
(onLazyLoad)="aoMudarPagina($event)" exportFilename="equipamentos" #tabela>
<p-header>
<div style="text-align:right">
<p-multiSelect [options]="opcoesColunas" [(ngModel)]="colunasSelecionaveis" defaultLabel="-- Selecione --" maxSelectedLabels="2"
selectedItemsLabel="{0} colunas selecionadas">
</p-multiSelect>
</div>
</p-header>
<!-- COLUNAS FIXAS -->
<p-column field="numeroRemota" header="Nº Remota" [sortable]="true" styleClass="col-numeroRemota"></p-column>
<!-- COLUNAS SELECIONÁVEIS -->
<p-column *ngFor="let coluna of colunasSelecionaveis" [field]="coluna.field" [header]="coluna.header" [sortable]="coluna.sortable"
[styleClass]="coluna.styleClass">
...
...