Angular Material 2 Datatable headers not aligned right

Question

I have set the styles for header cell and cell to be aligned right but headers are not aligned only the cell text

Here is a link to a sample

I have added

.mat-cell, .mat-header-cell {
    text-align: right;
}

Answer 1

text-align: right doesn't work with display:flex element, and here you're trying to applying text-align property on mat-header-cell' elements mat-sort-header-container class. You could use below to fix your issue.

::ng-deep .mat-header-cell .mat-sort-header-container {
    justify-content: flex-end;
}

Forked Stackblitz

Answer 2

This worked for me. I added the following to the css:

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

And changed the location of the sort arrow to before the label:

<th mat-header-cell mat-sort-header arrowPosition='before' *matHeaderCellDef>