Reputation: 113

How to disable primeng p-table selectionmode?

I am using angular primeng <p-table> (a shared component) and have my [selectionMode] as multiselect. Right now i am only able to check the checkbox by clicking on the row only i want to be able to check the checkbox by clicking on the checkbox itself.

Is there a way to disable multiselect selectionmode for my data-table so that I can check the checkbox by clicking on the box itself and not the row? I cannot delete the selectionmode from the p-table since it is being used at multiple places.

This is my p-table which is a shared component.

<p-table #table 
         [value]="data" 
         [columns]="columns" 
         [scrollable]="true" 
         scrollHeight="420px" 
         [(selection)]="selections"
         [selectionMode]="multiselect ? 'multiple' : 'single'" 
         (onRowSelect)="onSelect($event)"
         (onRowUnselect)="onUnselect($event)" 
         [sortField]="sortField" 
         (onSort)="onSort($event)" 
         [paginator]="paged"
         [rows]="pageSize" 
         [rowsPerPageOptions]="ROWCOUNT_OPTIONS" 
         [currentPageReportTemplate]="PAGE_REPORT"
         [showCurrentPageReport]="showCurrentPageReport" 
         (onLazyLoad)="onLazyLoad($event)" 
         (onPage)="onPageChange($event)"
         [lazy]="lazy"
         [lazyLoadOnInit]="lazyLoadOnInit" 
         [loading]="loading" 
         [totalRecords]="totalRecords"
         paginatorDropdownAppendTo="body" 
         compareSelectionBy="equals" 
         [class]="isEmpty ? 'h-scrollable' : ''"
         [resizableColumns]="true" 
         columnResizeMode="expand">

This is my html for the usage:

<data-table #productTable 
            [columns]="columns"
            [data]="data" 
            [loading]="loading" 
            [multiselect]="true" 
            selectionmode = ""
            defaultSortField="necLec">
</data-table>

Upvotes: 1