CODEWITHSUNDEEP
angularhtml-tableangular-material
user2339237
user2339237

Reputation: 31

How can I create an expendable table row with Angular Material?

Using Angular Material I need my HTML table to have expandable rows like this: Expendable row

As shown in this figure, when the content is considered too long for a cell, clicking on that (cell/row) will expand out the row. And I can expand the row in if I click on that (cell/row) again.

I tried some similar solutions (mainly this one) for hours, but it didn't work.

I am new to Angular and Angular Material, can someone help?
Thank you!

Upvotes: 0

Views: 155

Answers (1)

bresleveloper
bresleveloper

Reputation: 6066

some options:

  1. your solution is not too bad, just change the content to something else
  2. use Accordion Component inside each tr
  3. just use Accordion Component with *ngFor, no table needed
  4. for pro level make a Component which cascades the Accordion Component with relevant content [title and body] and easy use it with or without table

Upvotes: -1

Related Questions