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

Question

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.

Refutative

Answer 1

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

Leptorrhine

Well, the values you're showing in there are hard-coded. And what you're showing comes straight from the documentation, which I'd already read and seen that their example shows hard-coded values. In the snippet you've provided, I would need the Total and Min values to be dynamically calculated based on what's visible in the table. – Refutative

You just have to replace hard coded values with functions that return what you need. – Leptorrhine

In the stackblitz demo, it appears the error ---> Error in turbo_modules/[email protected]/resources/primeng.min.css Error: ENOENT: No such file or directory., '/dev/null' – Lieabed