CODEWITHSUNDEEP
htmlangularbootstrap-4
bmorgs
bmorgs

Reputation: 245

Create nested collapsible tables using Angular

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: enter image description here

Expanded: enter image description here

Upvotes: 3

Views: 4018

Answers (2)

Guiditox
Guiditox

Reputation: 657

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

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

Example live: Here

IMAGES EXAMPLE

enter image description here

enter image description here

Upvotes: 1

Yannick Beauchamp-H
Yannick Beauchamp-H

Reputation: 1671

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

Upvotes: 2

Related Questions