Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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>
like image 969
Sarvesh Yadav Avatar asked Jun 25 '16 07:06

Sarvesh Yadav


People also ask

How do you add pagination to PrimeNG table?

Pagination is enabled by setting paginator property to true and defining a rows property to specify the number of rows per page.

How do I add rows to PrimeNG table?

In the component where the PrimeNG p-table is used, a button is added at the bottom of the p-table. The button has a pAddRow directive, 'table' and 'newRow' @Input are assigned values. When the 'Add' button is clicked, a new row is added at the bottom of the table as shown below.

What is rowData PrimeNG?

let-item="rowData" in HTML is the equivalent of let item = rowData in Typescript. It's used in Angular templates <ng-template> . let-col use the implicit declaration, which would be let col = col . The variables rowData and col are declared by the primeNG module.

How do you expand all rows in PrimeNG table?

(onRowExpand) and (onRowCollapse) : These two methods are really helpful to toggle the (+)(-) icon when user expands or collapses all the rows manually. That's all about expand/collapse all rows.


2 Answers

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>
like image 170
jupiter zhuo Avatar answered Sep 28 '22 16:09

jupiter zhuo


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.

like image 29
ndsmyter Avatar answered Sep 28 '22 16:09

ndsmyter