Utilizing Angular Material Table to present information efficiently

Question

Utilizing Angular Material Table to present information efficiently

I have a unique data structure that I need to present using mat-table.

dataSource= [[1,2],[3,4],[5,6]]

In this structure, dataSource[0] always serves as the heading, with the rest of the array items representing its rows.

Therefore, the expected output for the above data should be as follows:

1 2 Table Heading

3 4

5 6

Is it possible to achieve the above data structure using mat-table? Any assistance is appreciated.

Note: I have reviewed the mat-table documentation but haven't found anything that addresses my specific needs.

angular typescript angular-material

Answer 1

Answer №1

To accomplish this task, you must first extract the column names' values and separate them from the actual data.

export class TableBasicExample {
  data = [[1,2],[3,4],[5,6]];
  dataSource = this.data.splice(1);
  displayedColumns: string[] = this.data[0].map(value => String(value));
}

You can dynamically bind these dataSource and column names in your template.

<table mat-table [dataSource]="dataSource" class="mat-elevation-z8">

    <!--- Note that these columns can be defined in any order.
        The actual rendered columns are set as a property on the row definition" -->

    <!-- Position Column -->
    <ng-container matColumnDef="{{displayedColumns[0]}}">
        <th mat-header-cell *matHeaderCellDef> {{displayedColumns[0]}} </th>
        <td mat-cell *matCellDef="let element"> {{element[0]}} </td>
    </ng-container>

    <!-- Name Column -->
    <ng-container matColumnDef="{{displayedColumns[1]}}">
        <th mat-header-cell *matHeaderCellDef> {{displayedColumns[1]}} </th>
        <td mat-cell *matCellDef="let element"> {{element[1]}} </td>
    </ng-container>

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

You can view the functional stackblitz example here: https://stackblitz.com/edit/angular-nmnymd

Answer 2

To accomplish this task, you must first extract the column names' values and separate them from the actual data.

export class TableBasicExample {
  data = [[1,2],[3,4],[5,6]];
  dataSource = this.data.splice(1);
  displayedColumns: string[] = this.data[0].map(value => String(value));
}

You can dynamically bind these dataSource and column names in your template.

<table mat-table [dataSource]="dataSource" class="mat-elevation-z8">

    <!--- Note that these columns can be defined in any order.
        The actual rendered columns are set as a property on the row definition" -->

    <!-- Position Column -->
    <ng-container matColumnDef="{{displayedColumns[0]}}">
        <th mat-header-cell *matHeaderCellDef> {{displayedColumns[0]}} </th>
        <td mat-cell *matCellDef="let element"> {{element[0]}} </td>
    </ng-container>

    <!-- Name Column -->
    <ng-container matColumnDef="{{displayedColumns[1]}}">
        <th mat-header-cell *matHeaderCellDef> {{displayedColumns[1]}} </th>
        <td mat-cell *matCellDef="let element"> {{element[1]}} </td>
    </ng-container>

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

You can view the functional stackblitz example here: https://stackblitz.com/edit/angular-nmnymd

Answer 3

Answer №2

If you want to create a dynamic table based on your data, follow these steps:

In the component.ts file:

public data: any[] = [['age', 'height'], [3, 4], [5, 6]]
  public dataSource: any[] = [];
  displayedColumns: string[] = [];
  isDataReady: boolean = false;

  constructor() {
    this.displayedColumns = this.data[0];
    let tempArr = this.data.slice(1, this.data.length);
    tempArr.forEach((el: any[]) => {
      let obj: any = {};
      el.forEach((key, i) => {
        obj[this.displayedColumns[i]] = key;
      });
      this.dataSource.push(obj);
    });
  }

Then, in the component.html, create the table columns like this:

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

Check out the working example demo

Answer 4

If you want to create a dynamic table based on your data, follow these steps:

In the component.ts file:

public data: any[] = [['age', 'height'], [3, 4], [5, 6]]
  public dataSource: any[] = [];
  displayedColumns: string[] = [];
  isDataReady: boolean = false;

  constructor() {
    this.displayedColumns = this.data[0];
    let tempArr = this.data.slice(1, this.data.length);
    tempArr.forEach((el: any[]) => {
      let obj: any = {};
      el.forEach((key, i) => {
        obj[this.displayedColumns[i]] = key;
      });
      this.dataSource.push(obj);
    });
  }

Then, in the component.html, create the table columns like this:

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

Check out the working example demo

Utilizing Angular Material Table to present information efficiently

Answer №1

Answer №2

Similar questions

In Ionic 2, trying to access the IONIC_ENV variable consistently results in it being undefined

Looking for guidance on implementing explicit waits in Protractor for non-angular applications

The status property in Angular 4 is currently not defined or is referencing a null value

Issue: Encountering an ObjectUnsubscribedError while using Observables in RxJS and Angular2

How to use multiple template urls in Angular 6

The Javascript Node class encountered an error: X has not been defined

What is the best way to dynamically add fields to every object in an array of Firestore documents using RxJS?

Tips for transferring observable to parent component in angular 2?

Prevent Ionic 2 hardware back button from triggering default action

How are the .map files utilized in angular-cli, and is there a way for ng build to generate these files automatically?

Angular 8: ngx-socket-io changes the connection URL while in production mode

NPM is lacking in providing sufficient guidance on resolving dependency problems

Utilizing environment variables in the root files of your SvelteKit project: A guide

Type to match the data type of the enum, not strictly one specific value

You cannot access the property 'subscribe' on a void type in Angular 2

Guide on setting up an AWS code pipeline for Elastic Beanstalk deployment on ASP.NET Core 5.0 with Angular

Having trouble establishing a connection with Db2 while using protractor

How to implement div scrolling on button click using Angular 4

Using Ngrx with Angular

PhantomJS version 2.1.1 encountered an error on a Windows 7 system, displaying "ReferenceError: Map variable not found."