CODEWITHSUNDEEP
cssangularangular-material
zacko
zacko

Reputation: 399

Align table header (mat-header-cell) right

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>

Upvotes: 0

Views: 7205

Answers (2)

Nikhil Walvekar
Nikhil Walvekar

Reputation: 508

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

Upvotes: 0

Minal Shah
Minal Shah

Reputation: 1486

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
}

Upvotes: 1

Related Questions