CODEWITHSUNDEEP
cssangularangular-material
Facundo Palavecino
Facundo Palavecino

Reputation: 321

How to change Angular Material Table row height?

In my Angular application (styled with Angular Material) I need to show some data using a Material Table.

This table has a sticky header, several rows and a sticky footer.

By default, rows have a height of 62.5px and I'd like to override this value.

How can I achieve that?

I have tried overriding the css style for tr / tr.mat-row / tr.mat-header-row etc, without success. I have tried using ::ng-deep too.

Also, my sticky footer row has a 48px height, which i didn't set!! Does anyone know whats happening?

Table picture

I'm able to edit the footer row css with ::ng-deep, i have set the font-weight to bold, but when i set the height attribute nothing happens.

::ng-deep tr.mat-footer-row {
    border: 1px solid #e7e7e7;
    font-weight: bold;
}

Upvotes: 19

Views: 78575

Answers (14)

Enes Yalçın
Enes Yalçın

Reputation: 164

With @angular/material@17 you can do the following:

:host {
--mat-table-row-item-container-height: 1rem;
}

If you want to change the header and footer too then you can do it this way:

:host {
  --mat-table-header-container-height: 2rem;
  --mat-table-row-item-container-height: 1rem;
  --mat-table-footer-container-height: 1rem;
}

Upvotes: 0

Rolstan D'souza
Rolstan D'souza

Reputation: 183

Just add the below line in your .css component file

td {
  height: 5rem !important;
}

and it should work...

Upvotes: 0

Henry Xiloj Herrera
Henry Xiloj Herrera

Reputation: 304

With Angular Material 16

header

.mat-mdc-table .mdc-data-table__header-row {
  height: 35px;
}

rows

.mat-mdc-table .mdc-data-table__row{
  height: 35px;
}

Upvotes: 4

Simon_Weaver
Simon_Weaver

Reputation: 145880

You can also set it in the mat-row element in the template to an exact value.

Using minHeight is better than height because it overrides the default css.

<mat-row
    matRipple
    *matRowDef="let row; columns: columnNames"
    routerLinkActive="highlighted"
    [style.minHeight.px]="100">
</mat-row>

Update for Angular 15 / Material 15:

They've now changed the CSS to use height instead of min-height so height.px would be better. I'm still looking for justification, but my guess would be to try to enforce consistency or perhaps it's performance related.

There's also guidance to just use:

 .mat-column-name { height: 100px; } // for column 'name'

Upvotes: 3

Wizlab Solution
Wizlab Solution

Reputation: 11

Use this on your style.css

  .mat-row{
    height: 10px !important;
  }

Upvotes: 0

Mhadhbi Nouha
Mhadhbi Nouha

Reputation: 11

my solution:

.mat-header-row{
    max-height: 40px;
    height: 40px;
    min-height: 40px;
    text-align: center;

}

Upvotes: 1

EJoshuaS - Stand with Ukraine
EJoshuaS - Stand with Ukraine

Reputation: 12181

I had a similar problem; in my case, the height of the table was too large relative to the number of rows, so setting the height didn't work. When I adjusted the height to be smaller when I had fewer rows, I was able to set the height again.

Upvotes: 0

Alberto Janicke
Alberto Janicke

Reputation: 19

The answers are correct but if it doesn't work for you, it probably means you have a div or any element inside the table that has a height set to it, and if this height is greater than the row height you won't be able to override it.

Upvotes: 2

Laxmichand Dhuvare
Laxmichand Dhuvare

Reputation: 31

With material 5

 mat-row.mat-row.ng-star-inserted 
  { height: 32px !important; } 

.mat-row{ min-height: 30px; }

Upvotes: 3

Dave C
Dave C

Reputation: 316

On a related point, I had an issue where my mat-table rows were too high, and tried to set the height in CSS to reduce it.

It turned out that the problem was "min-height" had been set on "mat-header-row" and "mat-row" somewhere deep inside material (not in my source code).

The fix was simply:

.mat-header-row, .mat-row {
  min-height: 30px;
}

Upvotes: 9

Super Toptal
Super Toptal

Reputation: 587

It works correctly.

tr.mat-footer-row,
tr.mat-row {
  border: 1px solid #e7e7e7;
  font-weight: bold;
  height: 20px !important;
}

Upvotes: 1

Julian Salamanca
Julian Salamanca

Reputation: 822

To change the height by default (48 px) in mat-table you need to specify a class for every row in the html, for example, when you define the rows:

<tr mat-row *matRowDef="let row; columns: displayedCol;" class="table-row"></tr>

Then you can override the height, setting in your main css file the class 'table-row' with a specific height, for example:

.table-row {
  height: 30px !important;
}

We prove this with angular 7 and angular material version 7.3.7.

Regards

Upvotes: 12

Bryan Ribo
Bryan Ribo

Reputation: 393

Try adding it out on your styles.scss. 

tr.mat-footer-row {
        border: 1px solid #e7e7e7;
        font-weight: bold;
        height: #px !important;
}

Upvotes: 18

Amrish Ashok
Amrish Ashok

Reputation: 151

You could specify the height of the table footer in tr.mat-footer-row. 

tr.mat-footer-row {
    height: 100px;
}

Here is StackBlitz example https://stackblitz.com/angular/gjjjdpjqvvde?file=app%2Ftable-sticky-footer-example.css

Upvotes: 0

Related Questions