History of a bug

How-to extend Angular mat-table

Rédigé par gorki Aucun commentaire

Problem :

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 :

  1. Create your own component
  2. 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">
  1. 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>
  1. The typescript part of the parent component
    1. ViewChild for sort should be static
@ViewChild(MatSort, {static: true}) sort: MatSort;
  1. 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.

Classé dans : Web Mots clés : aucun
Fil RSS des articles