CODEWITHSUNDEEP
angularprimeng
azulBonnet
azulBonnet

Reputation: 889

How can I use a PrimeNg p-table without an array object?

I'd like to use a primeNg p-table to show some properties on an object instead of an array while keeping the prime styling.

With this the body does not show up at all while the header does. I'd prefer to not have to put my single object in an array just to satisfy primeng. 

  <p-table [responsive]="true">
    <ng-template pTemplate="header">
      <tr>
        <th>
          Lot Start Date
        </th>
        <th>
          Expiration Date
        </th>
        <th>
          Quantity
        </th>
      </tr>
    </ng-template>
    <tr>
      <td>10/12/19</td>
      <td>12/12/19</td>
      <td>50</td>
    </tr>
  </p-table>

Upvotes: 1

Views: 5292

Answers (1)

phucnh
phucnh

Reputation: 1090

You can binding object's property to td like this

<p-table #table [value]="[{}]">
    <ng-template pTemplate="header">
        <tr>
            <th>
                Lot Start Date
            </th>
            <th>
                Expiration Date
            </th>
            <th>
                Quantity
            </th>
        </tr>
    </ng-template>
    <ng-template pTemplate="body" let-rowData>
        <tr>
            <td>10/12/19</td>
            <td>12/12/19</td>
            <td>50</td>
        </tr>
    </ng-template>
</p-table>

or add object into an array

ts

data: any[];

  constructor() {
    this.data = [
      {
        lot_start_date: '10/12/19',
        expiration_date: '12/12/19',
        quantity: 50
      }
    ];
  }

html

<p-table #table [value]="data">
    <ng-template pTemplate="header">
        <tr>
            <th>
                Lot Start Date
            </th>
            <th>
                Expiration Date
            </th>
            <th>
                Quantity
            </th>
        </tr>
    </ng-template>
    <ng-template pTemplate="body" let-rowData>
        <tr>
            <td>{{ rowData.lot_start_date }}</td>
            <td>{{ rowData.expiration_date }}</td>
            <td>{{ rowData.quantity }}</td>
        </tr>
    </ng-template>
</p-table>

Upvotes: 5

Related Questions