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.
3 Answers
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.
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([]);
}
}
Related