Vertical Headings table Angular material

Question

in this example, ( https://stackblitz.com/edit/angular-ivy-xtyoyq?file=src/app/app.component.ts ), we have basic table, but in my case I want to make this table like this :

table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
}
th, td {
  padding: 5px;
  text-align: left;
}

<table style="width:100%">
<tr>
    <th>No.</th>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
  </tr>
  <tr>
    <th>Name</th>
    <td>Hydrogen</td>
    <td>Helium</td>
    <td>Lithium</td>
    <td>Beryllium</td>
            
  </tr>
  <tr>
    <th>Weight</th>
    <td>1.0079</td>
    <td>4.0026</td>
    <td>6.941</td>
    <td>9.0122</td>
  </tr>
   <tr>
    <th>Symbol</th>
    <td>H</td>
    <td>He</td>
    <td>Li</td>
    <td>Be</td>
  </tr>
</table>

please help!!

score 1 · Accepted Answer · answered May 29 '22 at 17:59

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:

Html File:

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

  <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>

TS File:

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

@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'},
];

Working Example here

Hello Mr Sumit, thank you for help , i do it with other methode like this :

{{item}} — Aziz bouchtaoui, May 29 '22 at 23:08
sorry for the firsts comment I'm newbie stack overflow thank you for help , i do this //the headers row //body but the problem is when I want to style my table like the first or the third row with background color red, in my case I cannot style mu table because I have one td, do you have any idea?

{{item}} {{data}} — Aziz bouchtaoui, May 29 '22 at 23:17
`tr:nth-child(odd) { background-color: red; }`put this in your css. — Sumit Sharma, May 30 '22 at 03:41

score 0 · Answer 2 · answered May 29 '22 at 04:32

0

Need to override styles of angular material, Apply styles in global file so it can override it. If you apply in component it would not work due to view encapsulation. Note: Never use ng-deep in any file.

answered May 29 '22 at 04:32

Muhammad Azeem Saleem

1
2

I don't understand how to do it with ng-container... , can you help me – Aziz bouchtaoui May 29 '22 at 12:02

Vertical Headings table Angular material

2 Answers2