Collapse and expand table row

Hello,

Sorry if this has already been covered elsewhere but I couldn't find anything.

My issue is that I have a table on my dashboard where one column contains a lot of information which is making each row very large and look messy. I see there is an expand on click option under the table component but I cannot get this to do what I want, even after following some posts on here.

I want each row to only show one line of text hiding the rest of the cells contents, but when clicked it will expand to show all the text / data in that specific row and collapse when clicked again.

This is what my table currently looks like;



This looks a mess and what I want is to only show the first line of text so each row is much smaller. When that row is clicked on I want it to then expand to show all the information and collapse if clicked again.

So the table would look like this if row 3 had been clicked on, and then collapse back to the same as the other rows when clicked again:



I hope this makes sense :)

I appreciate any help.