MatTableExtensions

Angular directives that allows to extend Angular mat-table features

Dependencies

1. @angular version > 19.0.0
2. @angular/material ng add @angular/material

Multiple Headers/Footer

Usually mat-table only allows one header and footer inside [matColumnDef] directive

<table mat-table>
    <ng-container matColumnDef="position">
        <th mat-header-cell *matHeaderCellDef> No. </th> <!-- Only one header -->
        <td mat-cell *matCellDef="let element"> {{element.position}} </td>
    </ng-container>

    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
</table>

With current library, now you can add more of them

<table mat-table>
    <ng-container matColumnDef="position">
        <th mat-header-cell *matHeaderCellDef> No. </th>
        <th mat-header-cell *matExtraHeaderCellDef="'extra-header-name'"> Extra Header </th> <!-- Extra header cell-->
        <td mat-cell *matCellDef="let element"> {{element.position}} </td>
    </ng-container>

    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
    <tr mat-header-row *matExtraHeaderRowDef="displayedColumns; name: 'extra-header-name'"></tr> <!-- Extra header row -->
</table>

Steps

1. Import MatExtraTableModule
2. Add new *matExtraHeaderCellDef instead *matHeaderCellDef for extra headers
   1. You have to send any string value as cell identifier

      Replace extra-header-name with your custom name

   2. Notice you can use *matHeaderRowDef normally, new directive is only used when you need extra header cell
3. Add new *matExtraHeaderRowDef instead *matHeaderRowDef for extra rows using extra header cells
   1. name is required to find extra header, it have to be the same use in matExtraHeaderCellDef attribute

      *matExtraHeaderRowDef="displayedColumns; name: 'extra-header-name'>"

   2. Notice you can use *matHeaderRowDef normally, new directive is only used when you need extra header row
4. Similar tags you can use when extra footer is required

<td mat-footer-cell *matExtraFooterCellDef="'extra-footer-name'">Footer</th> <!-- Extra footer cell -->

<tr mat-header-row *matExtraFooterRowDef="displayedColumns; name: 'extra-footer-name'"></tr> <!-- Extra footer row -->

Full example

import { MatExtraTableModule } from '@ea-controls/mat-table-extensions';

export interface PeriodicElement {
  name: string;
  position: number;
  weight: number;
  symbol: string;
}

const ELEMENT_DATA: PeriodicElement[] = [
  { position: 1, name: 'Hydrogen', weight: 1.0079, symbol: 'H' },
  { position: 2, name: 'Helium', weight: 4.0026, symbol: 'He' },
  { position: 3, name: 'Lithium', weight: 6.941, symbol: 'Li' },
  { position: 4, name: 'Beryllium', weight: 9.0122, symbol: 'Be' },
  { position: 5, name: 'Boron', weight: 10.811, symbol: 'B' },
  { position: 6, name: 'Carbon', weight: 12.0107, symbol: 'C' },
  { position: 7, name: 'Nitrogen', weight: 14.0067, symbol: 'N' },
  { position: 8, name: 'Oxygen', weight: 15.9994, symbol: 'O' },
  { position: 9, name: 'Fluorine', weight: 18.9984, symbol: 'F' },
  { position: 10, name: 'Neon', weight: 20.1797, symbol: 'Ne' },
];

@Component({
  selector: 'app-basic',
  imports: [MatExtraTableModule],
  templateUrl: './basic.component.html'
})
export class BasicComponent {
  displayedColumns: string[] = ['position', 'name', 'weight', 'symbol'];
  dataSource = ELEMENT_DATA;
}

<table mat-table [dataSource]="dataSource" class="mat-elevation-z8">

    <!-- POSITION -->
    <ng-container matColumnDef="position">
        <th mat-header-cell *matHeaderCellDef> 1. from html </th>
        <th mat-header-cell *matExtraHeaderCellDef="'filter'">
            <input type="text">
        </th>

        <td mat-cell *matCellDef="let data"> xxxxxxxxxx from html </td>

        <td mat-footer-cell *matFooterCellDef> f1 </td>
        <th mat-footer-cell *matExtraFooterCellDef="'filter'" [attr.colspan]="2">f2</th>
    </ng-container>

    <!-- NAME -->
    <ng-container matColumnDef="name">
        <th mat-header-cell *matHeaderCellDef> Name </th>
        <th mat-header-cell *matExtraHeaderCellDef="'filter'">
            <input type="text">
        </th>

        <td mat-cell *matCellDef="let element"> {{element.name}} </td>

        <td mat-footer-cell *matFooterCellDef> f1 </td>
        <th mat-footer-cell *matExtraFooterCellDef="'filter'" [attr.colspan]="4">f2</th>
    </ng-container>

    <!-- WEIGHT -->
    <ng-container matColumnDef="weight">
        <th mat-header-cell *matHeaderCellDef> Weight </th>
        <th mat-header-cell *matExtraHeaderCellDef="'filter'">
            <input type="text">
        </th>

        <td mat-cell *matCellDef="let element"> {{element.weight}} </td>

        <td mat-footer-cell *matFooterCellDef> f1 </td>
    </ng-container>

    <!-- SYMBOL -->
    <ng-container matColumnDef="symbol">
        <th mat-header-cell *matHeaderCellDef> Symbol </th>
        <th mat-header-cell *matExtraHeaderCellDef="'filter'">
            <input type="text">
        </th>

        <td mat-cell *matCellDef="let element"> {{element.symbol}} </td>

        <td mat-footer-cell *matFooterCellDef> f1 </td>
    </ng-container>



    <!-- HEADERS -->
    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
    <tr mat-header-row *matExtraHeaderRowDef="displayedColumns; name: 'filter'"></tr>

    <!-- CELLS -->
    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>

    <!-- FOOTER -->
    <tr mat-footer-row *matFooterRowDef="displayedColumns"></tr>
    <tr mat-footer-row *matExtraFooterRowDef="['position', 'name']; name: 'filter'"></tr>

</table>

Join to my telegram group for supporting and commenting