I need to find a way to select individual columns in PrimeNG. Below is my environment / setup. I haven't found a way in the PrimeNG Documentation that supports column selection. There is one area called "column selection" but it doesn't actually contain any code that enables column selection in the example.
CONTEXT
"private": true,
"dependencies": {
"@angular/animations": "~12.0.0",
"@angular/cdk": "^12.2.13",
"@angular/common": "~12.0.0",
"@angular/compiler": "~12.0.0",
"@angular/core": "~12.0.0",
"@angular/forms": "~12.0.0",
"@angular/platform-browser": "~12.0.0",
"@angular/platform-browser-dynamic": "~12.0.0",
"@angular/router": "~12.0.0",
"ajv": "^6.12.6",
"primeng": "^12.1.0",
"rxjs": "~6.6.0",
"tslib": "^2.1.0",
"zone.js": "~0.11.4"
},
I am using Angular 12.0 and PrimeNG 12.1.0.
TABLE TS:
import { Component, OnInit, Input } from '@angular/core';
import { TableModule } from 'primeng/table';
import { FormsModule } from '@angular/forms';
interface Row {
id?: number,
name?: string,
description?: string
}
interface Column {
field: string,
header: string
}
@Component({
selector: 'app-table',
templateUrl: './table.component.html',
styleUrls: ['./table.component.scss']
})
export class TableComponent implements OnInit {
RowData: Row[] = [];
ColumnData: Column[] = [];
constructor() {}
//Table Population Data
@Input() rowData: Row[];
@Input() columnData: any[];
selectedRow: Row;
ngOnInit() {
this.ColumnData = this.columnData;
this.RowData = this.rowData;
}
onRowSelect(event: Row) {
console.log(event.id);
console.log(event.name);
console.log(event.description);
}
selectColumnHeader(checkValue: Column) {
switch(checkValue.field) {
case "id": {
for(let i = 0; i < this.RowData.length; i++)
{
console.log(this.RowData[i].id);
}
break;
}
case "name": {
for(let i = 0; i < this.RowData.length; i++)
{
console.log(this.RowData[i].name);
}
break;
}
case "description": {
for(let i = 0; i < this.RowData.length; i++)
{
console.log(this.RowData[i].description);
}
break;
}
}
}
TABLE HTML:
<p-table #myTable [value]="RowData" [columns] = "ColumnData"
selectionMode="single" [(selection)]="selectedRow"
dataKey="id" (onRowSelect)="onRowSelect(selectedRow)">
<ng-template pTemplate="header" let-columns>
<tr>
<th *ngFor="let col of ColumnData"
[pSortableColumn]="col.field">
{{col.header}}
<p-sortIcon field="col.field"></p-sortIcon>
</th>
</tr>
</ng-template>
<ng-template pTemplate="body" let-RowData let-columns let-editing="editing">
<tr [pSelectableRow]="RowData">
<td
*ngFor="let col of ColumnData">
{{RowData[col.field]}}
</td>
</tr>
</ng-template>
</p-table>
Below this a test component which simply declares the data to be used in my table component.
TEST TS:
import { Component, OnInit } from '@angular/core';
import { TableModule } from 'primeng/table';
import { TableComponent } from '../table/table.component';
interface row {
id?: number,
name?: string,
description?: string
}
@Component({
selector: 'app-test',
templateUrl: './test.component.html',
styleUrls: ['./test.component.scss']
})
export class TestComponent implements OnInit {
myColumns = [{field: "id", header: "ID"},
{field: "name", header: "Name"},
{field: "description", header: "Description"}];
myData: row[] = [{id: 0, name: "L", description: "Intern"},
{id: 1, name: "Test", description: "PrimeNG"},
{id: -1, name: "Jane Doe", description: "Hi"},
{id: 999999, name: "Big Num", description: "Almost 1 million"},
{id: 10000001, name: "Friend",description: "A friend"},
{id: 0.5, name: "T-swift", description: "Chief's fan!"}];
constructor() {}
ngOnInit(): void {
}
}
TEST HTML:
<app-table
[columnData]="myColumns"
[rowData]="myData"
></app-table>
I have tried using <p-tableCheckbox> and <p-tableHeaderCheckbox> and hiding <p-tableCheckbox> but using <p-tableHeaderCheckbox selection simply selects all data because I was unable to find a way to link the <p-tableCheckbox to specific <p-tableHeaderCheckbox>.