CODEWITHSUNDEEP
angularsortingheaderangular-material
Iznogood1
Iznogood1

Reputation: 162

Angular Material sorted table - How to align header text to right?

I am using an Angular Material table.

I can set column alignment to right.

HTML:

<table mat-table [dataSource]="dataSource">
...
  <ng-container matColumnDef="position">
    <th mat-header-cell *matHeaderCellDef> No. </th>
    ...

CSS:

.mat-column-position {
    text-align: right;
}

But when I am using the sorting feature, the column title is no longer aligned to the right:

<table mat-table [dataSource]="dataSource" matSort>
...
  <ng-container matColumnDef="position">
    <th mat-header-cell *matHeaderCellDef mat-sort-header> No. </th>
    ...

I guess the issue is coming from the "sort" symbol.

Any thoughts?

Live demo

Upvotes: 3

Views: 6793

Answers (3)

Mood
Mood

Reputation: 19

If you do not want to keep the sort arrow on the left side, I have found another solution:

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

Or alternatively put it in your global CSS file without ::ng-deep:

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

StackBlitz

Upvotes: -1

nash11
nash11

Reputation: 8650

You're right, it's coming from the sort symbol. One way to fix this would be using CSS to just change the direction of that header from right to left:

.mat-header-cell.mat-column-position {
    direction: rtl;
}

/* If you want the same default margin for the sort icon */
:host ::ng-deep .mat-header-cell.mat-column-symbol .mat-sort-header-arrow {
    margin-right: 6px;
    margin-left: 0px;
}

Alternatively, you can set the arrowPosition attribute to before on a header cell to achieve the same result:

<th mat-header-cell *matHeaderCellDef mat-sort-header arrowPosition="before">No.</th>

Upvotes: 3

Iznogood1
Iznogood1

Reputation: 162

Additionnaly, it seems that using the arrowPosition attribute gives the same result.

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

Upvotes: 2

Related Questions