Material design data table layout with static data

Question

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)

The first example on the [documentation page, which you have linked](https://material.angular.io/components/table/examples), shows exactly how to do this with a simple data array. — Andreas Mayer, Nov 16 '18 at 19:19
@AndreasMayer That example is for material table with a datasource. Question is about how to use the material table without a datasource. — Manoj De Mel, Jan 09 '19 at 02:58
@Manoj De Mel: If you look at the TypeScript source of that example, you will see that it uses a plain array instead of a MatTableDataSource. — Andreas Mayer, Jan 11 '19 at 10:27
@AndreasMayer As I understand, the question is about "how to user Material Table" without a datasource He/She would like to use it like a normal table. As far as I know you cannot use Material Table without a datasource regardless it's a MatDataSource or otherwise. — Manoj De Mel, Jan 12 '19 at 21:13

score 8 · Answer 1 · answered Jan 07 '19 at 20:03

8

In your app.module.ts, add to providers

providers:[CdkColumnDef]

Add to the imports

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

answered Jan 07 '19 at 20:03

Vedha Peri

1,386
2
12
11

3

Great it worked but now i am getting this error : Missing definitions for header, footer, and row; cannot determine which columns should be rendered – Anand_5050 Sep 08 '19 at 06:26
https://stackoverflow.com/questions/49026943/angular-mat-table-error-missing-definitions-for-header-and-row This should help – Vedha Peri Feb 21 '20 at 21:11
@VedhaPeri If someone want to make the table from static data, how it can be done?, If I am checking your link it's about datasource – Anirudha Gupta Jul 01 '20 at 02:30

score 3 · Answer 2 · answered Jan 12 '19 at 21:28

As far as I know you cannot use Material Table like a normal HTML table. You would need a datasource.

There are two ways to get the styles of Material Table though. You can either use Material Design Lite or by using the css styles from Material Table.

Please refer to this Git Hub thread for solution. https://github.com/angular/material2/issues/3805

<style>
.mat-table {
  display: block;
  font-family: Tahoma, Verdana;
}

.mat-row,
.mat-header-row {
  display: flex;
  border-bottom-width: 1px;
  border-bottom-style: solid;
  align-items: center;
  min-height: 48px;
  padding: 0 24px;
}

.mat-cell,
.mat-header-cell {
  flex: 1;
  overflow: hidden;
  word-wrap: break-word;
}
</style>

<div class="mat-table">
  <div class="mat-header-row">
    <div class="mat-header-cell">One</div>
    <div class="mat-header-cell">Two</div>
    <div class="mat-header-cell">Three</div>
  </div>
  <div class="mat-row">
    <div class="mat-cell">AAA</div>
    <div class="mat-cell">BBB</div>
    <div class="mat-cell">CCC</div>
  </div>
</div>

Material design data table layout with static data

2 Answers2