How to Change Angular Material Table Row Height

How to change Angular Material Table row height?

Try adding it out on your styles.scss.

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

How do you adjust the height of mat-table header and rows?

As I can see from the Angular Material documentation examples, mat-cells have some padding, try to remove it or adjust it to your needs.
Also, there're normal <tr></tr>, <th></th> and <td></td> with attributes instead of <mat-cell></mat-cell> etc.

Check out this page
https://material.angular.io/components/table/overview

Height of angular-material table not going below certain minimum height

You need to do:

.mat-row {
  height: 25px;
}

Here you can see a stackblitz demo.

In Mat table Not able to specify height of the table and make the header as well as footer sticky

As i told earlier Scroll is coming on div because there is a table in that div as well as top-bottom paddding of (30+30) px in vertical direction as you can see in image below.

we can remove this problem by 2 solution

1. use margin instead of padding as we know margin are spaces outside any div not inside but in this situation it will work same as padding space.

   .example-container {
   height: 300px;
   overflow: auto;
   margin:30px
   }

please look into image below for result of above code.

2. second way to fix this problem is make another div outside example-container and add padding to that while over example-container will wrap the table. see the stackblitz code here

How to adjust angular mat-table header height ? The table I am working on has column groups(main header and sub headers)

Your problem is not with the <td> elements but with the <tr> ones.
just add this:

tr.mat-header-row{
   height: 20px !important;
 }

Set minimum number of rows on angular material table

I would do something like this:

ts

getData() {
  this.service.getData().subscribe(r => {
    const minLength = window.innerHeight / x; // x is your row height
    if (!r) {
      r = new Array(minLength);
    } else {
      if (r.length < minLength) {
        r.push(...new Array(minLength - r.length))
      }
    }
    this.dataSource.data = r;
  });
}

Note: to use this I recommend you to use safe navigation operator:

https://angular.io/guide/template-syntax#safe-navigation-operator

If your API is always returning an array, and if there's no data it returns [], you can remove the first if else.

getData() {
  this.service.getData().subscribe(r => {
    const minLength = window.innerHeight / x; // x is your row height
    if (r.length < minLength) {
      r.push(...new Array(minLength - r.length))
    }
    this.dataSource.data = r;
  });
}

---

Related Topics