How to change the direction of the columns in the Angular Material table?

Question

Does anyone know how in the table from this example: https://stackblitz.com/angular/dlxbkjqaoba?file=app%2Ftable-basic-example.ts

Make it so that the columns are directed horizontally, roughly like in the picture:

Answer 1

You can use invert the table in an ngOnInit() method in the class to give the required data structure and then iterate over the column list in the HTML to give the required columns. Below is an example:

ts file:

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

/**
 * @title Basic use of `<table mat-table>`
 */
@Component({
  selector: 'table-basic-example',
  styleUrls: ['table-basic-example.css'],
  templateUrl: 'table-basic-example.html',
})
export class TableBasicExample implements OnInit {
  inputColumns = ['position', 'name', 'weight', 'symbol'];
  inputData = ELEMENT_DATA;

  displayColumns: string[];
  displayData: any[];
  showTable: boolean;

  ngOnInit() {
    this.displayColumns = this.inputData.map(x => x.position.toString());
    this.displayData = this.inputColumns.map(x => this.formatInputRow(x));

    console.log(this.displayColumns);
    console.log(this.displayData);

    this.showTable = true;
  }

  formatInputRow(row) {
    const output = {};

    for (let i = 0; i < this.inputData.length; ++i) {
      output[this.inputData[i].position] = this.inputData[i][row];
    }

    return output;
  }
}

export interface PeriodicElement {
  name: string;
  position: number;
  weight: number;
  symbol: string;
}

const ELEMENT_DATA: PeriodicElement[] = [
  {position: 1, name: 'Hydrogen', weight: 1.0079, symbol: 'H'},
  {position: 2, name: 'Helium', weight: 4.0026, symbol: 'He'},
  {position: 3, name: 'Lithium', weight: 6.941, symbol: 'Li'},
  {position: 4, name: 'Beryllium', weight: 9.0122, symbol: 'Be'},
  {position: 5, name: 'Boron', weight: 10.811, symbol: 'B'},
  {position: 6, name: 'Carbon', weight: 12.0107, symbol: 'C'},
  {position: 7, name: 'Nitrogen', weight: 14.0067, symbol: 'N'},
  {position: 8, name: 'Oxygen', weight: 15.9994, symbol: 'O'},
  {position: 9, name: 'Fluorine', weight: 18.9984, symbol: 'F'},
  {position: 10, name: 'Neon', weight: 20.1797, symbol: 'Ne'},
];


/**  Copyright 2018 Google Inc. All Rights Reserved.
    Use of this source code is governed by an MIT-style license that
    can be found in the LICENSE file at http://angular.io/license */

html file:

<table mat-table [dataSource]="displayData" class="mat-elevation-z8" *ngIf="showTable">

  <!--- 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]="column" *ngFor="let column of displayColumns">
    <th mat-header-cell *matHeaderCellDef> {{ column }} </th>
    <td mat-cell *matCellDef="let element"> {{ element[column] }} </td>
  </ng-container>

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



<!-- Copyright 2018 Google Inc. All Rights Reserved.
    Use of this source code is governed by an MIT-style license that
    can be found in the LICENSE file at http://angular.io/license -->

and working stackblitz: https://stackblitz.com/edit/angular-h6dvzc

edited stackblitz: https://stackblitz.com/edit/angular-h6dvzc-jjqdpk