I want to display data in row but it display in column... How to change it

Question

As i mentioned in the title i have problem with displaying data in row...

Example, I want to display like this:

but it display like this:

And this is my code:

<table mat-table [dataSource]="dataSource" multiTemplateDataRows class="mat-elevation-z8-">
  <ng-container matColumnDef="{{column}}" *ngFor="let column of columnsToDisplay">
    <th mat-header-cell *matHeaderCellDef> {{column}} </th>
    <td mat-cell *matCellDef="let element; let i = index" class="pointer">
      <p *ngIf="column.length == 11">{{element.agentName}}</p>
    </td>
  </ng-container>

  <!-- Expanded Content Column - The detail row is made up of this one column that spans across all columns -->
  <ng-container matColumnDef="expandedDetail">
    <td mat-cell *matCellDef="let element of " [attr.colspan]="columnsToDisplay.length">
      <div class="example-element-detail" [@detailExpand]="element == expandedElement ? 'expanded' : 'collapsed'">
        <div class="element-sub" *ngFor="let item of element.listagentstatus">
          <div mat-cell class="element-agent"></div>
          <div mat-cell class="element-url"><a href="{{item.mainUrl}}"> {{item.mainUrl || null}}</a> </div>
          <div mat-cell class="element-status"> {{item.status}} </div>
          <div mat-cell class="element-lastrun"> {{item.datetime | date: 'dd/MM/yyyy (h:mm)'}} {{columnsToDisplay.length}} </div>
        </div>

      </div>
    </td>
  </ng-container>

  <tr mat-header-row *matHeaderRowDef="columnsToDisplay"></tr>
  <tr mat-row *matRowDef="let element; columns: columnsToDisplay;" class="example-element-row" [class.example-expanded-row]="expandedElement === element"
  (click)="expandedElement = expandedElement === element ? null : element">
  </tr>
  <tr mat-row *matRowDef="let item; columns: ['expandedDetail']" class="example-detail-row"></tr>
</table>

Where should I change..

Hope you all can help..

Thanks in advance..

Answer 1

I have got the answer... I just put <div class="rTableRow">

You can refer this code

    <table mat-table [dataSource]="dataSource" multiTemplateDataRows class="mat-elevation-z8-">
  <ng-container matColumnDef="{{column}}" *ngFor="let column of columnsToDisplay">
    <th mat-header-cell *matHeaderCellDef> {{column}} </th>
    <td mat-cell *matCellDef="let element; let i = index" class="pointer">
      <p *ngIf="column.length == 11">{{element.agentName}}</p>
    </td>
  </ng-container>

  <!-- Expanded Content Column - The detail row is made up of this one column that spans across all columns -->
  <ng-container matColumnDef="expandedDetail">
    <td mat-cell *matCellDef="let element of " [attr.colspan]="columnsToDisplay.length">
      <div class="example-element-detail" [@detailExpand]="element == expandedElement ? 'expanded' : 'collapsed'">
     <div class="rTableRow"> <!-- I add this class -->
        <div class="element-sub" *ngFor="let item of element.listagentstatus">
          <div mat-cell class="element-agent"></div>
          <div mat-cell class="element-url"><a href="{{item.mainUrl}}"> {{item.mainUrl || null}}</a> </div>
          <div mat-cell class="element-status"> {{item.status}} </div>
          <div mat-cell class="element-lastrun"> {{item.datetime | date: 'dd/MM/yyyy (h:mm)'}} {{columnsToDisplay.length}} </div>
        </div>
       </div>
      </div>
    </td>
  </ng-container>

  <tr mat-header-row *matHeaderRowDef="columnsToDisplay"></tr>
  <tr mat-row *matRowDef="let element; columns: columnsToDisplay;" class="example-element-row" [class.example-expanded-row]="expandedElement === element"
  (click)="expandedElement = expandedElement === element ? null : element">
  </tr>
  <tr mat-row *matRowDef="let item; columns: ['expandedDetail']" class="example-detail-row"></tr>
</table>

And in css file

.rTableRow {
display: table-row;
width: 100%

}