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.


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 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($, '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>
            <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">
                        <th>Nombre Equipo</th>
                        <th>Fecha AD</th>
                        <th>Fecha EPO</th>
                        <th>Fecha Inventario</th>
                        <th>Direccion IP</th>
                        <th>Direccion MAC</th>
                        <th>Sistema Operativo</th>
                        <th>Arquitectura SO</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>
                <ng-template pTemplate = "body" let-equipo>
                            <button class="btn btn-secondary btn-sm">
                                <i class="material-icons">open_in_new</i>
                            <button class="btn btn-danger btn-sm">
                                <i class="material-icons">delete</i>


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';

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

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

    equipos : Equipo[];

    first = 0;

    rows = 6;

  ngOnInit(): void {

  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;

      res => {
        this.equipos = res
      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.