Properly showcase a list of data in a mat-table with dynamically grouped columns

Question

Properly showcase a list of data in a mat-table with dynamically grouped columns

I have encountered an issue that is proving difficult for me to solve.

Upon making a request to my API, I receive a dataset structured like this:

[
  {grade: "Grade A", id: 1, ifsGrade: "A1XX", ifsType: "01XX", points: 22, type: "Type_1"},
  {grade: "Grade B", id: 2, ifsGrade: "B1XX", ifsType: "02XX", points: 15, type: "Type_1"},
  {grade: "Grade C", id: 3, ifsGrade: "C1XX", ifsType: "03XX", points: 1,  type: "Type_1"},
  {grade: "Grade A", id: 4, ifsGrade: "A2XX", ifsType: "04XX", points: 23, type: "Type_2"},
  {grade: "Grade B", id: 5, ifsGrade: "B2XX", ifsType: "05XX", points: 26, type: "Type_2"}
]

In order to structure my data by type, I use the following grouping method:

Array.prototype.groupBy = function(k) {
   return this.reduce((acc, item) => (acc[item[k]] = [...(acc[item[k]] || []), item], acc), {});
};

var TABLE_DATA = Object.values(API_DATA.groupBy("type"));

[
  [
    {grade: "Grade A", id: 1, ifsGrade: "A1XX", ifsType: "01XX", points: 22, type: "Type_1"},
    {grade: "Grade B", id: 2, ifsGrade: "B1XX", ifsType: "02XX", points: 15, type: "Type_1"},
    {grade: "Grade C", id: 3, ifsGrade: "C1XX", ifsType: "03XX", points: 1,  type: "Type_1"}
  ],
  [
    {grade: "Grade A", id: 4, ifsGrade: "A2XX", ifsType: "04XX", points: 23, type: "Type_2"},
    {grade: "Grade B", id: 5, ifsGrade: "B2XX", ifsType: "05XX", points: 26, type: "Type_2"}
  ]
]

To display this data using an Angular Material mat-table as shown in the example image https://i.sstatic.net/yvDwk.png, I need to navigate through a list of lists. This poses a challenge in correctly rendering the items within the table.

The table columns should ideally be dynamic, but I am unsure how to achieve this with Angular Material:

<ng-container matColumnDef="{{column}}" *ngFor="let column of definedColumns">
  <th mat-header-cell *matHeaderCellDef> {{column}} </th>
  <td mat-cell *matCellDef="let element"> {{element[column]}} </td>
</ng-container>

Access Stackblitz link here

Your assistance on this matter is greatly appreciated.

json angular typescript angular-material mat-table

Answer 1

Answer №1

To achieve the desired outcome, you must iterate over your dataset and assign the various values to your new object.

For a functional demonstration, refer to this live stack example: https://stackblitz.com/edit/datasource-mat-table-with-group-by-xyz123

The following functions extracted from the stackblitz are relevant:

  updatedData: ElementType[];

  // Transforms "Grade X" into "gradeX"
  transformGradeToKey(grade: string): string{
    return `grade${grade.split(" ")[1]}`;
  }

  // Consider appropriate typing for parameter "data"
  updateDataFromAPI(data: any[]): void {
  // Utilizing a map to avoid full list iteration for type === "someType" check every time
  let transformedData = new Map<string, ElementType>();
   
   data.forEach(value => {
     let currentVal = transformedData.get(value.type) || {type: value.type, gradeA: undefined, gradeB: undefined, gradeC: undefined};
     const gradeKey = this.transformGradeToKey(value.grade);
     const newGradeValue: number = (currentVal[gradeKey] || 0) + value.points;
     currentVal = {...currentVal, [gradeKey]: newGradeValue };
     transformedData.set(value.type, currentVal);
   })
   
   this.updatedData = [...transformedData].map(([key, val]) => val);
  }

Answer 2

To achieve the desired outcome, you must iterate over your dataset and assign the various values to your new object.

For a functional demonstration, refer to this live stack example: https://stackblitz.com/edit/datasource-mat-table-with-group-by-xyz123

The following functions extracted from the stackblitz are relevant:

  updatedData: ElementType[];

  // Transforms "Grade X" into "gradeX"
  transformGradeToKey(grade: string): string{
    return `grade${grade.split(" ")[1]}`;
  }

  // Consider appropriate typing for parameter "data"
  updateDataFromAPI(data: any[]): void {
  // Utilizing a map to avoid full list iteration for type === "someType" check every time
  let transformedData = new Map<string, ElementType>();
   
   data.forEach(value => {
     let currentVal = transformedData.get(value.type) || {type: value.type, gradeA: undefined, gradeB: undefined, gradeC: undefined};
     const gradeKey = this.transformGradeToKey(value.grade);
     const newGradeValue: number = (currentVal[gradeKey] || 0) + value.points;
     currentVal = {...currentVal, [gradeKey]: newGradeValue };
     transformedData.set(value.type, currentVal);
   })
   
   this.updatedData = [...transformedData].map(([key, val]) => val);
  }

Answer 3

Answer №2

Initialization of data while grouping by type :

