How-to extend Angular mat-table
Rédigé par gorki Aucun commentaireProblem :
I would like to have a common table component that makes :
- table, multicolumn
- customize row renderer
- sort
- pagination
- export
- filtering
Well I'm using angular-material, not bad and with mat-table out of the box :
- sorting : MatSort
- pagination : MatPaginator
- export : MatExporter with this extension
But integrate a filter (I try from the same author this one) was not as good as I wanted.
Solution :
After a few hours of googling, I found :
- An extension : https://github.com/kerrexwong/ExtendedMatTable
- But there wasn't the possibility to customize the content of the column
- It was the source of the idea
- A few stackoverflow talk about the same idea, but nothing working easily in Angular 11 or easy to use
- https://stackoverflow.com/questions/62961776/is-it-possible-to-create-an-angular-material-mat-table-component-with-extra-dire
- https://betterprogramming.pub/angular-material-build-your-own-generic-mattable-a49ba68a375a
- Tried to copy MatTable and extends CDKTable but
- _headerRowOutlet was always undefined in my copy
Finally from a more standard way :
- Create your own component
- It takes a few arguments :
- functionalName : a functional name for the export. I put it in the filename, nothing to do with the display
- datasource : not a MatTableDataSource, just an array of object
- headers : the headers, an array of string, one per column
- Sort must be at this level... Because the ng-container describing the column contains mat-sort-header for sorting... So we'll pass the the sort to the generic table.
<app-hpa-table [functionalName]="'a comprehensive name for export'" [dataSource]="array of object" [headers]="an array of string" [parentSort]="sort" matSort matSortActive="weight">
- A list of column definition. "name" is in the array 'headers'. Element comes from the array of objects.
<ng-container matColumnDef="name">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Name </th>
<td mat-cell *matCellDef="let element"><div class="widget-list-name-column">{{element.name}}</div></td>
</ng-container>
- The typescript part of the parent component
- ViewChild for sort should be static
@ViewChild(MatSort, {static: true}) sort: MatSort;
- The array of objects should be set in one line (not append object by object) to avoid to many update of the generic table
A bit long, I'll describe the generic component another time and try to make an online example.