unable to add checkboxes in each row of prime ng table

29 Views Asked by At

I am trying to add checkboxes in prime ng table but I am getting the following error vendor.js:73494 ERROR NullInjectorError: R3InjectorError(AppModule)[Table -> Table]: . This is what I am trying I have created a table component where it will dynamically add row and columns based on the child component. Here is the stackblitz for the same. Not sure what I am doing wrong but couldn't add the checkboxes on each row

https://stackblitz.com/edit/uvubg7?file=package.json

<app-prime-table
  [data]="data"
  [columns]="columns"
  [globalFilters]="columns"
  [displayFilter]="true"
  [customBodyTemplate]="customBodyTemplate"
>
</app-prime-table>
<ng-template #customBodyTemplate let-rowData>
  <tr>
    <td *ngFor="let col of columns">
      <div *ngIf="col.type == 'checkbox'">
        <input type="checkbox" />
        <p-tableCheckbox [value]="rowData"></p-tableCheckbox>
      </div>
      <ng-container *ngIf="col.type !== 'checkbox'">
        <div *ngIf="!col.type">{{ rowData[col.field] }}</div>
        <div *ngIf="col.type === 'date'">
          {{ formatDate(rowData[col.field]) }}
        </div>
      </ng-container>
    </td>
  </tr>
</ng-template>
1

There are 1 best solutions below

2
Jesus Leon On

Checkbox Selection

Multiple selection can also be handled using checkboxes by enabling the selectionMode property of column as multiple.

<p-table [value]="products" [(selection)]="selectedProducts" dataKey="code" [tableStyle]="{'min-width': '50rem'}">
<ng-template pTemplate="header">
    <tr>
        <th style="width: 4rem">
            <p-tableHeaderCheckbox></p-tableHeaderCheckbox>
        </th>
        <th>Code</th>
        <th>Name</th>
        <th>Category</th>
        <th>Quantity</th>
    </tr>
</ng-template>
<ng-template pTemplate="body" let-product>
    <tr>
        <td>
            <p-tableCheckbox [value]="product"></p-tableCheckbox>
        </td>
        <td>{{product.code}}</td>
        <td>{{product.name}}</td>
        <td>{{product.category}}</td>
        <td>{{product.quantity}}</td>
    </tr>
</ng-template>

Table Checkbox Selection