Set minimum number of rows on angular material table

Question

I'm trying to display an angular mat table with a minimum height. If there is no data available, I'd like it to simply show empty rows.

I've seen this article Angular Material Table set default number of rows

But I won't know the number of rows as the display is responsive. Has anyone solved this yet? I haven't found anything yet.

EDIT It seems maybe I wasn't clear on the question as all of the answers don't really fit.

I would like to be able to have a response sized div or container (maybe the table element itself). The container will grow and shrink vertically if the page size is changed vertically. THe number of rows visible (whether there is data available for them or not) should also increase or decreased based on the available table/container height

Thanks

Answer 1

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;
  });
}

Answer 2

Set the minimum 5 rows blank by default if the data is 1 then set the blank rows count to 4 by checking the amount of data roews present

Answer 3

First set the mat-table pagination values, with the first value in "pageSizeOptions" being your default amount of displayed rows.

<mat-paginator [pageSizeOptions]="[5, 10, 20]" showFirstLastButtons></mat-paginator>

Doing this you will always show 5 rows on each page, as we specified above.

This is a code example how you could go about generating "dummy" data if your dynamic data is empty

    private getData() {
       const EMPTY_DATA: PeriodicElement[] = [
          {position: null, name: null, weight: null, symbol: null},
          {position: null, name: null, weight: null, symbol: null},
          {position: null, name: null, weight: null, symbol: null},
          {position: null, name: null, weight: null, symbol: null},
          {position: null, name: null, weight: null, symbol: null}
       ];

       this.dataSource.data = EMPTY_DATA;
       this.dataService.getAll().subscribe(data => {
          if (!data) return;
          this.dataSource.data = data;
    }