Angular Material 2 Table Header Center Alignment

angular material 2 table header center alignment

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

Align right one mat-header-cell in a angular material table with sort headers

Live demo

.header-align-right{
  display: flex;
  padding: 21px 0;
  justify-content: flex-end;
}

Align table header (mat-header-cell) right

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

How do I align content to right of a Angular Material table specific column header

To identify this 'position' column header

<!-- Position Column -->
<ng-container matColumnDef="position">
  <th mat-header-cell *matHeaderCellDef> No. </th>
  <td mat-cell *matCellDef="let element"> {{element.position}} </td>
</ng-container>

You can use the CSS selector as shown below

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

Note: If you want to style the entire column

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

mat-table how to align mat-header with the mat-cell width

Here's my code that works now:

<div class="example-container mat-elevation-z8 alternate-theme mat-app-background" color="primary"
style="width: 450px;">
<div class="div-title">
    {{ this.annee }} - {{ this.getTypeInfo(this.typeList.TypeBourse) }}
</div>
<mat-table [dataSource]="bourseDetail" class="mat-elevation-z8">
    <!-- https://stackoverflow.com/questions/53084892/angular-material-table-cell-formatting/53096778 -->
    <!-- Position Column -->
    <ng-container matColumnDef="Position">
        <mat-header-cell class="mat-cell" *matHeaderCellDef matTooltip="Position"> Pos </mat-header-cell>
        <mat-cell class="mat-cell-column" *matCellDef="let element">{{ element.Position }}</mat-cell>
    </ng-container>

    <!-- Concession Column -->
    <ng-container matColumnDef="nom">
        <mat-header-cell class="mat-cell-concession" *matHeaderCellDef>Concession</mat-header-cell>
        <mat-cell class="mat-cell-concession mat-cell-column" *matCellDef="let element">
            <ng-container *ngIf="element.Concession.Nom">
                {{ element.Concession.Nom }}
                                                                                                
            </ng-container>
            <ng-container *ngIf="!element.Concession.Nom">
                Info manquante
            </ng-container>
        </mat-cell>
    </ng-container>

    <!-- Points Column -->
    <ng-container matColumnDef="Points">
        <mat-header-cell class="mat-cell" *matHeaderCellDef>points</mat-header-cell>
        <mat-cell class="mat-cell-column" *matCellDef="let element">{{ element.Points }}</mat-cell>

    </ng-container>

    <!-- Amount Column -->
    <ng-container matColumnDef="Montant">
        <mat-header-cell class="mat-cell" *matHeaderCellDef>Gain</mat-header-cell>
        <mat-cell class="mat-cell-column" *matCellDef="let element">{{ element.Montant | currency }}</mat-cell>

    </ng-container>

    <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
    <mat-row *matRowDef="let row; columns: displayedColumns" class="example-element-row"></mat-row>
</mat-table>

And the CSS file:
@import "./../../styles.scss";

    .mat-table {
      width: 100%;
    }

    .mat-row {
        width: 100%;
        min-height: 12px;
    }

    .div-title {
        text-align: center;
        font-size: medium;
        font-weight: bold;
        padding: 4px;
      }
      
    .mat-header-cell {
        min-height: 12px;
        font-size: smaller;
        font-weight: bold;
    }

    .mat-header-row {
      width: 100%;
      min-height: 10px;
      padding: 0px 0px 0px 4px;
    }
     
    .mat-cell-column {
        border-top: 1px solid crimson;
    }

    .mat-cell {
        flex: 0 0 50px !important;
        white-space: unset !important;
        justify-content: left;
        font-size: smaller;
        padding: 0px 0px 0px 4px;
        text-align: left;
    }

    .mat-cell-concession {
        flex: 0 0 250px !important;
        min-width: 250px !important;
        white-space: unset !important;
        justify-content: left;
        font-size: smaller;
        padding: 0px 0px 0px 4px;
        text-align: left;
        color: black;
    }

    .mat-row:nth-child(1n + 1) {
        background-color: mat-color($accent, lighter);
      }
      
      .mat-row:not(:nth-child(2n + 1)) {
        background-color: mat-color($primary, 300);
      }

    .example-element-row:hover {
      background: mat-color($accent, 800);
    }
    .example-element-row:active {
      background: #efefef;
    }

---

Related Topics