CODEWITHSUNDEEP
cssangulartypescriptsassangular-material
Andrew
Andrew

Reputation: 933

Angular Material Table - CSS to get headers to left align when text wraps

With the Angular Material Table component, by default, the column headers on a table will left align, which is great:

Left aligned headers

However, if there isn't enough room for the header then the text wraps, which is fine except that the text then center aligns...

Center align text

How do I make the text left align? I thought this would be straight forward, but I'm having issues. This also only appears to happen on headers with sorting, because if you remove the mat-sort-header directive from any of the header cells, things left align correctly.

I tried adding the following css class definition, but no luck:

.mat-sort-header-button {
    text-align: left;
}

Here is the demo I'm playing around with.

Upvotes: 2

Views: 2405

Answers (2)

Amith B
Amith B

Reputation: 365

If anyone is still looking for global styling, then check this.

StackBlitz link for sort header alignment

Define below styles in style.css:

For text alignment in sort header or normal header

th.text-align-left,th.text-align-left .mat-sort-header-button {
    text-align: left !important;
}
th.text-align-right,th.text-align-right .mat-sort-header-button {
    text-align: right !important;
}
th.text-align-center,th.text-align-center .mat-sort-header-button {
    text-align: center !important;
}

For Content Alignment in sort header

th.align-center .mat-sort-header-container {
    justify-content: center;
}
th.align-right .mat-sort-header-container {
    justify-content: flex-end;
}
th.align-left .mat-sort-header-container {
    justify-content: flex-start;
}

And you can use these text-align-left, align-left etc classes in th

Upvotes: 0

yurzui
yurzui

Reputation: 214017

The reason why your styles is not working is that Angular uses Emulated encapsulation be default so your styles are component scoped. That means that you can only apply class to element which is placed in component template directly. You can't style nested components.

enter image description here

To style elements from nested components you have to use ::ng-deep selector:

::ng-deep .mat-sort-header-button {
  text-align: left;
}

Forked Stackblitz

There are other ways to solve it:

  • using encapsulation: ViewEncapsulation.None

  • using global styles

Upvotes: 5

Related Questions