ngOnInit() {
    this.API_DATA = [
      {grade: "Grade A", id: 1, ifsGrade: "A1XX", ifsType:   "01XX", points: 22, type: "Type_1"},
      {grade: "Grade B", id: 2, ifsGrade: "B1XX", ifsType:   "02XX", points: 15, type: "Type_1"},
      {grade: "Grade C", id: 3, ifsGrade: "C1XX", ifsType:   "03XX", points: 1,  type: "Type_1"},
      {grade: "Grade A", id: 4, ifsGrade: "A2XX", ifsType: "04XX", points: 23, type: "Type_2"},
      {grade: "Grade B", id: 5, ifsGrade: "B2XX", ifsType:   "05XX", points: 16, type: "Type_2"}
    ];

    const key = 'type'
    const dataTable = Object.values(this.API_DATA.reduce((acc, item) => (acc[item[key]] = [...(acc[item[key]] || []), item], acc), {}));

    this.dataSource = dataTable;
  }

mat-table in Angular material with customizable columns :

<table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
  
  <ng-container matColumnDef="{{column}}" *ngFor="let column of definedColumns; let index = index;">
    <th mat-header-cell *matHeaderCellDef> {{column}} </th>
    <td mat-cell *matCellDef="let elements">
      <span *ngFor="let element of elements; let first = first;">
        <span *ngIf="index == 0 && first">{{element.type}}</span>
        <span *ngIf="element.grade == column">{{element.points}}</span>
      </span>
    </td>
  </ng-container>

  <ng-container matColumnDef="action">
    <th mat-header-cell *matHeaderCellDef class="text-right">
        <button mat-icon-button (click)="log('add')">
            <mat-icon color="accent">add_circle_outline</mat-icon>
        </button>
    </th>
    <td mat-cell *matCellDef="let gradingIndex" class="text-right">
        <button mat-icon-button>
            <mat-icon color="primary" (click)="log(gradingIndex)">edit</mat-icon>
        </button>
        <button mat-icon-button (click)="log(gradingIndex)">
            <mat-icon color="warn">delete</mat-icon>
        </button>
    </td>
  </ng-container>

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

Outcome:

https://example.com/image.png

Live demo: here

Answer 4

Initialization of data while grouping by type :

ngOnInit() {
    this.API_DATA = [
      {grade: "Grade A", id: 1, ifsGrade: "A1XX", ifsType:   "01XX", points: 22, type: "Type_1"},
      {grade: "Grade B", id: 2, ifsGrade: "B1XX", ifsType:   "02XX", points: 15, type: "Type_1"},
      {grade: "Grade C", id: 3, ifsGrade: "C1XX", ifsType:   "03XX", points: 1,  type: "Type_1"},
      {grade: "Grade A", id: 4, ifsGrade: "A2XX", ifsType: "04XX", points: 23, type: "Type_2"},
      {grade: "Grade B", id: 5, ifsGrade: "B2XX", ifsType:   "05XX", points: 16, type: "Type_2"}
    ];

    const key = 'type'
    const dataTable = Object.values(this.API_DATA.reduce((acc, item) => (acc[item[key]] = [...(acc[item[key]] || []), item], acc), {}));

    this.dataSource = dataTable;
  }

mat-table in Angular material with customizable columns :

<table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
  
  <ng-container matColumnDef="{{column}}" *ngFor="let column of definedColumns; let index = index;">
    <th mat-header-cell *matHeaderCellDef> {{column}} </th>
    <td mat-cell *matCellDef="let elements">
      <span *ngFor="let element of elements; let first = first;">
        <span *ngIf="index == 0 && first">{{element.type}}</span>
        <span *ngIf="element.grade == column">{{element.points}}</span>
      </span>
    </td>
  </ng-container>

  <ng-container matColumnDef="action">
    <th mat-header-cell *matHeaderCellDef class="text-right">
        <button mat-icon-button (click)="log('add')">
            <mat-icon color="accent">add_circle_outline</mat-icon>
        </button>
    </th>
    <td mat-cell *matCellDef="let gradingIndex" class="text-right">
        <button mat-icon-button>
            <mat-icon color="primary" (click)="log(gradingIndex)">edit</mat-icon>
        </button>
        <button mat-icon-button (click)="log(gradingIndex)">
            <mat-icon color="warn">delete</mat-icon>
        </button>
    </td>
  </ng-container>

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

Outcome:

https://example.com/image.png

Live demo: here

Properly showcase a list of data in a mat-table with dynamically grouped columns

Answer №1

Answer №2

Similar questions

The component is failing to store its value within the database

Having trouble with my implementation of ConvertFrom-Json using an array in an Azure ARM template parameter - seeking help in PowerShell

What is the location of the Typescript project path in Visual Studio 2015 Cordova?

Error occurs when attempting to save and update the model in the store without establishing a connection to the backend

TypeScript does not recognize the $.ajax function

Guide on integrating a plain Service/Provider into nest.js

When dealing with ReactJS, utilize the onChange event for handling updates to nested

Use JavaScript to retrieve a value and display it on a PHP page

Attempting to modify a JSON file within a React application

Searching for JSON nodes with regular expressions

Navigating Paths and Passing Parameters in Angular Routing

Testing the service in Angular that has multiple dependencies using unit tests

How can you update ngModel in Angular and mark the form as dirty or invalid programmatically?

Adding an object to an array in Postgres with TypeORM

Facing issues with Observable and HTTP JSON in Angular

JSON only retrieve the corresponding data

how to include extra arguments in json.dump in python2

Encountered a Next-Auth Error: Unable to fetch data, TypeError: fetch failed within

Error: Unable to inject HttpClient dependency. Angular 5

Organize the JSON formatting in cakePHP for optimal output