How to change the width of columns of dynamic table in angular 9?

Asked Jul 08 '20 at 19:24

Active Jul 08 '20 at 19:54

Viewed 911 times

How to change the width of the columns in dynamic table as it divided automatically based on the number of the columns

<mat-table #table [dataSource]="dataSource" matSort > 
<ng-container *ngFor="let disCol of displayedColumns; let colIndex = index" matColumnDef="{{disCol}}">
  <mat-header-cell *matHeaderCellDef mat-sort-header
    style="font-size: 15px; font-family: Arial, Helvetica, sans-serif; font-weight: 900;">
    {{tableHeaderCaptions[colIndex] | titlecase}}
  </mat-header-cell>
  <mat-cell *matCellDef="let element "> {{element[disCol]}}
  </mat-cell>
</ng-container>

<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
<mat-row *matRowDef="let row; columns: displayedColumns;" (click)="OnSelect(row)"></mat-row>

edited Jul 08 '20 at 19:54

asked Jul 08 '20 at 19:24

Taha Ahmed

You mean, mat-table? – Derek Wang Jul 08 '20 at 19:29
Yes , mat-table – Taha Ahmed Jul 08 '20 at 19:51
This will help you. https://stackoverflow.com/a/61538359/8202850 – Derek Wang Jul 08 '20 at 20:06
Thanks for ur reply , but the table in that link is not a dynamic table but a table with fixed columns – Taha Ahmed Jul 09 '20 at 09:51

How to change the width of columns of dynamic table in angular 9?

0 Answers0