@lordkriegan/mat-data-table/src/lib/material-data-table.component.html

[!npm version](https://www.npmjs.com/package/@lordkriegan/mat-data-table) [!npm license](https://www.npmjs.com/package/@lordkriegan/mat-data-table)

@if (mergedOptions.showFilter) {
<mat-form-field>
  <mat-label>{{mergedOptions.filterOptions?.label || 'Filter'}}</mat-label>
  <input matInput (keyup)="applyFilter($event)" [placeholder]="mergedOptions.filterOptions?.placeholder || ''" #input>
</mat-form-field>
}


<div class="mat-elevation-z8">
  <table mat-table [dataSource]="dataSource" matSort [matSortActive]="mergedOptions.sorterOptions?.defaultSortColumn || ''" [matSortDirection]="mergedOptions.sorterOptions?.defaultSortDirection || 'asc'" [matSortDisabled]="!mergedOptions.showSorter">

    @for (column of columnMappings; track $index) {
    <ng-container [matColumnDef]="column.key">
      <th [style]="column?.headerCellStyles || {}" mat-header-cell *matHeaderCellDef mat-sort-header>{{column.label}}</th>
      <td [style]="column?.dataCellStyles || {}" mat-cell *matCellDef="let row">
        @if (column?.component; as component) {
          <ng-container *ngComponentOutlet="component; inputs: { data: row[column.key] }"></ng-container>
        } @else if (column?.transformer) {
          {{column.transformer!(row[column.key])}}
        } @else {
          {{row[column.key]}}
        }
      </td>
    </ng-container>
    }

    @if (mergedOptions.showActions) {
      <ng-container matColumnDef="actions">
        <th mat-header-cell *matHeaderCellDef></th>
        <td mat-cell *matCellDef="let row">
          <button mat-icon-button [matMenuTriggerFor]="menu"><mat-icon>more_vert</mat-icon></button>
          <mat-menu #menu="matMenu">
            @for (action of mergedOptions.actionOptions?.actions; track action) {
              @if (action.divider) {
                <mat-divider></mat-divider>
              } @else {
                <button mat-menu-item (click)="action.fxn!(row)">
                  @if (action.icon) {
                    <mat-icon>{{action.icon}}</mat-icon>
                  }
                  <span>{{action.label}}</span>
                </button>
              }
            }
          </mat-menu>
        </td>
      </ng-container>
    }

    <tr mat-header-row *matHeaderRowDef="generateDisplayColumns()"></tr>
    <tr mat-row *matRowDef="let row; columns: generateDisplayColumns();"></tr>

    <!-- Row shown when there is no matching data. -->
    <tr class="mat-row" *matNoDataRow>
      <td class="mat-cell" [attr.colspan]="generateDisplayColumns().length">
        @if (mergedOptions.showFilter) {
          No data matching the filter "{{dataSource.filter}}"
        } @else {
          No data found
        }
      </td>
    </tr>
  </table>

  @if (mergedOptions.showPaginator) {
    <mat-paginator [pageSizeOptions]="mergedOptions.paginatorOptions?.pageSizeOptions || [5, 10, 25, 100]" aria-label="Select page of users"></mat-paginator>
  }
</div>