4

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.

Antikhippe
  • 6,316
  • 2
  • 28
  • 43
twosouth
  • 171
  • 3
  • 12

1 Answers1

5

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

Antikhippe
  • 6,316
  • 2
  • 28
  • 43
  • 1
    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. – twosouth Aug 27 '20 at 15:59
  • 2
    You just have to replace hard coded values with functions that return what you need. – Antikhippe Aug 27 '20 at 21:00
  • In the stackblitz demo, it appears the error ---> Error in turbo_modules/primeng@9.1.0/resources/primeng.min.css Error: ENOENT: No such file or directory., '/dev/null' – Marlon López May 23 '23 at 20:52