DataTable - Column Toggler

jQuery UI Widgets
Post Reply
brunoleonardo.as
Posts: 2
Joined: 06 Nov 2017, 14:12

06 Nov 2017, 16:30

Hello,

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">
          ...
          ...
I thank you.

Post Reply
  • Information
  • Who is online

    Users browsing this forum: No registered users and 1 guest