Components: matTable - DataSource issue

Created on 17 Oct 2017  路  17Comments  路  Source: angular/components

Bug, feature request, or proposal:

BUG

What is the expected behavior?

The table should accept a datasource

What is the current behavior?

Get an error: ][dataSource]="dataSource">
Can't bind to 'dataSource' since it isn't a known property of 'mat-table'.

What are the steps to reproduce?

I copied the example from the docs, updated the selectors from "mdTable" to "matTable" but no luck.

What is the use-case or motivation for changing an existing behavior?

NA

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

"@angular/animations": "^4.4.2",
"@angular/cdk": "github:angular/cdk-builds",
"@angular/common": "^4.2.4",
"@angular/compiler": "^4.2.4",
"@angular/core": "^4.2.4",
"@angular/flex-layout": "git+https://github.com/angular/flex-layout-builds.git",
"@angular/forms": "^4.2.4",
"@angular/http": "^4.2.4",
"@angular/material": "github:angular/material2-builds",
"@angular/platform-browser": "^4.2.4",
"@angular/platform-browser-dynamic": "^4.2.4",
"@angular/router": "^4.2.4",
"core-js": "^2.4.1",
"express": "^4.15.4",
"hammerjs": "^2.0.8",
"ngx-restangular": "^1.0.11",
"rxjs": "^5.4.2",
"zone.js": "^0.8.14"

Is there anything else we should know?

Most helpful comment

@teoCasasbuenas @pablitodeveloper change:

<table #table [dataSource]="dataSource"> 

to

<mat-table #table [dataSource]="dataSource">

If you're using version 5.2.4 of @angular/material.
https://v5.material.angular.io/components/table/examples

All 17 comments

Have you imported MatTableModule into your NgModule?

Now I have included it and it is working fine. Thanks for the help. I missed this somehow.

Yeah, me too. A better error message would have helped immensely.

i have imported MatTable Module but still no luck mat table not working....

I have the same problem "[dataSource] is not a known property of 'table'". I did follow the guide at angular material site. I have imported MatTableModule and as suggested in issue #5577 https://github.com/angular/material2/issues/5577 (can't reference issue) I did also import CdkTableModule, but still no luck.

I have the same problem. I have imported MatTableModule and CdkTableModule but is not working

@teoCasasbuenas @pablitodeveloper change:

<table #table [dataSource]="dataSource"> 

to

<mat-table #table [dataSource]="dataSource">

If you're using version 5.2.4 of @angular/material.
https://v5.material.angular.io/components/table/examples

Thank you @jakubszalaty, that did the trick. I did not realize that there was a special documentation for the angular v5+, my bad.

Thanks @jakubszalaty
Ridiculous that the documentation and examples still reference old versions
https://material.angular.io/components/table/examples

Seriously why are the docs outdated? I had to locate this issue thread in order to use a major component?

@jhhoff02 what parts of the docs are outdated? As of 6.0.0, <mat-table> and <table mat-table> are both supported.

I have same problem, None of the above codes not working for me.

Been trying this for about 3 days now.

You may want to make sure you're using the correct example for the version of angular material you have installed. I was getting this error because I had 5 installed but was using the 6 example.

Angular Core v6.0.2,
Angular Material, v6.0.2,
Angular CLI v6.0.0 (globally v6.1.2)

I had this issue when running ng test, so to fix it, I added to my xyz.component.spec.ts file:

import { MatTableModule } from '@angular/material';

And added it to imports section in TestBed.configureTestingModule({}):

beforeEach(async(() => {
    TestBed.configureTestingModule({
      imports: [ ReactiveFormsModule, HttpClientModule, RouterTestingModule, MatTableModule ],
      declarations: [ BookComponent ],
      schemas: [ CUSTOM_ELEMENTS_SCHEMA ]
    })
    .compileComponents();
}));

schemas: [ CUSTOM_ELEMENTS_SCHEMA ]

not working :/ mat-table is totally broken

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_This action has been performed automatically by a bot._

Was this page helpful?
0 / 5 - 0 ratings

Related issues

shlomiassaf picture shlomiassaf  路  3Comments

LoganDupont picture LoganDupont  路  3Comments

Miiekeee picture Miiekeee  路  3Comments

crutchcorn picture crutchcorn  路  3Comments

Hiblton picture Hiblton  路  3Comments