Angular material table footer calculations

Question

Angular material table footer calculations

I am currently utilizing Angular Material Table version 8.2.3 to generate multiple tables from a TypeScript definition. The majority of these tables are related to numerical data, requiring me to display totals in the footer section. However, I am facing an issue as the examples provided on the official material page only showcase single-column tables and do not address how to handle calculations for multiple columns. I am seeking a solution to dynamically calculate the sum of a column. Below is the code snippet that I have attempted unsuccessfully:

https://i.sstatic.net/axPZp.png

<table mat-table [dataSource]="dataSource" matSort matSortActive="Date" matSortDisableClear="true">

    <ng-container *ngFor="let column of columns" [matColumnDef]="column.columnDef">
        <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ column.header }}</th>
        <td mat-cell *matCellDef="let row">{{ column.cell(row) }}</td>
        <td mat-footer-cell *matFooterCellDef> {{this.dataSource.data.reduce((data, val) => data+= val.cell(row), 0) </td>
    </ng-container>

    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
    <tr mat-footer-row *matFooterRowDef="displayedColumns"></tr>
</table>

angular typescript angular-material

Answer 1

Answer №1

Your syntax for string interpolation is incorrect.

You forgot to include }} at the end of your code.

Here is the corrected template:

<table 
  mat-table 
  [dataSource]="dataSource" 
  matSort 
  matSortActive="Date" 
  matSortDisableClear="true">

  <ng-container 
    *ngFor="let column of columns" 
    [matColumnDef]="column.columnDef">
    <th 
      mat-header-cell 
      *matHeaderCellDef 
      mat-sort-header>
      {{ column.header }}
    </th>
    <td 
      mat-cell 
      *matCellDef="let row">
      {{ column.cell(row) }}
    </td>
    <td 
      mat-footer-cell 
      *matFooterCellDef>
      {{ dataSource.data.reduce((data, val) => data+= val.cell(row), 0) }} 
    </td>
  </ng-container>

  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
  <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
  <tr mat-footer-row *matFooterRowDef="displayedColumns"></tr>
</table>

You may need to make the dataSource public in order to access it in the template.

Instead of exposing the entire dataSource, consider making only the data property public if it's a dependency in your Component.

Create a property like this:

data = this.dataSource.data.reduce((datum, val) => datum+= val.cell(row), 0);

When interpolating the result, use the following:

<td
  mat-footer-cell
  *matFooterCellDef>
  {{ data }} 
</td>

PS - Be cautious about calling methods in Data Binding Syntax as it can impact performance significantly.

For more information on the effects of calling methods in data binding syntax, refer to this thread:

Angular Performance: DOM Event causes unnecessary function calls

Answer 2

Your syntax for string interpolation is incorrect.

You forgot to include }} at the end of your code.

Here is the corrected template:

<table 
  mat-table 
  [dataSource]="dataSource" 
  matSort 
  matSortActive="Date" 
  matSortDisableClear="true">

  <ng-container 
    *ngFor="let column of columns" 
    [matColumnDef]="column.columnDef">
    <th 
      mat-header-cell 
      *matHeaderCellDef 
      mat-sort-header>
      {{ column.header }}
    </th>
    <td 
      mat-cell 
      *matCellDef="let row">
      {{ column.cell(row) }}
    </td>
    <td 
      mat-footer-cell 
      *matFooterCellDef>
      {{ dataSource.data.reduce((data, val) => data+= val.cell(row), 0) }} 
    </td>
  </ng-container>

  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
  <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
  <tr mat-footer-row *matFooterRowDef="displayedColumns"></tr>
</table>

You may need to make the dataSource public in order to access it in the template.

Instead of exposing the entire dataSource, consider making only the data property public if it's a dependency in your Component.

Create a property like this:

data = this.dataSource.data.reduce((datum, val) => datum+= val.cell(row), 0);

When interpolating the result, use the following:

<td
  mat-footer-cell
  *matFooterCellDef>
  {{ data }} 
</td>

PS - Be cautious about calling methods in Data Binding Syntax as it can impact performance significantly.

For more information on the effects of calling methods in data binding syntax, refer to this thread:

Angular Performance: DOM Event causes unnecessary function calls

Answer 3

Answer №2

It seems like in the instance you provided, there was an oversight with closing the {{ tag within the

<td mat-footer-cell *matFooterCellDef> {{this.dataSource.data.reduce((data, val) => data+= val.cell(row), 0) </td>

You have the option to invoke a function from the template itself to compute the sum of a particular column. Here is an example:

<td mat-footer-cell *matFooterCellDef> {{calculateSum()}} </td>

And then in the .ts file:

calculate() {
  // perform calculation

  return result;
}

Answer 4

It seems like in the instance you provided, there was an oversight with closing the {{ tag within the

<td mat-footer-cell *matFooterCellDef> {{this.dataSource.data.reduce((data, val) => data+= val.cell(row), 0) </td>

You have the option to invoke a function from the template itself to compute the sum of a particular column. Here is an example:

<td mat-footer-cell *matFooterCellDef> {{calculateSum()}} </td>

And then in the .ts file:

calculate() {
  // perform calculation

  return result;
}

Angular material table footer calculations

Answer №1

Answer №2

Similar questions

How can I define Record values in Typescript based on their specific keys?

import component dynamically from object in Next.js

Having trouble resolving the typescript package while integrating with another module

The system encountered a syntax error: an unexpected token was found in the JSON at position 508

The function is unable to access the 'FacebookAuthProvider' property as it is undefined

Activate a different link when one is clicked in the Angular framework

What is the best way to utilize an "as" property in TypeScript when forwarding props to a component?

Solutions for repairing data storage variables

Oops! The type '{}' is lacking the properties listed below

Unit test does not show the PrimeNG menubar start directive

Constructor not executing when using Object.create

Troubleshooting the "Cannot read properties of undefined" error in Angular 11 while managing API data

When the Image Icon is clicked, the icon itself should become clickable and trigger the opening of a popup Dialogue Box for uploading a new image

The function ValueChange remains uninvoked

The installation failed due to an unresolved dependency when running npm install

Angular2 and Firebase App unable to Compile due to TypeScript Issue

Guide to dynamically load external JavaScript script in Angular 2 during runtime

Instead of relying on Vue TypeScript, we are leveraging IntelliJ with TypeScript 5.0.3 to compile our Vue project

Encountering an issue connecting to the backend server for the

Having trouble with the ag-grid demo - grid not displaying as intended