How to add "No Record Found" in PrimeNG Datatable When data is not there?

Question

I searched on primeNG official site, and I found that there is no such attribute like emptyMessage= "No Record Found" for data table in PrimeNG ref.http://www.primefaces.org/primeng/#/datatable

So when there was no data in my data table, It is not showing me any message.

<p-dataTable  #datatable [value]="jobData" [rows]="20" [paginator]="true"
            [responsive]="true" selectionMode="single"><--emptyMessage="" not working here as attribute :(
    <p-column expander="true" styleClass="icon"></p-column>
            <p-column field="finOrVin" styleClass="vinfin" header="header" sortable="custom" (sortFunction)="sort($event)">
            <p-column field="state"  styleClass="status" header="Status"  sortable="custom" (sortFunction)="sort($event)">
            </p-column>
    </p-dataTable>

score 23 · Answer 1 · edited Sep 09 '19 at 11:13

23

You just put after ng-template pTemplate="body" tag with this code:

<ng-template pTemplate="emptymessage" let-columns>
  <tr>
    <td [attr.colspan]="columns.length">
       No records found
    </td>
  </tr>
</ng-template>

edited Sep 09 '19 at 11:13

Yogesh Prajapati

4,770
2
36
77

answered Jan 29 '19 at 17:22

jupiter zhuo

231
2
3

So how can I keep the header table ? – Hoang NK Sep 26 '19 at 02:41
1

you can set colspan to 100% in order to fill all columns of the table if you don't have column s object. – Mohammad Reza Rahimi Mar 07 '20 at 10:41

score 11 · Answer 2 · answered Dec 04 '17 at 19:57

According to the official documentation this is now available as a template.

When there is no data, DataTable displays a message text defined using the emptyMessage property where as custom content can be provided using emptymessage template.

<p-dataTable [value]="cars" [responsive]="true">
  <p-column field="vin" header="Vin"></p-column>
  <p-column field="year" header="Year"></p-column>
  <p-column field="brand" header="Brand"></p-column>
  <p-column field="color" header="Color"></p-column>
  <ng-template pTemplate="emptymessage">
    Custom content goes here
  </ng-template>
</p-dataTable>

Guntram · Answer 3 · 2017-07-20T11:12:46.457

The Datatable takes a variable of type string for this attribute:

<p-dataTable ... [emptyMessage]="myVariable" ...>

And the controller puts the string into the variable (i.e. using ngx-translate):

class ... {
    public myVariable;
    ngOnInit() {
        this.translateService.get('MY_TRANSLATION').subscribe(
            (translationString) => { 
                this.myVariable = translationString;
            }
        );
    ...
}

EDIT: I came across the solution to do it directly in the template. (omit the brackets for the attribute):

emptyMessage="{{ 'MY_TRANSLATION' | translate }}"

score 6 · Accepted Answer · answered Jun 27 '16 at 17:43

According to the documentation, there is indeed no such tag on the DataTable. I had the same problem/question. And I solved it by creating a second element that I show instead of the DataTable. So adding a condition like *ngIf="jobData.length==0".

For example:

<p-dataTable #datatable [value]="jobData" [rows]="20" [paginator]="true"
        [responsive]="true" selectionMode="single" *ngIf="jobData.length>0">
    <p-column expander="true" styleClass="icon"></p-column>
    <p-column field="finOrVin" styleClass="vinfin" header="header" sortable="custom" (sortFunction)="sort($event)"></p-column>
    <p-column field="state"  styleClass="status" header="Status"  sortable="custom" (sortFunction)="sort($event)"></p-column>
</p-dataTable>
<div *ngIf="jobData.length==0">
    No values to display here
</div>

You could add a feature request for this? In my case, the "No values to display here" option is actually better because then I don't have the headers of the datalist. While you will probably have the headers if you use a tag.

@SarveshYadav Maybe you can then look into 1 special record you add in those case. Where you put only that one record in the table if there are no other records. But I have no sample code for that — ndsmyter, Jun 28 '16 at 07:39

score 0 · Answer 5 · edited Sep 04 '18 at 12:23

0

I found a more elegant and stylish solution through the Controller: push into the data source array a "fake" record with the first field set to "no data found", because it's shown inside the table and not overridden with a white line in the table itself (see the attached picture).

edited Sep 04 '18 at 12:23

Parker

7,244
12
70
92

answered Sep 04 '18 at 11:54

luca

11
3

How to add "No Record Found" in PrimeNG Datatable When data is not there?

5 Answers5