Angular material table collapse/expand complete table so only header is visible

Question

I got many material tables on my page, to make browsing easier I would like to make a complete table collapse/expand when clicking on the header (or a small button inside the header). I find many examples on how to expand table rows but I need to collapse the complete table.

i suggest you that use expansion panel and use table after `mat-expansion-panel-header` element. — Amir Azizkhani, Jun 27 '20 at 06:33

score 1 · Answer 1 · answered Jun 25 '20 at 19:46

1

I just thought of using mat-table inside mat-expansion panel.

I gave it a try and I believe it would satisfy your requirement.

Please check if this Stackblitz satisfies your requirement.

answered Jun 25 '20 at 19:46

Akhil

1,403
7
19

That is indeed close to my wanted behavior. but my table headers & footers actually contain data that should still be visible. I was thinking about assigning an empty array to the tabledatasource when collapsed and reassigning the original array when expanded. still have to try that though. – Steven B. Jun 25 '20 at 21:47

score 1 · Accepted Answer · answered Jul 23 '20 at 19:26

Solution:

When tapping collapse, I assign an empty array to the data source of that table. when clicking expands I reassign the original array to the data source of that table. This way my header&footer cells which contain totals for the table are still visible but the inner cells are not.

Something like the code below should allow this behavior:

collapse(index: number) {
if (this.contracts[index].tabledatasource.data.length == 0) {
  this.contracts[index].tabledatasource = new MatTableDataSource(this.stockArray[index]);
} else {
  this.contracts[index].tabledatasource = new MatTableDataSource([]);
}


}

Angular material table collapse/expand complete table so only header is visible

2 Answers2