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

CodePudding user response：

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.