1

I already been in angular material project with expandable rows and succeed in making those, by referring here. But i got a bit of a problem since the example I'm following only got one column in for the expanded row. So my question is can I make the expandable row have the exact column as the parent row? And if it possible, can I have some example/guide?

Thanks in advance.

I already tried making a table in the expanded row, but the issue is the table are a bit troublesome to align with the parent column. I would like if I could use mat-table just as the same as the parent column just without the [datasource] since the data I'm trying to display is already in the expanded row.

<!-- Expanded Column - The detail row is made up of this one column -->
<ng-container matColumnDef="expandedDetail">
  <mat-cell *matCellDef="let detail"> -- Im want to use data in 'detail'
    -- table in here that has the same column as the parent table --
  </mat-cell>
</ng-container>

<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
<mat-row *matRowDef="let row; columns: displayedColumns;"
        matRipple 
        class="element-row" 
        [class.expanded]="expandedElement == row"
        (click)="expandedElement = row"></mat-row>
<mat-row *matRowDef="let row; columns: ['expandedDetail']; when: isExpansionDetailRow"
        [@detailExpand]="row.element == expandedElement ? 'expanded' : 'collapsed'"
        style="overflow: hidden"> 
</mat-row>

Say the table got 5 parent column, so I would expect the expanded row would have 5 column as well which follow the parent column width.

Syahrulez Anuar
  • 13
  • 1
  • 4
  • You're not alone - I have the same wish. Few thoughts from my own searches: changing colspan to 4 in [this](https://stackblitz.com/edit/am-all-imports-svee9v?file=app%2Fapp.component.html) example on stackblitz and changing CSS ` – Andrew Allen Apr 10 '19 at 13:23
  • looking at (this)[https://www.dzurico.com/angular-master-detail-table/] blog post and the `ngx-nested-data-table` on (github)[https://github.com/daniele-zurico/ngx-nested-data-table] it seems better progammers than me have resorted to the same method of inserting a table a fixing with css, accepting the imperfections. – Andrew Allen Apr 10 '19 at 13:48
  • 1
    @AndrewAllen I've been using that example for now, already got it perfectly aligned on my screen but somehow on different screen still got misaligned.. – Syahrulez Anuar Apr 11 '19 at 03:03

1 Answers1

4

You need to tell the expanded row how many columns you want it to span. If you want it to span all of your columns, you can just use [attr.colspan]="displayedColumns.length".

Your expanded row:

<td mat-cell *matCellDef="let element" [attr.colspan]="displayedColumns.length">

If you want to display data in a table format, unfortunately I think you have to add another mat-table inside your expanded row, I don't think you can "reuse" the already existing table.

Check my previous answer to a similar question here.

I have modified the stackblitz that I posted there a bit, so that it reflects your needs. It displays the same column definition in the expanded row as well, you just need to set a new datasource.

Fabian Küng
  • 5,925
  • 28
  • 40
  • Thanks, I already viewed your stackblitz example before. But the actual problem is that the column aren't aligned. I need it to be perfectly align and follow the parents column width when screen size changed. – Syahrulez Anuar Apr 11 '19 at 10:00
  • I see. What comes to mind to solve this, would be to manipulate the datasource used for the original MatTable and just insert the rows you want to show including a title row. Let me quickly throw a stackblitz together. – Fabian Küng Apr 11 '19 at 10:45
  • 1
    You could try something like [this](https://stackblitz.com/edit/am-all-imports-aubkn9?file=app%2Fapp.component.ts). Where you modify your original dataSource so you will have no resizing/alignment issues. The only problem here is that you have to manually modify your dataSource and change the model properties to accomodate your subtitle rows. Very very ugly but it resembles somewhat of a solution approach to your problem. – Fabian Küng Apr 11 '19 at 11:39
  • @FabianKing Yeah. This is what I'm looking for. I just need another datasource for the table inside the expanded row. Thank you very much. [link](https://stackblitz.com/edit/am-all-imports-aubkn9?file=app%2Fapp.component.ts) – Syahrulez Anuar Apr 15 '19 at 03:43