Align right one mat-header-cell in a angular material table with sort headers

Cell alignment is done by default via flexbox when using <mat-header-cell> and <mat-cell>, but not when using <th mat-header-cell> and <td mat-cell>. When using the table elements, the alignment is done with text-align. If you force flexbox all of the time, the table cells using th and td have the possibility of losing vertical alignment with the rest of the table.

I found that a combination of setting text-align: right and setting justify-content: flex-end works best. That way, elements with display:table-cell use text-align, and elements with display:flex use justify-content.

For your example:

.header-align-right {
  text-align: right;
  justify-content: flex-end;
}

To get the arrow to show up before the header, you should use the arrowPosition attribute.

Also, I would suggest using the auto-added column class (.mat-column- + case-sensitive value of matColumnDef) instead of adding class="header-align-right". That will align the headers, cells, and footers. So here's what I would suggest:

.mat-column-Number {
  text-align: right;
  justify-content: flex-end;
}

<ng-container matColumnDef="Number">
  <th mat-header-cell *matHeaderCellDef mat-sort-header arrowPosition="before">Number</th>
  <td mat-cell *matCellDef="let row">{{row.Number}}</td>
  <td mat-footer-cell *matFooterCellDef></td>
</ng-conIainer>

Live demo

.header-align-right{
  display: flex;
  padding: 21px 0;
  justify-content: flex-end;
}