Align table header (mat-header-cell) right

Question

For some columns of my table (I'm using angular material tables v10), I want to have a right alignment. It's quite easy to do it for the cells themselfs with the align attribute: <td mat-cell *matCellDef="let u" align="right">{{u.rating}}</td>

However doint the same with the <th mat-header-cell *matHeaderCellDef mat-sort-header align="right">Rating</th> is just not working.

Searching for a solution I came across a lot of css adjustments like this:

.mat-header-cell {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
 }

But these were just messing up the formatting.

I'm a bit suprised, that material doesn't provide a simple way of doing this. I created a sample application that already right-align the cells: https://stackblitz.com/edit/angular-mnqztk

Any suggestions on how to align the headers as well?

Solution

Nikhil Walvekar found the correct solution (see the comments of the post). He fixed it in the linked stackblitz project. Simply add

.text-right .mat-sort-header-container {
  justify-content: flex-end;
}

to the global css file and add text-right to the header tag

<th mat-header-cell *matHeaderCellDef mat-sort-header class="text-right">Market Cap</th>

Answer 1

As you are using mat-sort with the table, there are the arrows on the right of the headers which are visible on hover. So they occupy the space.

If you want to have the right alignment of the headers. You just remove the sorting from the table and then add the following lines in your css. Only by adding two lines the headers would be right-aligned.

table th{
  text-align:right
}

Answer 2

You use mat-text-column which supports alignment.

<mat-text-column [name]="column" *ngFor="let column of columnsToDisplay" justify="right">
    <th mat-header-cell *matHeaderCellDef mat-sort-header> {{column}} </th>
    <td mat-cell *matCellDef="let element" align="right"> {{element[column]}} </td>
</mat-text-column>

https://stackblitz.com/edit/angular-mnqztk-kwajho?file=src%2Fapp%2Ftable-expandable-rows-example.html

Here is documentation link https://material.angular.io/components/table/api#MatTextColumn