Table arranged by column orientation

Question

Table arranged by column orientation

I am facing a unique scenario where the backend data I receive is organized in a column-oriented format. Here is an example of how the data structure looks:

[
    { columnName: "ID", cells: [1, 2, 3, 4, 5] },
    { columnName: "Name", cells: ["a", "b", "c", "d", "e"] }
]

Currently, I have configured my mat-table in the following way:

<table mat-table [dataSource]="data" class="mat-elevation-z8">
    <ng-container [matColumnDef]="column" *ngFor="let column of displayedColumns">
        <th mat-header-cell *matHeaderCellDef> {{column}} </th>
        <td mat-cell *matCellDef="let element">{{element | json}}</td>
    </ng-container>

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

This setup results in the current display:

https://i.sstatic.net/0tVon.png

However, I am aiming for a table layout like this:

|------|------|
|  ID  | NAME |
|------|------|
|   1  |   a  |
|   2  |   b  |
|   3  |   c  |
|   4  |   d  |
|   5  |   e  |

Is there a way to adjust the matRowDef so that it interprets the cells property as rows? Ideally, I would prefer making this adjustment within the mat-table without altering my data and having to convert it back later on.

angular typescript angular-material mat-table

Answer 1

Answer №1

If you need to customize the existing response, you can try making changes accordingly:

HTML Snippet:

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

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

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

Typescript Code:

import { Component } from '@angular/core';

import { MatTableDataSource } from '@angular/material';

const TABLE_DATA: any[] = [
  { heading: "Number", cells: [1, 2, 3, 4, 5] },
  { heading: "Letter", cells: ["a", "b", "c", "d", "e"] }
];

/**
 * @title An example demonstrating the use of `<table mat-table>`
 */
@Component({
  selector: 'table-basic-example',
  styleUrls: ['table-basic-example.css'],
  templateUrl: 'table-basic-example.html',
})
export class TableBasicExample {
  displayedColumns = [];
  dataSource = new MatTableDataSource([]);

  constructor() {
    // Get the column headings dynamically
    TABLE_DATA.forEach(item => {
      this.displayedColumns.push(item.heading);
    })

    // Customize the array for display purposes
    let modifiedArray = TABLE_DATA.reduce((array, { heading, cells }) => {
      cells.forEach((cell, index) => {
        array[index] = Object.assign({ [heading]: cell }, array[index]);
      })
      return array;
    }, [])
    this.dataSource = new MatTableDataSource(modifiedArray);
  }
}

Link to StackBlitz

Answer 2

If you need to customize the existing response, you can try making changes accordingly:

HTML Snippet:

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

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

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

Typescript Code:

import { Component } from '@angular/core';

import { MatTableDataSource } from '@angular/material';

const TABLE_DATA: any[] = [
  { heading: "Number", cells: [1, 2, 3, 4, 5] },
  { heading: "Letter", cells: ["a", "b", "c", "d", "e"] }
];

/**
 * @title An example demonstrating the use of `<table mat-table>`
 */
@Component({
  selector: 'table-basic-example',
  styleUrls: ['table-basic-example.css'],
  templateUrl: 'table-basic-example.html',
})
export class TableBasicExample {
  displayedColumns = [];
  dataSource = new MatTableDataSource([]);

  constructor() {
    // Get the column headings dynamically
    TABLE_DATA.forEach(item => {
      this.displayedColumns.push(item.heading);
    })

    // Customize the array for display purposes
    let modifiedArray = TABLE_DATA.reduce((array, { heading, cells }) => {
      cells.forEach((cell, index) => {
        array[index] = Object.assign({ [heading]: cell }, array[index]);
      })
      return array;
    }, [])
    this.dataSource = new MatTableDataSource(modifiedArray);
  }
}

Link to StackBlitz

Table arranged by column orientation

Answer №1

Similar questions

Show the quantity of chosen selections utilizing ng-select

I am unsure why it is displaying these errors

Is it possible for Typescript to allow extracted interfaces while excluding properties from another interface?

Developing a custom pipe in Angular4

Angular 17 Pokedex Encyclopedia

Steps for making a GET request from an API in Angular 7

activating serverless.yml for aws-xray

What is the best way to eliminate existing double quotation marks within string values stored in objects in Angular?

FormArray in Angular2 can be nested inside another FormArray

Dealing with router parameters of an indefinite number in Angular 5: A comprehensive guide

"Incorporating the node_modules folder into the Express.js compilation process

Guidelines for importing dependencies of nested components in Angular 6

Issue with Navigating Angular Buttons

Display content from Angular 5 template directly in table without using parent template

Demonstrating reactivity: updating an array property based on a window event

Managing Import Structure in Turborepo/Typescript Package

Visual Studio encountering an error with AngularJS TypeScript integration

What is the process for removing an item from a JSON file using an HTTP DELETE request in a Node.js environment?

Developing a Typescript npm package

Utilizing custom colors in a Typescript/React/MUI Button component to enhance its design