I have a p-dataTable with nested p-dropdown components. On selection of a row, how can I get the selected values of the row? In the selection callback I receive the array backing each dropdown, and not the selection itself.
<p-dataTable [value]="affiliates" sortField="name" dataKey="id" selectionMode="single" (onRowSelect)="onRowSelect($event)" [rows]="15" [paginator]="true" [pageLinks]="10">
<p-column field="name" header="Name" sortable="true" [filter]="true" filterPlaceholder="Search" filterMatchMode="contains"></p-column>
<p-column field="package" header="Packages">
<ng-template let-affiliate="rowData" pTemplate type="body">
<p-dropdown [options]="affiliate.packages" dataKey="label"></p-dropdown>
</ng-template>
</p-column>
<p-column field="country" header="Countries">
<ng-template let-affiliate="rowData" pTemplate type="body">
<p-dropdown [options]="affiliate.countries" dataKey="label"></p-dropdown>
</ng-template>
</p-column>
<p-column field="device" header="Devices">
<ng-template let-affiliate="rowData" pTemplate type="body">
<p-dropdown [options]="affiliate.devices" dataKey="label"></p-dropdown>
</ng-template>
</p-column>
<p-column header="Actions">
</p-column>
</p-dataTable>
You can access the row data using the event.data property in the callback event.
<p-dataTable [value]="affiliates" sortField="name" dataKey="id" selectionMode="single" (onRowSelect)="onRowSelect($event)" [rows]="15" [paginator]="true" [pageLinks]="10">
<p-column field="name" header="Name" sortable="true" [filter]="true" filterPlaceholder="Search" filterMatchMode="contains"></p-column>
<p-column field="package" header="Packages">
<ng-template let-affiliate="rowData" pTemplate type="body">
<p-dropdown [(ngModel)]="name.selectedPackage" [options]="affiliate.packages" dataKey="label"></p-dropdown>
</ng-template>
</p-column>
<p-column field="country" header="Countries">
<ng-template let-affiliate="rowData" pTemplate type="body">
<p-dropdown [(ngModel)]="country.selectedCountry"
[options]="affiliate.countries" dataKey="label"></p-dropdown>
</ng-template>
</p-column>
<p-column field="device" header="Devices">
<ng-template let-affiliate="rowData" pTemplate type="body">
<p-dropdown [(ngModel)]="device.selectedDevice"
[options]="affiliate.devices" dataKey="label"></p-dropdown>
</ng-template>
</p-column>
<p-column header="Actions">
</p-column>
</p-dataTable>
Call back event will look as
onRowSelect(event){
this.selectedData=event.data
}
LIVE DEMO
Related
Dear all I am using the p-table component from primeNG library:
the main filter (highlighted input box) is working but when I click on the funnel next to the 'Sample' nothing happens and no error is showing in the console.
I am expecting something similar to the following:
Here is my code:
<p-table #dt1 id="graphData" [value]="graphData" dataKey="sample" [rows]="6" [showCurrentPageReport]="true" [rowsPerPageOptions]="[6,10,25,50]" [loading]="loading" styleClass="p-datatable-gridlines" [paginator]="true" currentPageReportTemplate="Showing {first} to {last} of {totalRecords} entries"
[globalFilterFields]="['sample','tyre_pressure','speed','power']">
<ng-template pTemplate="caption">
<div class="flex">
<button pButton label="Clear" class="p-button-outlined" icon="pi pi-filter-slash" (click)="clear(dt1)"></button>
<span class="p-input-icon-left ml-auto">
<i class="pi pi-search"></i>
<input #filterName pInputText type="text"
(input)="dt1.filterGlobal($event.target.value, 'contains')"
placeholder="Search keyword" />
</span>
</div>
</ng-template>
<ng-template pTemplate="header">
<tr>
<th>
<div class="flex justify-content-center align-items-center">
Sample
<p-columnFilter type="text" field="graphData.sample" display="menu">
</p-columnFilter>
</div>
</th>
<th>
<div class="flex justify-content-center align-items-center">
Tyre Pressure
<p-columnFilter type="number" field="tyre_pressure" display="menu">
</p-columnFilter>
</div>
</th>
The text filter in p-columFilter is not showing when I press the funnel button:
<th>
<div class="flex justify-content-center align-items-center">
Sample
<p-columnFilter type="text" field="graphData.sample" display="menu">
</p-columnFilter>
</div>
</th>
What am i missing?
I have discovered that primeng V13 is not compatible with the latest version of angular cli. After downgrading to:
"primeflex": "^3.0.0",
"primeicons": "^4.1.0",
"primeng": "^12.2.2",
the filter buttons worked
I am using prime ng table with row expansion, but I think the problem is with my data key. row is not expanding when I use dataKey="id" if I use Munit.id all rows expand instead of one
html file
<p-table #dt dataKey= "id" [columns]="cols" [value]="mUnit" [paginator]="true" [rows]="5" [showCurrentPageReport]="true"
paginatorright currentPageReportTemplate="Showing {first} to {last} of {totalRecords} entries"
[rowsPerPageOptions]="[5,10,15]" [globalFilterFields]="['mUnitName']" rowExpandMode="single" expandableRows="true"
styleClass="p-datatable-striped" #tableContextMenu>
<ng-template pTemplate="caption" class=" hidden">
<div class=" grid justify-content-between ">
<span class="p-input-icon-left">
<i class="pi pi-search"></i>
<input pInputText type="text" (input)="dt.filterGlobal($event.target.value, 'contains')"
placeholder="Search keyword" />
</span>
<span class="wrap ml-auto ">
<button mat-button class='bd ' (click)="routed()">Add</button>
<button mat-button class='bd' (click)="print()">Print</button>
</span>
</div>
</ng-template>
<ng-template pTemplate="header" let-columns>
<tr>
<!-- <th pSortableColumn="id">ID <p-sortIcon field="id"></p-sortIcon></th>
<th pSortableColumn="Name">ID <p-sortIcon field="mUnitName"></p-sortIcon></th> -->
<th style="width: 2.25e ml"></th>
<th *ngFor="let col of columns" pSortableColumn="{{col.field}}">
{{col.header}}
<p-sortIcon field="{{col.field}}"></p-sortIcon>
<p-columnFilter type="text" field="{{col.field}}" display="menu"></p-columnFilter>
</th>
</tr>
</ng-template>
<ng-template pTemplate="body" let-rowData let-columns="columns" let-expanded="expanded">
<tr>
<!-- (click)="showIt(rowData)" -->
<td>
<button type="button" pButton pRipple [pRowToggler]="columns"
class="p-button-text p-button-rounded p-button-plain"
[icon]="expanded ? 'pi pi-chevron-down' : 'pi pi-chevron-right'"></button>
</td>
<td *ngFor="let col of columns">
{{rowData[col.field]}}
</td>
</tr>
</ng-template>
<ng-template pTemplate="rowexpansion" let-rowData let-columns="columns">
<tr>
<td colspan="3">
<div class="p-3">
<div>its row</div>
<p-table [value]="mUnit" dataKey="id">
<ng-template pTemplate="header">
<tr>
<th *ngFor="let col of columns" pSortableColumn="{{col.field}}">
{{col.header}}
<p-sortIcon field="{{col.field}}"></p-sortIcon>
<p-columnFilter type="text" field="{{col.field}}" display="menu"></p-columnFilter>
</th>
<th style="width: 4rem"></th>
</tr>
</ng-template>
<ng-template pTemplate="body" let-rowData let-columns="columns">
<tr>
(click)="showIt(rowData)"
<td>
<button type="button" pButton pRipple [pRowToggler]="rowData"
class="p-button-text p-button-rounded p-button-plain"
[icon]="expanded ? 'pi pi-chevron-down' : 'pi pi-chevron-right'"></button>
</td>
<td *ngFor="let col of columns">
{{rowData[col.field]}}
</td>
</tr>
</ng-template>
<ng-template pTemplate="emptymessage">
<tr>
<td colspan="6">There are no order for this product yet.</td>
</tr>
</ng-template>
</p-table>
</div>
</td>
</tr>
</ng-template>
</p-table>
my ts. file
showData() {
this.MUnitService.getData().subscribe(
(data: any) => {
if (data) {
this.mUnit = data
this.cols = [
{ field: 'id', header: 'ID' },
{ field: 'mUnitName', header: 'Name' },
];
}
}
);
showData is called in ngOnInit()
you must repeat dataKey= "id" of your table
<p-table #dt dataKey= "id"
in
<ng-template pTemplate="rowexpansion" dataKey= "id"
I hope and serve you.
I am trying to implement full page scroll in primeng table similar to one given at https://www.primefaces.org/primeng/v9-lts/#/table/scroll. But I am not getting the horizontal scroll bar. Even the headers and columns are misaligned as shown below :
Please advise.
My code given below :-
<p-table [columns]="cols" [value]="cars2" [scrollable]="true" [style]="{width:'300px'}">
<ng-template pTemplate="colgroup" let-columns>
<colgroup>
<col *ngFor="let col of columns" style="width:150px">
</colgroup>
</ng-template>
<ng-template pTemplate="header" let-columns>
<tr>
<th *ngFor="let col of columns">
{{col.header}}
</th>
</tr>
</ng-template>
<ng-template pTemplate="body" let-rowData let-columns="columns">
<tr>
<td *ngFor="let col of columns">
{{rowData[col.field]}}
</td>
</tr>
</ng-template>
</p-table>
The prime ng related packages that are included in my project:
"primeflex": "1.1.0",
"primeicons": "^2.0.0",
"primeng": "^9.1.3",
The reason was because "node_modules/primeng/resources/primeng.css" entry was missing in angular.json/styles section.
Hello I was having the same trouble this is from the official doc
link: http://primefaces.org/primeng/table/scroll
<div class="card">
<h5>Vertical</h5>
<p-table [value]="customers" [scrollable]="true" scrollHeight="400px">
<ng-template pTemplate="header">
<tr>
<th style="min-width:200px">Name</th>
<th style="min-width:200px">Country</th>
<th style="min-width:200px">Company</th>
<th style="min-width:200px">Representative</th>
</tr>
</ng-template>
<ng-template pTemplate="body" let-customer>
<tr>
<td style="min-width:200px">{{customer.name}}</td>
<td style="min-width:200px">{{customer.country.name}}</td>
<td style="min-width:200px">{{customer.company}}</td>
<td style="min-width:200px">{{customer.representative.name}}</td>
</tr>
</ng-template>
</p-table>
</div>
I am trying invoke the method when any editable cell value is changed on the primeng p-table. I tried to use onEditComplete event but it will fires only when I edit the cell and press enter. When I edit the cell and move out the mouse it is not firing. Can anyone suggest what is the right event I am supposed to add here?
<p-table [value]="sampleData" [scrollable]="true" scrollHeight="200px" [resizableColumns]="true"
(onEditComplete)="getLandLineTotal($event)">
<ng-template pTemplate="header">
<tr>
<th>Col 1</th>
<th>Col 2</th>
<th>Col 3</th>
</tr>
</ng-template>
<ng-template pTemplate="body" let-rowData>
<tr>
<td style="width: 10%">
{{rowData.col1}}
</td>
<td>
{{rowData.col2}}
</td>
<td pEditableColumn>
<p-cellEditor>
<ng-template pTemplate="input">
<input pInputText type="text" [(ngModel)]="rowData.col3" required>
</ng-template>
<ng-template pTemplate="output">
{{rowData.col3| currency}}
</ng-template>
</p-cellEditor>
</td>
</tr>
</ng-template>
</p-table>
Instead of:
<td pEditableColumn>
Try:
<td [pEditableColumn]="sampleData.col3" [pEditableColumnField]="'col3'">
Developer console should show:
{field: "col3", data: <whatever you entered into the text box>}
I used p-datatable previously and the global filter worked. However when I changed to p-table, the global filter template displayed nicely but the input box is not clickable.
Here's the code
<p-table #dt
[value]="sensorLocationList"
[columns]="cols"
[(selection)]="selectedSl"
sortMode="multiple" [paginator]="true"
[rows]="20"
[globalFilterFields]="['dummy1','dummy2','dummy3','dummy4']"
>
<ng-template pTemplate="caption">
<div style="text-align: left">
<i class="fa fa-search" style="margin:4px 4px 0 0"></i>
<input type="text" pInputText size="50" placeholder="Global Filter" (input)="dt.filterGlobal($event.target.value, 'contains')" style="width:auto">
</div>
</ng-template>
Header:
<ng-template pTemplate="header" let-columns>
<tr>
<th style="width: 2.25em"></th>
<th *ngFor="let col of columns" [pSortableColumn]="col.field">
{{col.header}}
<p-sortIcon [field]="col.field"></p-sortIcon>
</th>
</tr>
<tr>
<th style="width: 2.25em">
<p-tableHeaderCheckbox></p-tableHeaderCheckbox>
</th>
<th *ngFor="let col of columns" [ngSwitch]="col.field">
<input *ngSwitchCase="'dummy1'" pInputText placeholder="Search" type="text" class="search-box" (input)="dt.filter($event.target.value, col.field, col.contains)">
<input *ngSwitchCase="'dummy2'" pInputText placeholder="Search" type="text" class="search-box" (input)="dt.filter($event.target.value, col.field, col.contains)">
<input *ngSwitchCase="'dummy3'" pInputText placeholder="Search" type="text" class="search-box" (input)="dt.filter($event.target.value, col.field, col.contains)">
<input *ngSwitchCase="'dummy4'" pInputText placeholder="Search" type="text" class="search-box" (input)="dt.filter($event.target.value, col.field, col.contains)">
</th>
</ng-template>
And one sample of body:
<ng-template pTemplate="body" let-rowData let-columns="columns">
<tr [pSelectableRow]="rowData">
<td [pEditableColumn]="rowData" [pEditableColumnField]="'dummy1'" [ngStyle]="cellEdit(rowData)">
<p-cellEditor>
<ng-template pTemplate="input">
<input pInputText type="text" [(ngModel)]="rowData.dummy1">
</ng-template>
<ng-template pTemplate="output">
{{rowData.dummy1}}
</ng-template>
</p-cellEditor>
</td>
</tr>
</ng-template>
</p-table>
Everything works fine including the column filter. I've searched everywhere for the solution and found most of the problem is because the PrimeNG version was not up-to-date, but my version is updated. Any idea?
Add [pSortableColumnDisabled]="!col.sortable" to the table header tag:
<th *ngFor="let col of columns" [pSortableColumn]="col.field" [pSortableColumnDisabled]="!col.sortable">
Remove "ng-template" from around the GlobalFilter