Aligning content in columns & adding custom width with Angular

To apply custom width to columns we can create helper classes with width provided in pixels as shown below.

.w-75{
    width: 75px;
}

.w-100{
    width: 100px;
}

You can add any number of these custom width classes according to your requirements.

After that just add them to the <th> element in the the table you created.

<ng-container matcolumnDef="id">
  <th class="w-75" mat-header-cell *matHeaderCellDef> id </th>
  <td mat-cell *matCellDef="let element"> {{element.id}} </td>
<ng-container>

How to Align Text in columns of data-table

In your CSS file just create classes as shown below:

.th-center{
  text-align: center;
}
.th-left{
  text-align: left;
}
.th-right{
  text-align: right;
}

Which we can add to th elements.

  <ng-container matColumnDef="id">
    <th class="w-75 th-center" mat-header-cell *matHeaderCellDef> id </th>
    <td mat-cell *matCellDef="let element"> {{element.id}} </td>
  </ng-container>

For Data-Tables using Component Elements as shown below:

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

  <ng-container matColumnDef="id">
    <mat-header-cell *matHeaderCellDef [ngClass]="'w-75'"> id </mat-header-cell>
    <mat-cell *matCellDef="let element" [ngClass]="'w-75'"> {{element.id}} </mat-cell>
  </ng-container>

  <ng-container matColumnDef="name">
    <mat-header-cell *matHeaderCellDef> name </mat-header-cell>
    <mat-cell *matCellDef="let element"> {{element.name}} </mat-cell>
  </ng-container>

  <ng-container matColumnDef="username">
    <mat-header-cell *matHeaderCellDef> username </mat-header-cell>
    <mat-cell *matCellDef="let element"> {{element.username}} </mat-cell>
  </ng-container>

  <ng-container matColumnDef="email">
    <mat-header-cell *matHeaderCellDef> email </mat-header-cell>
    <mat-cell *matCellDef="let element"> {{element.email}} </mat-cell>
  </ng-container>

  <ng-container matColumnDef="phone">
    <mat-header-cell *matHeaderCellDef> phone </mat-header-cell>
    <mat-cell *matCellDef="let element"> {{element.phone}} </mat-cell>
  </ng-container>

  <ng-container matColumnDef="website">
    <mat-header-cell *matHeaderCellDef> website </mat-header-cell>
    <mat-cell *matCellDef="let element"> {{element.website}} </mat-cell>
  </ng-container>

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

We can use [ngClass] directive to add classes to Column and Cells but instead of width, we need to use max-width to columns as well as to cells because components use FLEX layout to define widths.

You can then update CSS classes to the following:

.w-75{
  max-width: 75px;
}

.w-100{
  max-width: 100px
}