I recently integrated an Angular Material table into my website, following the examples provided on the official Angular page (link to the examples). I wanted the table rows to be expandable similar to the "Table with expandable rows" example on the Angular site. However, I noticed that there were gaps in the collapsed rows which revealed a small portion of the expandable part of the row (picture showing the issue).
In addition, I also implemented the filter function and remove/add column functions from the Angular Material examples. Could this have affected the styling of the table?
Upon inspecting the browser console, I found that the problem was due to a padding of the table rows set to 0.75rem in the bootstrap.css file. Adjusting the padding to 0 made the normal rows look unappealing. Is there a way to eliminate these unsightly gaps without compromising the overall design?
The Angular component contains animations for the expandable rows:
@Component({
selector: 'app-compare-page',
templateUrl: './compare-page.component.html',
styleUrls: ['./compare-page.component.css'],
animations: [
trigger('detailExpand', [
state('collapsed', style({height: '0px', minHeight: '0'})),
state('expanded', style({height: '*'})),
transition('expanded <=> collapsed', animate('225ms cubic-bezier(0.4, 0.0, 0.2, 1)')),
]),
]
})
To maintain clarity, the HTML elements within the div with the class example-element-diagram have been excluded.
<table mat-table [dataSource]="tableData" multiTemplateDataRows class="mat-elevation-z8">
<div *ngFor="let column of displayedColumns; track column">
<ng-container [matColumnDef]="column">
<th mat-header-cell *matHeaderCellDef> {{column}} </th>
<td mat-cell *matCellDef="let element"> {{element[column]}} </td>
</ng-container>
</div>
<ng-container matColumnDef="expand">
<th mat-header-cell *matHeaderCellDef aria-label="row actions"> </th>
<td mat-cell *matCellDef="let element">
<div *nfIf="expandedElement === element; else elseBlock ">
<button mat-icon-button aria-label="expand row" (click)="(expandedElement = expandedElement === element ? null : element); $event.stopPropagation()">
<mat-icon>keyboard_arrow_up</mat-icon>
</button>
</div>
<ng-template #elseBlock>
<button mat-icon-button aria-label="expand row" (click)="(expandedElement = expandedElement === element ? null : element); $event.stopPropagation()">
<mat-icon>keyboard_arrow_down</mat-icon>
</button>
</ng-template>
</td>
</ng-container>
<ng-container matColumnDef="expandedDetail">
<td mat-cell *matCellDef="let element" [attr.colspan]="columnsToDisplayWithExpand.length">
<div class="example-element-detail"
[@detailExpand]="element == expandedElement ? 'expanded' : 'collapsed'">
<div class="example-element-diagram">
</div>
</div>
</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="columnsToDisplayWithExpand"></tr>
<tr mat-row *matRowDef="let element; columns: columnsToDisplayWithExpand;"
class="example-element-row"
[class.example-expanded-row]="expandedElement === element"
(click)="expandedElement = expandedElement === element ? undefined : element">
</tr>
<tr mat-row *matRowDef="let row; columns: ['expandedDetail']" class="example-detail-row"></tr>
</table>
I attempted various adjustments to the padding in CSS without achieving success. The stylesheet remains consistent with the one provided in the Angular online example.