Search code examples
htmlangulartypescriptprimengprimeng-datatable

p-datatable primeng does not work, it is not shown


I am trying to work with the primeng datatable, I have imported the component but it is not shown and it does not show error

in the html

 <p-dataTable [value]="pessoas" scrollable="true" scrollHeight="200px" [rows]="20" virtualScroll="virtualScroll" [style]="{'margin-top':'30px'}"
                                [lazy]="true">
                                <p-header>Virtual Scrolling - 250K Rows</p-header>
                                <p-column field="codigo" header="codigo"></p-column>
                                <p-column field="nome" header="nome"></p-column>                                
                            </p-dataTable>

in the component

   public pessoas = [
        {codigo: '01', nome: 'Pessoas 1'},
        {codigo: '02', nome: 'Pessoas 2'},
        {codigo: '03', nome: 'Pessoas 3'},
        {codigo: '04', nome: 'Pessoas 4'},
        {codigo: '05', nome: 'Pessoas 5'}
    ];

in app.modules.ts have.

import {DataTableModule} from 'primeng/components/datatable/datatable';

Solution

  • PrimeNG needs to know the total number of records stored. Just add [totalRecords]="5" to your <p-datatable> tag.

    Also I think import should be like this:

    import { DataTableModule } from 'primeng/primeng';