PrimeNG 19 Table with checkboxes every row is not working like I would expect...

[MarcHeyde]

Hello,

Can someone help me out here?
I have a table with data from an api endpoint. Now I want to fill in the table and add an extra checkbox on every row.

If I click on the row, the checkbox will also be selected. This I don't want. The selection of the row and the checkbox needs to work independently. It does not mean that if I select the row that it cannot change the css of the checkbox like it does with the other columns.
I get also an errormessage from PrimeNG library. If I select the row. coming from an event triggered by the checkbox I assume. Error is : this.dt.selection.some is not a function .I also tried with onRowSelect on p-table to try to exclude the checkbox for selection, but that did also not work out.

Thanks for also have a look :).

Regards,

html

<p-table
[columns]="displayedColumns"
[totalRecords]="totalRecords"
[value]="courtCostStatements"
[scrollable]="true"
scrollHeight="75vh"
[rows]="30"
[virtualScroll]="true"
[virtualScrollItemSize]="virtualScrollItemSize"
[lazy]="true"
[size]="'small'"
showGridlines
stripedRows
sortField="caseNumber"
selectionMode="single"
metaKeySelection="isMetaKey"
[(selection)]="selectedCourtCostStatement"
(onLazyLoad)="loadCourtCostStatementsEventAsync($event)"
dataKey="id">



{{ columnHeader.id.translationKey| translate }}
{{ columnHeader.caseNumber.translationKey | translate }}
{{ columnHeader.serviceProvider.translationKey | translate }}
<th pSortableColumn="serviceTypeNl" *ngIf="currentLanguage.toLowerCase() === 'nl'">{{ columnHeader.serviceType.translationKey | translate }}
<th pSortableColumn="statusNl" *ngIf="currentLanguage.toLowerCase() === 'nl'">{{ columnHeader.status.translationKey | translate }}
<th pSortableColumn="serviceTypeFr" *ngIf="currentLanguage.toLowerCase() === 'fr'">{{ columnHeader.serviceType.translationKey | translate }}
<th pSortableColumn="statusFr" *ngIf="currentLanguage.toLowerCase() === 'fr'">{{ columnHeader.status.translationKey | translate }}
<th pSortableColumn="serviceTypeEn" *ngIf="currentLanguage.toLowerCase() === 'en'">{{ columnHeader.serviceType.translationKey | translate }}
<th pSortableColumn="statusEn" *ngIf="currentLanguage.toLowerCase() === 'en'">{{ columnHeader.status.translationKey | translate }}
<th pSortableColumn="serviceTypeDe" *ngIf="currentLanguage.toLowerCase() === 'de'">{{ columnHeader.serviceType.translationKey | translate }}
<th pSortableColumn="statusDe" *ngIf="currentLanguage.toLowerCase() === 'de'">{{ columnHeader.status.translationKey | translate }}
{{ columnHeader.caseManager.translationKey | translate }}
{{ columnHeader.submissionDate.translationKey | translate }}




<tr style="height: 37px" [pSelectableRow]="courtcostStatement">
<td [style]="courtCostStatementStatusLayout">
{{ courtcostStatement.id }}
{{ courtcostStatement.caseNumber }}
{{ courtcostStatement.serviceProvider }}
<td *ngIf="currentLanguage.toLowerCase() === 'nl'">{{ courtcostStatement.serviceTypeNl }}
<td *ngIf="currentLanguage.toLowerCase() === 'nl'">{{ courtcostStatement.statusNl }}
<td *ngIf="currentLanguage.toLowerCase() === 'fr'">{{ courtcostStatement.serviceTypeFr }}
<td *ngIf="currentLanguage.toLowerCase() === 'fr'">{{ courtcostStatement.statusFr }}
<td *ngIf="currentLanguage.toLowerCase() === 'en'">{{ courtcostStatement.serviceTypeDe }}
<td *ngIf="currentLanguage.toLowerCase() === 'en'">{{ courtcostStatement.statusDe }}
<td *ngIf="currentLanguage.toLowerCase() === 'de'">{{ courtcostStatement.serviceTypeEn }}
<td *ngIf="currentLanguage.toLowerCase() === 'de'">{{ courtcostStatement.statusEn }}
{{ courtcostStatement.caseManager }}
{{ courtcostStatement.submissionDate | date }}

<p-tableCheckbox [value]="courtcostStatement" />

