Create nested collapsible tables using Angular

Question

I'm displaying a table that consists of all of the events a specific team as attended in a given year. Each row of the table gives some general stats for a single event (seed, placement, etc). When I click on any given row, I want to expand a nested table that shows all the games from that specific event.

I'm having some issues with the formatting. Right now when I expand the new table, it reformats the parent table in a strange way and all of the nested table columns only stretch across the first of the parent table. How can I make it the same width of the parent table?

Here is an example

and here is a screenshot of the more pretty formatted table in case the stackblitz example is hard to see.

Collapsed:

Expanded:

Yannick Beauchamp-H · Accepted Answer · 2021-02-11 06:12:12Z

2

You need to place your nested table in a tr and td with a colspan="4"

See the updated example: https://stackblitz.com/edit/angular-ivy-wnr2qn-nested-table

answered Feb 11, 2021 at 6:12

Yannick Beauchamp-H

1,70111 silver badges13 bronze badges

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

1 Comment

bmorgs Over a year ago

Beautiful, thank you!! Next step is to animate it so it glides in and out...time to google CSS tricks :)

Guiditox · Accepted Answer · 2021-02-11 06:58:49Z

1

Full code. Just change ng-container for a tr.

Full code: https://stackblitz.com/edit/angular-ivy-kutwtd

Example live: Here

IMAGES EXAMPLE

edited Feb 11, 2021 at 6:58

answered Feb 11, 2021 at 6:15

Guiditox

6574 silver badges10 bronze badges

Collectives™ on Stack Overflow

Create nested collapsible tables using Angular

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related