CODEWITHSUNDEEP
angularangular-material
faienz93
faienz93

Reputation: 178

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

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

enter image description here

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.

Upvotes: 0

Views: 9763

Answers (1)

faienz93
faienz93

Reputation: 178

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: enter image description here

Best Regards

Upvotes: 1

Related Questions