wanted to know if someone can shed the light on how to decouple rows in material table. I have a table that has 4 columns, but by default it should show only 2, so there is a button on each row that is labeled ‘more’ so when you click it it should show the other 2 columns. It does work like that. However, when you click on one ‘more’ button, the info is shown for all rows, would like to only show the 4 columns on the row where the button was hit. here is the stackblitz code for reference, any insight is be appreciated!
https://stackblitz.com/edit/mat-table-responsive-udvaoq?file=README.md
tried adding the ngIf but once clicked on the button that was added, all the rows reacted to it, only 1 row is supposed to react to it, meaning they have to be independent
>Solution :
Well, the columns actually have to be there for all the rows – that’s how tables work.
What you could do is hiding the contents of the cells if it was not marked as "show more".
First of all, instead of manipulating a single boolean to show / hide columns, you need an array of booleans – one for each row.
Then you control those by pressing the buttons by passing the index of the row.
Here’s a working stackblitz example – note the changes in all .html, .ts and .css files.