I'm currently facing a challenge with getting my code to function as required.
In the demonstration provided, there is a table where clicking the add button inserts a new row. Once the table reaches a certain height (let's say after adding 5 rows), I need a vertical scroll bar to appear while maintaining a sticky header. Essentially, I want to set a fixed height for the table rows.
Refer to the attached screenshot for the desired location of the scroll bar placement, despite the shaky highlight.
The HTML structure is outlined below:
<div class="table-container">
<table mat-table [dataSource]="dataSource">
<ng-container matColumnDef="category">
...
</ng-container>
...
</table>
<div *ngIf="dataSource.filteredData.length > 0" > <mat-paginator [pageSizeOptions]="[5]" showFirstLastButtons class="paginator"></mat-paginator></div>
</div>
Component Add Function:
addRow() {
this.doAddRow();
this.expanded = false;
}
private doAddRow() {
ELEMENT_DATA.push({ code: '', type: '', reference: '' });
this.dataSource = new MatTableDataSource(ELEMENT_DATA);
}