angular material 2 table header center alignment

Question

If md-sort-header is added into md-header-cell in md-table, it is always left-alignment. How to center-align header cells, such "name"?

<md-header-cell *cdkHeaderCellDef md-sort-header style="text-align:center"> 
      Name 
</md-header-cell>

plnkr

Vega · Accepted Answer · 2018-04-21T07:09:36.430

77

Update for Angular Material 5.x.x, no need for ng-deep:

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

DEMO

md-header-cell get 'translated' to a container with class="mat-sort-header-container". Using that, you set its style with ng-deep. Use flexbox to center its content. Put the following in the components stylesheet:

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

DEMO

edited Apr 21 '18 at 07:09

answered Sep 11 '17 at 12:21

Vega

27,856
27
95
103

1

Works great. Thank you! – Vedha Peri Dec 27 '18 at 16:18
3

Thank you for this answer, I did have to use the ng-deep example with Angular 7 though. – dmoore1181 Nov 23 '20 at 12:46

FAISAL · Answer 2 · 2017-09-12T07:03:00.660

13

The accepted answer is correct. However, ::ng-deep is depreciated and maybe dropped in future (official documentation).

The shadow-piercing descendant combinator is deprecated and support is being removed from major browsers and tools. As such we plan to drop support in Angular (for all 3 of /deep/, >>> and ::ng-deep). Until then ::ng-deep should be preferred for a broader compatibility with the tools.

The proper way is to use ViewEncapsulation. In your component.ts, add the following:

import { ViewEncapsulation } from '@angular/core';

@Component({
    ....
    encapsulation: ViewEncapsulation.None
})

and override the class in your component.css file:

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

edited Sep 12 '17 at 07:03

answered Sep 11 '17 at 12:45

FAISAL

33,618
10
97
105

1

:ng-deep is not depricated! it's /deep/ only. encapsulation may affect other classes – Vega Sep 11 '17 at 12:56
3

Please read the documentation: `The shadow-piercing descendant combinator is deprecated and support is being removed from major browsers and tools. As such we plan to drop support in Angular (for all 3 of /deep/, >>> and ::ng-deep).` – FAISAL Sep 11 '17 at 12:58
@Vega , I am not saying that your answer doesn't work, the OP may face an issue in future once `::ng-deep` is dropped completely. – FAISAL Sep 11 '17 at 13:00
2

Thanks for the solution! I wanted to add that if you want to center only one table header, then you can create your own custom class with name like `mat-sort-header-container-centered` with the outlined above css and assign it to your cell like this `` – Deniss M. Oct 07 '17 at 09:10
1

@DenissM. yes exactly :) I do the same and avoid using `::ng-deep`. – FAISAL Oct 07 '17 at 09:12
1

::ng-deep is easier to use, and is it really depreciated? – Debadatta Jun 04 '19 at 12:35
I _think_ ::ng-deep is going to stay deprecated forever, and when it will be dropped an alternative will be provided. Until then, it's going to stay. It's been deprecated 3 versions ago and still going strong. – Alberto Chiesa Nov 22 '19 at 11:58
Avoid using `ViewEncapsulation.None` at all costs unless you know exactly what you're doing. – Dane Brouwer Apr 23 '21 at 13:52

score 8 · Answer 3 · edited Jun 22 '18 at 03:49

8

.mat-header-cell {    text-align: center;    }

edited Jun 22 '18 at 03:49

Stephen Rauch

47,830
31
106
135

answered Jun 22 '18 at 03:31

dayderluv

81
1
2

score 4 · Answer 4 · answered Jan 25 '18 at 09:13

I think the given solutions to the problem are too strict in their approach, i had a similar issue where i needed to change some css properties of mat-sort-header-container , but dynamically.

I did something like Vega's answer but minutely different on how styles are taken :

::ng-deep .mat-sort-header-container{
    justify-content: inherit;
    /* other inheritable properties */
}

which opens some properties for its parent to style mat-header-cell which is in your html code so whatever style you provide in mat-header-cell and in the ng-deep which is inheriting from its parent then only those styles and none other than that would go down that hierarchy .

score 4 · Answer 5 · answered May 08 '19 at 13:43

4

If you don't want all header cells to align-center you can combine two classes:

.mat-header-cell.text-center { text-align: center; }

Then on the html:

<th mat-header-cell *matHeaderCellDef class="text-center">Actions</th>

answered May 08 '19 at 13:43

guizo

2,594
19
26

score 0 · Answer 6 · answered Jan 05 '21 at 19:41

If you wanted to align both the header and row cell content, on a column-by-column basis (allowing for differing alignments between columns), you could do something like this:

<mat-table>
    <ng-container matColumnDef="myColumn">
      <mat-header-cell *matHeaderCellDef> My Column </mat-header-cell>
      <mat-cell *matCellDef="let element"> {{element.myField}} </mat-cell>
    </ng-container>
...

.mat-column-myColumn{
  display: flex !important;
  justify-content: flex-start !important; /* Left aligned*/
}

The alignment is applied by the name specified in matColumnDef.

angular material 2 table header center alignment

6 Answers6

Linked

Related