Components: data-table align header cell to right

[MaickelHubner]

Bug, feature request, or proposal:

For columns as currency, it is interesting to align the column header to the right

What is the expected behavior?

A parameter to set header alignment

What is the current behavior?

All header cells are aligned to the left

[donroyco]

Why do you want this to be a parameter?

[MaickelHubner]

@donroyco How else could I do that?
I do not have an ID class like with the columns to use in CSS ...

[andrewseguin]

Each column is given unique class that identifies it by name. For example, if your column name is user_id, then the column's class will be cdk-column-userName (and mat-column-user_id if using the md-table).

[gfigueroa]

@andrewseguin The column's class will indeed be mat-column-columnName, and I was only able to align the contents to the right, but not the headers. How do I select the column header? I tried mat-header-cell-columnName, to no avail.

[willshowell]

@gfigueroa data cells have the class .mat-cell and header cells have the class .mat-header-cell. You can combine those with .mat-column-columnName to select just the column data or just the column headers. Otherwise .mat-column-columnName should select both the data cells and the header cells

https://plnkr.co/edit/f6WuuRofSePei0CzLy7r?p=preview

[gfigueroa]

@willshowell Thanks for the reply. It aligns the headers to the right on a basic table. However, when using a table with sorting (and md-sort-header) it doesn't align them.

[MaickelHubner]

@gfigueroa I used this CSS code and it worked:

.mat-column- {
display: flex;
justify-content: flex-end;
}

[gfigueroa]

@MaickelHubner Are you using a table with sorting? It doesn't seem to work on mine when I use sorting.

[willshowell]

@gfigueroa https://plnkr.co/edit/Est96yNWhy9tFG5fE96r?p=preview

[gfigueroa]

@willshowell Ah it indeed works, though only for short header names. When you have a long header name (that takes up 2 lines) it centers it.
https://plnkr.co/edit/A87H0D3UWWc94PcZ4LO9?p=preview

[willshowell]

@gfigueroa That's because with sort headers, they are actually buttons which have text-align: center applied to them. You can override that just fine but watch out for view encapsulation.

See updated styles in index.html and table-sorting-example.css
https://plnkr.co/edit/Aqk5wS6mFh7JsT9IXRib?p=preview

For the sort of troubleshooting you're doing, it's best to open up the inspector and observe which classes each element has and how you can target them individually.

[gfigueroa]

@willshowell Thanks, that seems to do the trick! It was quite a workaround though.

[gazpan]

This "right" class works in 6 and corrects margin/padding of the header

.right.mat-cell {
    display: flex;
    justify-content: flex-end;
}
.right.mat-header-cell {
    display: flex;
    justify-content: flex-end;
    padding-right: 0;
    padding-left: 24px;
}
.right.mat-header-cell:last-child {
    margin-right: 0;
}

[johren02]

using all of the above suggestions, I still get the right column of my table slightly askew, none of the divider lines line up, header is squished vertically, the first line of data is super big, and other lines are bigger than their respective rows.

[chrispruitt]

I had a similar problem to @johren02 not including style differences in the first line of the data.

[prolink007]

Using what @MaickelHubner suggested.

.mat-column- { display: flex; justify-content: flex-end; }

I am getting what @johren02 is describing. How do we right align a column using mat-table?

[duard]

I just want to align the HEADER of the columns to the rigth if the content is numeric or money ... and it do not work in my column header.

.mat-column-CODIGO {
color: #333;
text-align: right;
padding-right: 10px;
font-weight: bold;

flex: 0 0 75px;
}

[dcanfield]

In @angular/material 6.4.7 I was able to get sorted header cells to right align using following:
In your component, bring in ViewEncapsulation, set it to none:
@Component({
selector: 'app-whatever',
templateUrl: './whatever.component.html',
styleUrls: ['./whatever.component.css'],
encapsulation: ViewEncapsulation.None
})
In your template, in the sorted header cell that you want right aligned set a class:
<th class="cell-right" mat-header-cell *matHeaderCellDef mat-sort-header>
In your css file define the class like so:
.cell-right .mat-sort-header-container { justify-content: flex-end; }

Setting ViewEncapsulation in your component will probably break your other formatting, so YMMV.

[chrispruitt]

@dcanfield your solution is the only one that worked for me using angular material 6.3.3, thanks a million!

[thisarumahadurage]

Fixed mine using the following code.
<th mat-header-cell *matHeaderCellDef mat-sort-header style="direction: rtl"> Amount</th>

Change direction from 'Left to Right' to 'Right to Left' with direction: rtl for the header cell so the sorting arrow will be on the left.
Then add justify-content: flex-end; to the column

[thisarumahadurage]

Using what @MaickelHubner suggested.

.mat-column- { display: flex; justify-content: flex-end; }

I am getting what @johren02 is describing. How do we right align a column using mat-table?

.mat-column- {justify-content: flex-end; }
remove display: flex and it'll be fixed

[FelipeFelizardo]

use:

<mat-header-cell *matHeaderCellDef></mat-header-cell>
 <mat-cell *matCellDef="let element"> {{element.position}} </mat-cell>

instead of:

<th mat-header-cell *matHeaderCellDef></th>
 <td mat-cell *matCellDef="let element"> {{element.position}} </td>

then:

mat-cell{
  display:flex !important;
  justify-content:center!important; // or flex-end

}

mat-header-cell {
  display:flex;
  justify-content:center; // or flex-end
}

works for me (y)

[ssdooley]

Fixed mine using the following code.
<th mat-header-cell *matHeaderCellDef mat-sort-header style="direction: rtl"> Amount</th>

Change direction from 'Left to Right' to 'Right to Left' with direction: rtl for the header cell so the sorting arrow will be on the left.
Then add justify-content: flex-end; to the column

worked for me as well

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}