CODEWITHSUNDEEP
javascriptangularangular-materialangular8
kushal Baldev
kushal Baldev

Reputation: 769

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

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

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

Upvotes: 0

Views: 8021

Answers (3)

maxkart
maxkart

Reputation: 667

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>

Upvotes: 0

kushal Baldev
kushal Baldev

Reputation: 769

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

Upvotes: 1

Sheng Hong
Sheng Hong

Reputation: 46

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.

Upvotes: 1

Related Questions