How to resize dynamically the width of column table of Angular Material?

Question

I want resize the width of my table using angular material. I have obtained this:

My columns are dynamic:

<ng-container *ngFor="let column of dataTable.getValues() ; let colIndex = index" matColumnDef="{{column.label}}" class="columnSize">
  <th mat-header-cell *matHeaderCellDef mat-sort-header> {{column.label}}</th>
  <td mat-cell  *matCellDef="let row" [style.color]="color"> {{row[colIndex].value }} </td>
</ng-container>

and I have tried different solution to resize my columns width, for example:

.mat-header-cell {
  flex: 0 0 75px !important;
}

But the results is the same.

faienz93 · Accepted Answer · 2019-07-28 16:45:33Z

I have found the solution:

I use the "tables with code flex" as the guide suggest: https://material.angular.io/components/table/overview#tables-with-code-display-flex-code-

Update code:

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

        <!-- Columns dynamic -->
        <ng-container *ngFor="let column of dataTable.getValues() ; let colIndex = index" matColumnDef="{{column.label}}">
          <mat-header-cell *matHeaderCellDef mat-sort-header> {{column.label}}</mat-header-cell>
          <mat-cell *matCellDef="let row" [style.color]="color"> {{row[colIndex].value }} </mat-cell>
        </ng-container>

        <!-- Header -->
        <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
        <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
      </mat-table>
      <!-- <mat-paginator [pageSizeOptions]="[5, 10, 25, 100]"></mat-paginator> -->
    </div>

Now the result is:

Best Regards

Collectives™ on Stack Overflow

How to resize dynamically the width of column table of Angular Material?

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