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>
Pagination is enabled by setting paginator property to true and defining a rows property to specify the number of rows per page.
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.
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.
(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.
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>
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With