[Table] Possibility to add html in between table rows ?

[Lakston]

Bug, feature request, or proposal:

More of a question if this is possible or not.

What is the expected behavior?

I would like to be able to add markup below each row so I can show it conditionally on row click so it would behave like an accordion. Additional infos would be contained in a div with an ngIf and triggered on row click.

To illustrate what I am trying to achieve :

| Firstname | Lastname | email |
| <div *ngIf="row is clicked">Additional Content</div> |
| Firstname | Lastname | email |
| <div *ngIf="row is clicked">Additional Content</div> |

What is the current behavior?

The cdk docs states Any content placed inside of the header row or data row template will be ignored, as the rendered content of the row comes from the cell templates described above. so it seems that what I'm trying to achieve is not possible.

What are the steps to reproduce?

As stated in the docs any attempt to add markup between the md-row tags will be ignored.

[vasslehel-c]

I'm also trying to implement a table where clicking on a row will expand in an another table. Any suggestions are welcome.

[irowbin]

@vasslehel-c Yeah.. That's what i am looking for. Expand/Collapse row child.

[jelbourn]

Please keep GitHub issues for bug reports / feature requests. Better avenues for troubleshooting / questions are stack overflow, gitter, mailing list, etc.

[Lakston]

We should ask people who probably have no idea instead of the people who actually made and know the tool if something is possible ? That doesn't sound great.

[willshowell]

Here is a very brittle example of how you might achieve this:

https://plnkr.co/edit/ZL6OnWwVmOCPYetp96XX?p=preview

However I do wish that this was a little easier. @jelbourn could you comment on whether this is the best approach? As @Lakston alluded to, once people in the community understand how to work with the table, SO/Gitter questions will actually get correct answers. But for now, there's a lot of confusion out there, and certainly no information regarding this particular topic.

[jelbourn]

Our thinking is that stuff like this should go into the row itself; we need to be very restrictive about the structure around the rows because it affects how we do sticky columns and virtual scrolling down the line.

[Lakston]

Thanks @willshowell I didn't even know about the ComponentFactory so you can imagine how far I am to be able to implement something like this on my own :)

I understand @jelbourn 's concerns and the team obviously have a better view of where they want the component to go and how to add such features, we are probably asking for features way to fast but that's your fault, you made an awesome tool and we are excited to use it !

[samcod]

I tried the example referenced by @willshowell and I was able to notice issues in terms of inserted html (which will appear as sibling to the row selected) not always showing bellow that row. This happens when a row is selected after sort or pagination is applied to the table. Any one has a suggestion as to how to ensure the additional html appears bellow the row consistently or if there are alternative approaches to implement row expansion reliably?

[willshowell]

@samcod check the discussion in #6095. The approach used there is much more reliable.

(example in #6095 (comment))

[ngnam]

Here is a very brittle example of how you might achieve this:

https://plnkr.co/edit/ZL6OnWwVmOCPYetp96XX?p=preview

However I do wish that this was a little easier. @jelbourn could you comment on whether this is the best approach? As @Lakston alluded to, once people in the community understand how to work with the table, SO/Gitter questions will actually get correct answers. But for now, there's a lot of confusion out there, and certainly no information regarding this particular topic.

Thank you!

[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.}