CODEWITHSUNDEEP
javascriptangularprimengprimeng-datatableprimeng-table
Robert
Robert

Reputation: 3483

How to use headercheckboxicon and checkboxicon templates primeng Checkbox Selection

How to use headercheckboxicon and checkboxicon templates in primeng table Checkbox Selection

I just followed primeng table docs and using below code

    <div class="card">
      <p-table
        [value]="products"
        [(selection)]="selectedProducts"
        dataKey="code"
        [tableStyle]="{'min-width': '50rem'}"
      >
        <ng-template pTemplate="checkboxicon">
          <p-checkbox label="Cheese"></p-checkbox>
        </ng-template>
        <ng-template pTemplate="headercheckboxicon">
          <p-checkbox label="Header"></p-checkbox>
        </ng-template>
        <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>
      </p-table>
    </div>

Thanks in advance

Upvotes: 0

Views: 192

Answers (1)

user2542544
user2542544

Reputation: 3

Do you happen to use PrimeNG version 14 or below? If so, the templates have not been introduced yet, and you will have have to either upgrade your PrimeNG or add your own component, and map it to the table.

You can check out the code here, if you want to take a look at what's actually going on: https://github.com/primefaces/primeng/blob/master/src/app/components/table/table.ts

Upvotes: 0

Related Questions