Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How do I center Angular Material table column headers and mat-cell content

Can anyone provide a concise explanation of how to center (or move to the right) Angular Material table header and cell texts? There seems to be a lot about needing /deep/ and other versions, which may or may not be deprecated.

like image 499
DanielSon Avatar asked Sep 13 '18 15:09

DanielSon


People also ask

What is * MatHeaderCellDef?

MatHeaderCellDef extends CdkHeaderCellDefHeader cell definition for the mat-table. Captures the template of a column's header cell and as well as cell-specific properties.

What is DataSource in mat-table?

A DataSource is simply a class that has at a minimum the following methods: connect and disconnect . The connect method will be called by the table to provide an Observable that emits the data array that should be rendered.


1 Answers

If no answer is working above then try this :

table {
  width: 100%;
}

mat-header-cell, mat-cell {
  justify-content: center;
}

or

angular material 2 table header center alignment

like image 87
Shabbir Ismail Avatar answered Oct 30 '22 06:10

Shabbir Ismail