Typescript
`
import { CommonModule } from "@angular/common";
import { Component, OnDestroy, OnInit } from "@angular/core";
import { ActivatedRoute } from "@angular/router";
import { TranslateModule, TranslateService, LangChangeEvent } from "@ngx-translate/core";

import { firstValueFrom, Subscription } from "rxjs";

import { ProgressSpinnerModule } from 'primeng/progressspinner';
import { TableLazyLoadEvent, TableModule} from 'primeng/table';

import { LanguageEnum, CourtCostStatement } from "../../../generated";
import { CourtCostsService } from "../../../generated/api/courtCosts.service";

import { HEADERCOLUMNS_CASES, isValidColumnName, ColumnNames } from "../../../Shared/constants";
import { GenericErrorHandler } from "../../../services/errorhandler.service";

@component({
standalone: true,
selector: 'app-cases',
templateUrl: './cases.component.html',
styleUrls: ['./cases.component.scss'],
providers: [ CourtCostsService, TranslateService],
imports: [ CommonModule, TranslateModule, ProgressSpinnerModule, TableModule ],
})
export class CasesComponent implements OnInit, OnDestroy {
languages = [LanguageEnum.Nl, LanguageEnum.Fr, LanguageEnum.De, LanguageEnum.En];
filterIsNew: boolean = false;
isLoading = true;

currentLanguage: LanguageEnum = LanguageEnum.Nl;    
languageEnum = LanguageEnum;    
displayedColumns: string[] = ['id', 'caseNumber', 'serviceProvider', 
    'serviceTypeNl', 'serviceTypeFr', 'serviceTypeDe', 'statusEn', 'statusNl', 'statusFr', 'statusDe' ,'caseManager', 'submissionDate']; 
sortName: ColumnNames = 'id';   
selectedCourtCostStatement!: CourtCostStatement | null;
isMetaKey: boolean = false;
page : number = 0;               
rows : number = 50; 
virtualScrollItemSize : number = 37;   
filter = '';                
totalRecords = 0;       
languageSubscription: Subscription;
courtCostStatements: CourtCostStatement[] = [];        
courtCostStatementStatusLayout?: string = 'background-color: #be3a25';

readonly columnHeader = HEADERCOLUMNS_CASES;

constructor(private route: ActivatedRoute, private courtCostService: CourtCostsService, private translateService: TranslateService, 
    private errorHandler: GenericErrorHandler) {          
    this.languageSubscription = this.translateService.onLangChange.subscribe(
        (event: LangChangeEvent) => {               
          this.updateDisplayedColumns();     
        }
    );         
}  

get currentLang(): string {        
    return this.translateService.currentLang;
}  

ngOnInit(): void {       
    this.currentLanguage = this.languages.includes(this.currentLang as LanguageEnum)
        ? (this.currentLang as LanguageEnum)
        : LanguageEnum.Nl;

    this.route.data.subscribe(params => {                        
        this.filterIsNew = params['isnew'];            
    });           
}          

ngOnDestroy() {       
    if (this.languageSubscription) {
      this.languageSubscription.unsubscribe();
    }
}         

async loadCourtCostStatementsEventAsync(event: TableLazyLoadEvent): Promise<void> {
    console.log("lazy loading triggered !!!");


    // If there was already a request (totalrecord more then 0) and 
    // if the totalrecords of the response was smaller or equal to the total amount of records, no need to fire a request...
    if (this.totalRecords > 0 && this.totalRecords <= this.rows)
        return;

    this.isLoading = true;
    let pageNumber = (event.first === 0 || event.first == undefined) 
        ? 1 
        : Math.floor(event.first / (event.rows || 1)) + 1;                           

    if (event.sortField && typeof event.sortField === 'string' && isValidColumnName(event.sortField)) 
        this.sortName = event.sortField;                     
    else            
        this.sortName = 'id';                                
    
    const sortDescending : boolean = event.sortOrder !== 1;        
    const rowsPerPage = event.rows || this.rows;
    try {
        const data = await firstValueFrom(this.courtCostService.apiV10CourtCostsGetCourtStatementsGet(this.currentLanguage, this.filterIsNew, this.sortName, pageNumber, rowsPerPage, sortDescending));                                           
        if (event.first === 0)
            this.courtCostStatements = data.courtCostStatements || [];
        else{
            this.courtCostStatements = [
                ...this.courtCostStatements.slice(0, event.first), // Keep already loaded data
                ...(data.courtCostStatements || []), // Append new data
            ];
        }
        this.totalRecords = data.totalRecords || 0;                      
    }
    catch(error){
        console.error('Error fetching court costs', error);
        this.errorHandler.handleError(error);
    }
    finally{
        this.isLoading = false;
    }        
} 

updateDisplayedColumns(): void {       
    const languageSpecificColumns = new Map<string, string[]>([
        [LanguageEnum.Nl.toLowerCase(), ['serviceTypeNl', 'statusNl']],
        [LanguageEnum.Fr.toLowerCase(), ['serviceTypeFr', 'statusFr']],
        [LanguageEnum.De.toLowerCase(), ['serviceTypeDe', 'statusDe']],
        [LanguageEnum.En.toLowerCase(), ['serviceTypeEn', 'statusEn']]
    ]);
    const columns = languageSpecificColumns.get(this.currentLang) || [];

    this.displayedColumns = ['id', 'caseNumber', 'serviceProvider', ...columns, 'caseManager', 'submissionDate'];                
}       

onRowSelect(event: any): void { 
    console.log('Begin onRowSelect');
    console.log('event', event);
    if (event.originalEvent instanceof PointerEvent)  
    {
        const clickedElement = event.originalEvent.target;

        // Skip if the clicked element is the checkbox or inside it
        if (clickedElement.closest('.checkBox')) {
            console.log('Checkbox clicked. Skipping row selection.');
            return;
        }        

        const rowElement = clickedElement.closest('tr');

        const checkbox = rowElement.querySelector('.checkBox p-tableCheckbox input') as HTMLInputElement;

        console.log('Checkbox', checkbox);

        if (checkbox) {
            checkbox.checked = checkbox.checked; // Preserve the checkbox state
        }

        const previouslySelected = document.querySelectorAll('.selected-row');
        previouslySelected.forEach((row) => row.classList.remove('selected-row'));

        rowElement.classList.add('selected-row');
    }     
    console.log('End onRowSelect');
} 

// onCheckboxClick(event: Event): void {
//     console.log("oncheckboxClick");

//     event.stopPropagation(); // Prevent the click event from propagating to the row
//     console.log('Checkbox clicked. Preventing row selection.');
// }

}
`