@ea-controls/mat-table-extensions/README.md

Angular directives that allows to extend Angular [mat-table](https://material.angular.io/components/table/overview) features

# MatTableExtensions

Angular directives that allows to extend Angular [mat-table](https://material.angular.io/components/table/overview) features

## Dependencies

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

## Multiple Headers/Footer

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

```html
<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

```html
<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`
1. 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
    1. Notice you can use `*matHeaderRowDef` normally, new directive is only used when you need extra header cell
1. 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'>"
    1. Notice you can use `*matHeaderRowDef` normally, new directive is only used when you need extra header row
1. Similar tags you can use when extra footer is required

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

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

### Full example

```ts

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;
}

```

```html
<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](https://t.me/+M3Q1VDg0crJlNWUx) group for supporting and commenting