Angular Material Table (mat-sort-header + expandable rows)

[Bradenb25]

Bug, feature request, or proposal:

Bug

What is the expected behavior?

When creating expandable rows ie (https://stackblitz.com/edit/angular-material-expandable-table-rows) they should only open when clicked. In addition when you add a mat-sort-header and click a header to sort they should not open up.

What is the current behavior?

I created an angular material table with expandable rows and added mat-sort-header to the columns. When I click on a column it sorts, but when it finishes sorting some of the rows are open. In the repro none of the rows are opened, however you can see the affect it is having in mine. Once you filter by the heading you have to click on a row multiple times to get it to open(similar to mine, but with mine it is actually open) I added a console.log so that you can see what the show value is.

What are the steps to reproduce?

https://stackblitz.com/edit/angular-material2-issue-a8kjon

Is there anything else we should know?

I'm pretty sure it is a problem with the when predicate. It doesn't get run correctly when you sort on the header.

[pabloFuente]

Would be nice to solve this issue. Makes impossible to use expandable and sortable rows features together.

I have checked that expandable rows are opened one after the other (sometimes more than one at a time) always at the same order for the same data. Once you close them (clicking twice as @Bradenb25 stated) everything works just fine. You can then click on the sortable header cells: visible rows are sorted and expandable rows are not opened.

[chriskrolak]

A smaller reproduction example that I think shares the same root cause:
https://stackblitz.com/edit/angular-3nq54m?file=app%2Fsort-overview-example.html

After clicking on a desert name it should tilt to the right. After sorting the table, the tilting starts behaving unpredictably.

[pabloFuente]

Okey, fixed by changing my detailExpand animation. This is the one applied to the expandable rows:

<ng-container matColumnDef="expandedDetail">
  <td mat-cell *matCellDef="let element" [attr.colspan]="displayedColumns.length">
    <div class="element-detail" [@detailExpand]="element.expanded ? 'expanded' : 'collapsed'" [style.height]="element.expanded ? 'unset' : '0 !important'">
      <p>My expandable content</p>
    </div>
  </td>
</ng-container>

By changing the animation from

trigger('detailExpand', [
  state('collapsed', style({ height: '0px', minHeight: '0', display: 'none' })),
  state('expanded', style({ height: '*' })),
  transition('expanded <=> collapsed', animate('225ms cubic-bezier(0.4, 0.0, 0.2, 1)')),
])

to

trigger('detailExpand', [
  state('collapsed, void', style({ height: '0px', minHeight: '0', display: 'none' })),
  state('expanded', style({ height: '*' })),
  transition('expanded <=> collapsed', animate('225ms cubic-bezier(0.4, 0.0, 0.2, 1)')),
  transition('expanded <=> void', animate('225ms cubic-bezier(0.4, 0.0, 0.2, 1)'))
])

Only changes are first state('collapsed' to state('collapsed, void' and the last transition(...) line

Now both sorting and expanding rows work as expected.

[pevans360]

Thank you Pablo for the fix!

I got the code from the StackBlitz at https://stackblitz.com/angular/mkgqybdjdmj?file=app%2Ftable-expandable-rows-example.ts and burned a few hours trying to work around it before finding this thread.

Does anybody know how to contact the author so it can be updated?

[JoinThisBand]

Thanks @pabloFuente for the fix!

For anyone else looking at this, I also had to add a second transition parameter to cover the case 'expanded <=> void', e.g:

trigger('detailExpand', [
      state('collapsed, void', style({ height: '0px', minHeight: '0', display: 'none' })),
      state('expanded', style({ height: '*' })),
      transition('expanded <=> collapsed', animate('225ms cubic-bezier(0.4, 0.0, 0.2, 1)')),
      transition('expanded <=> void', animate('225ms cubic-bezier(0.4, 0.0, 0.2, 1)')),
    ])

Otherwise some transitions weren't working after the columns were reordered.

[pabloFuente]

Nice @ClientsideDesign , you're right. Without that second transition the slide animation would be missing when opening a expandable row after sorting. I'll update my answer.

[lppedd]

@pabloFuente Hi! Could you post a complete example? I can't get the OP example to work with your (and @ClientsideDesign) edits.

[pabloFuente]

Sure.

My expandable row (last ng-container and just before <tr> definitions inside <table mat-table [dataSource]="dataSource" matSort multiTemplateDataRows>) is this:

<ng-container matColumnDef="expandedDetail">
  <td mat-cell *matCellDef="let element" [attr.colspan]="displayedColumns.length">
    <div class="element-detail" [@detailExpand]="element.expanded ? 'expanded' : 'collapsed'" [style.height]="element.expanded ? 'unset' : '0 !important'">
      ...
    </div>
  </td>
</ng-container>

And my animation is this:

animations: [
    trigger('detailExpand', [
      state('collapsed, void', style({ height: '0px', minHeight: '0', display: 'none' })),
      state('expanded', style({ height: '*' })),
      transition('expanded <=> collapsed', animate('225ms cubic-bezier(0.4, 0.0, 0.2, 1)')),
      transition('expanded <=> void', animate('225ms cubic-bezier(0.4, 0.0, 0.2, 1)'))
    ]), .....
]

Obviously yuor dataSource elements need an expanded property that should change when clicking on a row, so the animation state change is triggered. Something like:

dataSource: MatTableDataSource<MyTableElement>;

export interface MyTableElement {
  data1: string;
  data2: string;
  expanded: boolean;
}

[lppedd]

@pabloFuente Thanks ;)

[jayeshkorat18]

Okey, fixed by changing my detailExpand animation. This is the one applied to the expandable rows:

<ng-container matColumnDef="expandedDetail">
  <td mat-cell *matCellDef="let element" [attr.colspan]="displayedColumns.length">
    <div class="element-detail" [@detailExpand]="element.expanded ? 'expanded' : 'collapsed'" [style.height]="element.expanded ? 'unset' : '0 !important'">
      <p>My expandable content</p>
    </div>
  </td>
</ng-container>

By changing the animation from

trigger('detailExpand', [
  state('collapsed', style({ height: '0px', minHeight: '0', display: 'none' })),
  state('expanded', style({ height: '*' })),
  transition('expanded <=> collapsed', animate('225ms cubic-bezier(0.4, 0.0, 0.2, 1)')),
])

to

trigger('detailExpand', [
  state('collapsed, void', style({ height: '0px', minHeight: '0', display: 'none' })),
  state('expanded', style({ height: '*' })),
  transition('expanded <=> collapsed', animate('225ms cubic-bezier(0.4, 0.0, 0.2, 1)')),
  transition('expanded <=> void', animate('225ms cubic-bezier(0.4, 0.0, 0.2, 1)'))
])

Only changes are first state('collapsed' to state('collapsed, void' and the last transition(...) line

Now both sorting and expanding rows work as expected.

Thanks @pabloFuente You save my day

[pabloFuente]

In recent versions of the library, I had to remove display property in the state declaration for the animation to work from collapsed to expanded. So:

state('collapsed, void', style({ height: '0px', minHeight: '0', display: 'none' })),

now is simply

state('collapsed, void', style({ height: '0px' })),

[NithinBiliya]

Though this fixes the issue, it is just a work around. The underlying problem of the state being updated to 'void' after sort still exists. (v8.0.1 of the libraries)

stackblitz

Steps to reproduce -

1. Immediately after page load, click on "sysbol" header to sort the table
2. Click on the first element
3. Notice that the animation to expand the row to show the details is not working.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}