PrimeNG Table Does Not Order Data Well

  angular, primeng, primeng-datatable

I have a PrimeNG Table in my Angular 10 project and the problem is that the data and headers are not ordered well. I Add a scroll to see if it solved the problem and it did not work, in a previous project I had a similar amount of data and I used DataTables from npm’s angular-datatables package and I had no problem.

Image:

enter image description here

Code HTML:

<div class="row justify-content-md-center mt-5 mr-5">
<div class="container d-flex justify-content-center"> 
    <div class="col-md-8">
        <div class="cardForm">
            <div class="card">
                <div class="card-body">
                    <h2>Ingresar Equipo</h2>
                    
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-9 ml-5">
        <input pInputText type="text" placeholder="Buscar por Nombre de Equipo" class="p-column-filter mr-5" (input)="datatable.filter($event.target.value, 'nombre', 'startsWith')">
        <div class="p-mb-3">
            <p-button type="button" icon="pi pi-chevron-left" (click)="prev()" [disabled]="isFirstPage()" styleClass="p-button-text"></p-button>
            <p-button type="button" icon="pi pi-refresh" (click)="reset()" styleClass="p-button-text"></p-button>
            <p-button type="button" icon="pi pi-chevron-right" (click)="next()" [disabled]="isLastPage()" styleClass="p-button-text"></p-button>
        </div>
            <p-table #datatable [value] = "equipos" [paginator] = "true" [rows] = "rows" [showCurrentPageReport]="true" [(first)]="first"
                currentPageReportTemplate="Showing {first} to {last} of {totalRecords} entries" [scrollable]="true" scrollHeight="100%" scrollWidth="100%">
                <ng-template pTemplate = "header">
                    <tr>
                        <th>ID</th>
                        <th>Rotutlo</th>
                        <th>Nombre Equipo</th>
                        <th>Serie</th>
                        <th>Fecha AD</th>
                        <th>Fecha EPO</th>
                        <th>Fecha Inventario</th>
                        <th>Estado</th>
                        <th>Direccion IP</th>
                        <th>SubNet</th>
                        <th>Direccion MAC</th>
                        <th>Chasis</th>
                        <th>Dominio</th>
                        <th>Sistema Operativo</th>
                        <th>Arquitectura SO</th>
                        <th>Fabricante</th>
                        <th>Modelo</th>
                        <th>Obsolencia</th>
                        <th>Procesador</th>
                        <th>Velocidad Procesador</th>
                        <th>Capacidad Disco Duro</th>
                        <th>Capacidad Disponible Disco Duro</th>
                        <th>Porcentaje Disponible Disco Duro</th>
                        <th>Memoria RAM</th>
                        <th>Modificar/Eliminar</th>
                    </tr>
                </ng-template>
                <ng-template pTemplate = "body" let-equipo>
                    <tr>
                        <td>{{equipo.idEquipo}}</td>
                        <td>{{equipo.rotulo}}</td>
                        <td>{{equipo.nombre}}</td>
                        <td>{{equipo.fechaad}}</td>
                        <td>{{equipo.fechaepo}}</td>
                        <td>{{equipo.fechainventario}}</td>
                        <td>{{equipo.estado}}</td>
                        <td>{{equipo.direccionip}}</td>
                        <td>{{equipo.subnet}}</td>
                        <td>{{equipo.direccionmac}}</td>
                        <td>{{equipo.chasis}}</td>
                        <td>{{equipo.dominio}}</td>
                        <td>{{equipo.sistemaoperativo}}</td>
                        <td>{{equipo.arquitecturaso}}</td>
                        <td>{{equipo.fabricante}}</td>
                        <td>{{equipo.modelo}}</td>
                        <td>{{equipo.obsolencia}}</td>
                        <td>{{equipo.procesador}}</td>
                        <td>{{equipo.velocidadprocesador}}</td>
                        <td>{{equipo.capacidaddiscoduro}}</td>
                        <td>{{equipo.capacidaddiscodurodisponible}}</td>
                        <td>{{equipo.porcentajedisponiblediscoduro}}</td>
                        <td>{{equipo.memoriaram}}</td>
                        <td>
                            <button class="btn btn-secondary btn-sm">
                                <i class="material-icons">open_in_new</i>
                            </button>
                            <button class="btn btn-danger btn-sm">
                                <i class="material-icons">delete</i>
                            </button>
                        </td>
                    </tr>
                </ng-template>
            </p-table>
    </div>
</div>

Component:

import { Component, OnInit } from '@angular/core';
import { EquipoService } from '../../services/equipo.service'
import { Equipo }from '../../models/equipo'
import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
import { FormBuilder, FormGroup, NgForm} from '@angular/forms';


@Component({
  selector: 'app-equipo',
  templateUrl: './equipo.component.html',
  styleUrls: ['./equipo.component.scss']
})
export class EquipoComponent implements OnInit {

  constructor(
    private equipoService : EquipoService,
    private fromBuilder: FormBuilder,
    private modalService: NgbModal
  ) { }

    equipos : Equipo[];

    first = 0;

    rows = 6;

  ngOnInit(): void {
    this.getEquipments();
  }


  next() {
    this.first = this.first + this.rows;
  }

  prev() {
    this.first = this.first - this.rows;
  }

  reset() {
    this.first = 0;
  }

  isLastPage(): boolean {
    return this.equipos ? this.first === (this.equipos.length - this.rows): true;
  }

  isFirstPage(): boolean {
    return this.equipos ? this.first === 0 : true;
}

  getEquipments(){
    this.equipoService.getEquipments().subscribe(
      res => {
        this.equipos = res
      },
      err => {
        console.log(err);
      }
    )
  }

}

I have not applied any css to the template.

How can I solve this?

Beforehand thank you very much.

Source: Angular Questions

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.