0

I am creating a table using angular material table and I want to have a master-detail view, where I have a row as the master (for example Provider) and under that row I want to have a list of details (for example a list of Deal items).

I have seen the Table with expandable rows from here, however in that example each master row needs to be clicked to reveal the detail.

Is there a possibility of always showing the extra detail rows after each master row without having to click each master row to reveal the detail?

I have tried using the when predicate and always return true, however that just shows the detail rows in each of the master rows. The master rows are lost.

1 Answer 1

2

Is there a possibility of always showing the extra detail rows after each master row without having to click each master row to reveal the detail?

You can always create a custom table, providing rows as dense with details as you want.

Starting from the example of Expandable rows, I edited the code taking the logic of showing and hiding the details away, so the detail are always visibile:

<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"> {{element[column]}} </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" [attr.colspan]="columnsToDisplay.length">
      <div class="example-element-detail expanded">
        <div class="example-element-diagram">
          <div class="example-element-position"> {{element.position}} </div>
          <div class="example-element-symbol"> {{element.symbol}} </div>
          <div class="example-element-name"> {{element.name}} </div>
          <div class="example-element-weight"> {{element.weight}} </div>
        </div>
        <div class="example-element-description">
          {{element.description}}
          <span class="example-element-description-attribution"> -- Wikipedia </span>
        </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">
  </tr>
  <tr mat-row *matRowDef="let row; columns: ['expandedDetail']" class="example-detail-row"></tr>
</table>

https://stackblitz.com/edit/angular-rgyuhs?embed=1&file=app/table-expandable-rows-example.html

Observe that the div with the class "example-element-detail" also have "expanded" class (which of course could be any other name) and all the content defined in the "expandedDetail" will always be displayed in tr "example-detail-row"

Sign up to request clarification or add additional context in comments.

1 Comment

Thank you, this worked. I was missing the multiTemplateDataRows attribute from the table and was getting some errors.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.