How to use material2 data table

Question

I am trying to implement Material2 data table. But I am not able to understand how to use it in proper way.

i         


        

Answer 1

I had lot of troubles trying to use this approach:

import { DataSource } from '@angular/cdk/collections';

....

I could get the table, but to sort the columns was impossible because sort wasn't a known property of Datasource, etc, etc

finally i noted that was using "@angular/material": "^5.0.0-rc0",

Current, y I'm working with MatTableDataSource

IMPORTS

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

CLASS VARIABLES

private ELEMENT_DATA: reportInterface[] = [];
public tbDataSource;
public displayedColumns;

and in the constructor

this.dataService.getReport().subscribe(results => {
if(!results)return;
this.ELEMENT_DATA = results;
this.displayedColumns = [.............];
this.tbDataSource = new MatTableDataSource(this.ELEMENT_DATA);
this.tbDataSource.sort = this.sort;
});

and here is my filter function

applyFilter(filterValue: string) {
this.tbDataSource.filter = filterValue;
}

I think this is faster and easier