Why is the <mat-table> without a Datasource not displayed in Angular 7

Question

I want to use a <mat-table> to display the name of an option and it's corresponding given value (for the user to change). Since the options may need to have their values set by different means (such as a slide-toggle or a mat-selection), I have to write this down without a Datasource (or at least as far as I could find, one can not use prewritten html tags in the typescript file).

Therefore, my MWE would be this:

<mat-table>
    <mat-header-row *matHeaderRowDef>
        <mat-header-cell>header</mat-header-cell>
    </mat-header-row>

    <mat-row>
        <mat-cell>
             cell
        </mat-cell>
    </mat-row>
</mat-table>

However, when I look at my page, it just displays a line without any strings. I want to use this table within a <mat-card> (or rather <mat-card-content>), but even if I try it outside that, I just get the line and nothing else. This is what it looks like within the mat card:

How can I correctly display the table?

*Edit: * Since it was asked for, here is also the .ts file.

import { Component, OnInit, ViewChild } from '@angular/core';

@Component({
  selector: 'app-general',
  templateUrl: './general.component.html',
  styleUrls: ['./general.component.scss']
})
export class GeneralComponent implements OnInit {


  @ViewChild('resolutionSelect') resolutionSelect: MatSelect;

  resolutions: ResolutionOptionsInterface[] = [
    { value: '1920 x 1080' },
    { value: '800 x 600' }
  ];
  public selectedRes = this.resolutions[0];
  public isFullscreenEnabled = true;

  constructor() { }

  ngOnInit() {
    console.log("in oninit");
    this.resolutionSelect.value = this.resolutions[0].value;
  }

}

This is a bit more than the minimal working example, so I'll explain a bit:

One of my options is the resolution, which is choosable by a mat-select
This mat-select is described defined in the html file as below
This mat-select will be given pre-defined values, as defined in the resolutions array
Another of my options is simply the choice of fullscreen, making it a mat-slide-toggle (however, this is not yet fully implemented)

<mat-select #resolutionSelect fxFlex="200px"> <mat-option *ngFor="let res of resolutions" [value]="res.value" class="right"> {{res.value}} </mat-option> </mat-select>

So, you want to display the table, but without the data source? — wentjun
I will add .ts code, although I don't really see the benefit. Yes, I want to display the table, but there is no data source, since I have to build it by hand: I can't store all possible input possibilities in an external table. — Tare
Ok, and are the matHeaderRowDef known at the point of initialisation of the component? Also, you didnt seem to include the mat-cells? — wentjun
@wentjun Yes, basically it's just "Option" and "Value" as the header. The mat-cells are there though (or at least the one for the minimal example) — Tare

talhature talhature · Accepted Answer · 2019-04-29T14:56:56

In fact, it is possible to create a material table without a datasource. You need to make sure you made the header definitions with displayed columns and all.

Example - html file:

<table mat-table class="mat-elevation-z8">
  <ng-container matColumnDef="someValue">
    <th mat-header-cell *matHeaderCellDef mat-sort-header>Some Value Header</th>
  </ng-container>

  <ng-container matColumnDef="someOtherValue">
    <th mat-header-cell *matHeaderCellDef mat-sort-header>
      Some Other Value Header
    </th>
  </ng-container>

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

inside ts file, you need to have defined your array

displayedColumns: string[] = ['someValue', 'someOtherValue'];

Edit: If your requirement is just a simple table with a couple of predefined values, you can achieve it by using native table element with material css classes:

<table class="mat-table" >
  <tr class="mat-header-row">
    <th class="mat-header-cell">A</th>
    <th class="mat-header-cell">B</th>
  </tr>
  <tr class="mat-row">
    <td class="mat-cell">A</td>
    <td class="mat-cell">B</td>
  </tr>
</table>

Why is the <mat-table> without a Datasource not displayed in Angular 7

1 Answers