I want to display only single object data in angular material table in a single column

Question

I want to Display single object data using angular material table in a single column.

For example I have an object like

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

const ELEMENT_DATA: PeriodicElement[] = [
  {position: 1, name: 'Hydrogen', weight: 1.0079, symbol: 'H'},
];


displayedColumns = ['name','position','weight','symbol'];

A single element in the object

I don't want the column names neither I want the data column wise

All I want is I want to render the data row wise one below the other.

so like if I have object of the zeroth Index of an array I want to display all its properties row wise in angular material data table how is it possible?

OR one can suggest any other component for angular material to display the object properties in a same fashion..!!

Here is my Html code for table

<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="position">
    <th mat-header-cell *matHeaderCellDef> No. </th>
    <td mat-cell *matCellDef="let element"> {{element.position}} </td>
  </ng-container>

  <!-- Name Column -->
  <ng-container matColumnDef="name">
    <td mat-cell *matCellDef="let element"> {{element.name}} </td>
  
  </ng-container>

  <!-- Weight Column -->
  <ng-container matColumnDef="weight">
   
    <td mat-cell *matCellDef="let element"> {{element.weight}} </td>
  </ng-container>

  <!-- Symbol Column -->
  <ng-container matColumnDef="symbol">
   
    <td mat-cell *matCellDef="let element"> {{element.symbol}} </td>
  </ng-container>

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

Appearance of Data must be like

• first row must display position: 1
• second row must display name: Hydrogen
• third row must display weight:1.0079
• fourth row must display symbol: 'H'

just mentioned here in bullets but I want like this all data in a single column

here is the link I performed the above code

https://stackblitz.com/edit/angular-vbpdqk?embed=1&file=src/app/table-basic-example.html

Answer 1

You can use ng-repeat-start and ng-repeat-end which looks like :

<table>
  <tr ng-repeat-start="element in items">
    <td>Position</td>
    <td>{{element.postition}}</td>
  </tr>
  <tr>
    <td>Name</td>
    <td>{{element.name}}</td>
  </tr>
  <tr>
    <td>Weight</td>
    <td>{{element.weight}}</td>
  </tr>
  <tr ng-repeat-end>
    <td>Symbol</td>
    <td>{{element.symbol}}</td>
  </tr>
</table>

which your result will be like below:

• position: 1
• name: 'Hydrogen'
• weight:1.0079
• symbol: 'H'
• position: 2
• name: 'Oxygen'
• weight:15.999
• symbol: 'O'

Hope this can help you.

Answer 2

I was just able to sort out this problem by following just need to make tr instead of td in defination

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

  <!-- Position Column -->
  <ng-container matColumnDef="position">
   <tr mat-cell *matCellDef="let element"> Position : {{element.position}} </tr>
  </ng-container>

  <!-- Name Column -->
  <ng-container matColumnDef="name">
    <tr mat-cell *matCellDef="let element"> Name:{{element.name}} </tr>
  </ng-container>

  <!-- Weight Column -->
  <ng-container matColumnDef="weight">
   <tr mat-cell *matCellDef="let element">Symbol: {{element.symbol}} </tr>
  </ng-container>

  <!-- Symbol Column -->
  <ng-container matColumnDef="symbol">
    <tr mat-cell *matCellDef="let element">Weight : {{element.weight}} </tr>
  </ng-container>

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

for Additional we can add the border for each cell border bottom and even for odd an even row shades as we want..!!

Answer 3

In your ts file your will need to define

displayedColumns = ['name','position','weight','symbol'];

Suggestion - dont use table, instead use something like below to print the values

<div *ngFor='let row of ELEMENT_DATA'>
  <ul>
    <li *ngFor='let obj of row | keyvalue'>{{obj.key}}:{{key.value}} </li>
   </ul>
</div>