Material design data table layout with static data

surfspider picture surfspider · Jul 5, 2018 · Viewed 10.8k times · Source

How can I use the material design data table layout without a datasource (static data)? I can find no example for this use case on https://material.angular.io/components/table/examples. For example I tried the following without success.

<mat-table>
 <mat-header-row>
  <mat-header-cell>One</mat-header-cell>
  <mat-header-cell>Two</mat-header-cell>
 </mat-header-row>
 <mat-row>
  <mat-cell>aaa</mat-cell>
  <mat-cell>bbb</mat-cell>
 </mat-row>
</mat-table>

I'am getting following error:

LeistungenComponent.html:195 ERROR Error: StaticInjectorError(AppModule)[MatCell -> CdkColumnDef]: 
  StaticInjectorError(Platform: core)[MatCell -> CdkColumnDef]: 
    NullInjectorError: No provider for CdkColumnDef!
    at NullInjector.push../node_modules/@angular/core/fesm5/core.js.NullInjector.get (core.js:979)
    at resolveToken (core.js:1232)
    at tryResolveToken (core.js:1182)
    at StaticInjector.push../node_modules/@angular/core/fesm5/core.js.StaticInjector.get (core.js:1077)
    at resolveToken (core.js:1232)
    at tryResolveToken (core.js:1182)
    at StaticInjector.push../node_modules/@angular/core/fesm5/core.js.StaticInjector.get (core.js:1077)
    at resolveNgModuleDep (core.js:9238)
    at NgModuleRef_.push../node_modules/@angular/core/fesm5/core.js.NgModuleRef_.get (core.js:9919)
    at resolveNgModuleDep (core.js:9238)

Answer

Vedha Peri picture Vedha Peri · Jan 7, 2019

In your app.module.ts, add to providers

providers:[CdkColumnDef]

Add to the imports

import { CdkColumnDef } from '@angular/cdk/table';