Angular 如何在角材料数据表中添加额外的标题和行？

我有一个使用角度材质的数据表，我想要一个额外的行，该行包含一些过滤器，如搜索、下拉、过滤器

有可能创建第二行吗

这是我的示例代码

<mat-table #table [dataSource]="dataSource" matSort class="mat-tableacc">
          <ng-container matColumnDef="position">
            <mat-header-cell *matHeaderCellDef mat-sort-header> Job ID </mat-header-cell>
            <mat-cell *matCellDef="let element"> {{element.position}} </mat-cell>
          </ng-container>

<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
          <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
        </mat-table>

工作ID
{{element.position}

---

我也有同样的问题

目前，我的解决方案是在材质表之前放置一个自定义表；然后点击一个过滤器图标打开一个对话框，在这个对话框中我放置了所有控件。 要正确设置列的样式以匹配材质表中下面列的宽度和位置，这是相当复杂的

<div class="mock-mat-table">        
        <div class="mock-mat-row">
            <div class="mock-mat-cell">
        <a class="filtro-status" (click)="openFiltersDialog('columnA')">
                    <mat-icon matTooltip="Add Filter">filter_list</mat-icon>
        </a>
            </div>
        <div class="mock-mat-cell">
        <a class="filtro-status" (click)="openFiltersDialog('columnB')">
                    <mat-icon matTooltip="Add Filter">filter_list</mat-icon>
        </a>
            </div>
            <div class="mock-mat-cell">
        <a class="filtro-status" (click)="openFiltersDialog('columnC')">
                    <mat-icon matTooltip="Add Filter">filter_list</mat-icon>
        </a>
            </div>
        .......

        </div>
    </div>

希望它能对你有所帮助

问候

安德烈

.mock-mat-table {
    display: block;
  }

  .mock-mat-row,
  .mock-mat-header-row {
    display: flex;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    align-items: center;
    min-height: 48px;
    padding: 0 24px;
  }

  .mock-mat-cell,
  .mock-mat-header-cell {
    flex: 1;
    overflow: hidden;
    word-wrap: break-word;
  }