How to add a additional Header and Row in angular material Data table?

Question

I have a data table using angular material, i want a additional row, that row contains some filters like search, dropdown, filters.

is that any possible to create a 2nd row???

here is my sample code,

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

angular-material-data-table

Andrea Pogliano · Accepted Answer · 2018-06-01 10:46:11Z

I've got the same problem.

For now, my solution has been to put a custom table just before my material-table; a dialog is then opened by clicking on a filter-icon, inside this dialog there I've put all controls. It's quite complicated to style columns properly to match width and position of those below inside material-table.

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

This is the related css, thanks to user domske's contribution at github...

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

Hope it could help for your purpose.

Regards

Andrea

Collectives™ on Stack Overflow

How to add a additional Header and Row in angular material Data table?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related