Angular Material Table expand row on column/icon click

Question

There are numerous questions regarding this topic specifically with regards to expanding rows. However, all implementations I have seen are done by either using accordion/panels styled like tables (which require more things to be done to accommodate pagination and sorting), using the when predicate (which seems to have issues when trying to utilize pagination), or what seems to be the ideal solution is to have a directive attached to the mat-row element.

The last solution is really close to what I need to have done. Basically, if you click anywhere on the row, it will expand. See this example. However, in my case, in one of the columns, I have a link where the user can click on to see some other information that opens in another tab. As a result, when you click on the link, it will open it as well as expand the row.

To me, its ok, however, to our customer, it isn't and the best work around I can see is to have the row expand on a click on a column which has simply a plus icon. It would be ideal to expand only on that icon click, but baby steps for now.

Has anyone encountered a similar situation and have some kind of solution? Just would like to be put in the right direction. So far, I have done whatever is in the stackblitz attached and it works great. Just need this last step to make the client happy!

Simon K · Accepted Answer · 2018-05-21 02:53:48Z

6

This is a slightly hacky way of doing it but it works:

HTML:

<!-- Name Column -->
<ng-container matColumnDef="name">
    <mat-header-cell *matHeaderCellDef> Name </mat-header-cell>
    <mat-cell *matCellDef="let element"><span (click)="showDetails($event, element)">{{element.name}}</span> 
    </mat-cell>
</ng-container>

TS:

showDetails(event: UIEvent, element): void {
    event.stopPropagation();
    // Do whatever with the element
}

The important part is that you're passing the UIEvent (click event) to the TS and the calling stopPropagation on it to stop the table from expanding.

answered May 21, 2018 at 2:53

Simon K

2,8771 gold badge15 silver badges21 bronze badges

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

2 Comments

Eric Rangil Over a year ago

May be "hacky" but it does work! Going to accept the answer. One slight issue is that if a cell is empty --in my case its possible--then it will still expand. Basically the solution works if there is some content in the cell. If you were to click any where around the text in the cell, it would still expand though it is understandable since the function is called in the span tag which only wraps the text itself. May mess around a little with the CSS and see if I can get the span to be the size of the entire cell. Nonetheless, this definitely put me in the right path. Thanks Simon!

Eric Rangil Over a year ago

Solved my specific issue. Instead of putting the click event in a span tag, I just put it in the mat-cell tag. Seems to be working well so far and the link is still clickable but will not expand the row. Wish I could upvote this way more than once!

Collectives™ on Stack Overflow

Angular Material Table expand row on column/icon click

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related