How do I display summary calculations in the footer of a PrimeNG table?

Viewed 3892

I'm having a heck of a time finding out how to do a simple summary function at the end of a PrimeNG p-table. For example, if I want to total a particular column in the last row of the table, or display the minimum of a value of integers, or any other summary operation like that — for whatever rows are visible in the table at the time.

I've tried rolling my own by accessing PrimeNG's Table object itself in the component:

@ViewChild('dt', { static: true }) private dt: Table;

And then looking at the contents of that via

console.table(this.dt)

I can access the filteredValue property of this.dt once I've typed something into any of the column filters. But I can't access what's in this.dt.value or this.dt._value. PrimeNG's documentation makes mention of a "Summary section" but gives no guidance on how to perform summary functions in that section:

PrimeNG documentation for Table

Perplexed.

1 Answers

You shouldn't use the "Summary" functionality but rather the "footer" template.

Something like that:

<ng-template pTemplate="footer">
    <tr>
        <td colspan="3"></td>
        <td>Total:$506,202</td>
        <td>Min:$8,500</td>
    </tr>
</ng-template>

See StackBlitz

Related