Components: Cannot create md-table with sort

[mixtou]

Bug, feature request, or proposal:

Bug

What is the expected behavior?

I would like to create a dataTable with sorting feature in columns as in example
https://material.angular.io/components/table/overview

What is the current behavior?

ERROR TypeError: Cannot read property 'mdSortChange' of undefined

What are the steps to reproduce?

Bellow is my code

```javascript
incidents-results.component.html

Αρ. Πρωτοκόλλου {{row.protocolNo}} Ημερομηνία {{row.date | date:'dd/MM/yyyy' }} Ασθενής {{row.patient.lastName}} {{row.patient.firstName}} Ιατρός {{row.doctor.lastName}} {{row.doctor.firstName}} Υπογράφων Ιατρός {{row.signingDoctor.lastName}} {{row.signingDoctor.firstName}} Κλινική {{row.clinic?.name}}

incident-results.component.ts

import {Component, Input, OnInit, ViewChild} from '@angular/core';
import {CommunicationService} from '../search/communication.service';
import {CollectionViewer, DataSource} from '@angular/cdk';
import {Observable} from 'rxjs/Observable';
import {Incident} from '../incidents/incident';
import {MdSort} from '@angular/material';
import 'rxjs/add/operator/startWith';
import 'rxjs/add/observable/merge';
import 'rxjs/add/operator/map';

@Component({
selector: 'incidents-results',
templateUrl: './incidents-results.component.html',
styleUrls: ['./incidents-results.component.css']
})

export class IncidentsResultsComponent implements OnInit{

@Input() noOfResults;
displayedColumns = ['protocolNo', 'date','patient', 'doctor', 'signingDoctor', 'clinic'];
dataSource: MyDataSource | null;
// @ViewChild(MdPaginator) paginator: MdPaginator;
@ViewChild(MdSort) sort: MdSort;

constructor(private communicationService: CommunicationService) {

}

ngOnInit(): void {
this.dataSource = new MyDataSource(this.communicationService, this.sort);
}

}

class MyDataSource extends DataSource {

constructor(private communicationService: CommunicationService, private sort: MdSort ){
super();
}

connect(collectionViewer: CollectionViewer): Observable

const displayDataChanges = [
  this.sort.mdSortChange,
  this.communicationService.getIncidents() //_exampleDatabase.dataChange,

];


return Observable.merge(...displayDataChanges).map(() => {
  return this.getSortedData();
});

// return this.communicationService.getIncidents();

}

disconnect(collectionViewer: CollectionViewer): void {
// throw new Error('Method not implemented.');
// this.communicationService.clearMessage();

}

getSortedData(): Incident[] {
const data = this.communicationService.data.slice();
if (!this.sort.active || this.sort.direction == '') { return data; }

return data.sort((a, b) => {
  let propertyA: number|string = '';
  let propertyB: number|string = '';

  switch (this.sort.active) {
    case 'protocolNo': [propertyA, propertyB] = [a.protocolNo, b.protocolNo]; break;
    case 'date': [propertyA, propertyB] = [a.date, b.date]; break;
    case 'patient': [propertyA, propertyB] = [a.patient.lastName, b.patient.lastName]; break;
    case 'doctor': [propertyA, propertyB] = [a.doctor.lastName, b.doctor.lastName]; break;
    case 'signingDoctor': [propertyA, propertyB] = [a.ypografonIatros.lastName, b.ypografonIatros.lastName]; break;
    case 'clinic': [propertyA, propertyB] = [a.clinic.name, b.clinic.name]; break;
  }

  let valueA = isNaN(+propertyA) ? propertyA : +propertyA;
  let valueB = isNaN(+propertyB) ? propertyB : +propertyB;

  return (valueA < valueB ? -1 : 1) * (this.sort.direction == 'asc' ? 1 : -1);
});

}
}

communication.service.ts

import {Injectable} from '@angular/core';
import {Incident} from '../incidents/incident';
import {Observable} from 'rxjs/Observable';
import {BehaviorSubject} from 'rxjs/BehaviorSubject';

@Injectable()
export class CommunicationService {
private subject = new BehaviorSubject get data(): Incident[] { return this.subject.value; }

sendIncidents(incidents: Incident[]) {
this.subject.next(incidents);
}

clearMessage() {
this.subject.next([]);
}

getIncidents(): Observable {
return this.subject.asObservable();
}

constructor() { }

}

Providing a Plunker (or similar) is the best way to get the team to see your issue.
Plunker template: https://goo.gl/DlHd6U

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

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

"dependencies": {
"@angular/animations": "^4.3.2",
"@angular/cdk": "^2.0.0-beta.8",
"@angular/common": "^4.3.2",
"@angular/compiler": "^4.3.2",
"@angular/compiler-cli": "^4.3.2",
"@angular/core": "^4.3.2",
"@angular/flex-layout": "^2.0.0-beta.8",
"@angular/forms": "^4.3.2",
"@angular/http": "^4.3.2",
"@angular/material": "^2.0.0-beta.8",
"@angular/platform-browser": "^4.3.2",
"@angular/platform-browser-dynamic": "^4.3.2",
"@angular/platform-server": "^4.3.2",
"@angular/router": "^4.3.2",
"@ngui/auto-complete": "^0.13.3",
"@swimlane/ngx-datatable": "^10.0.3",
"angular-font-awesome": "^2.0.2",
"bootstrap": "^4.0.0-alpha.6",
"core-js": "^2.4.1",
"font-awesome": "^4.7.0",
"hammerjs": "^2.0.8",
"install": "^0.10.1",
"jquery": "^3.2.1",
"ngx-bootstrap": "^2.0.0-beta.2",
"npm": "^5.3.0",
"rxjs": "^5.1.0",
"tether": "^1.4.0",
"typescript": "^2.4.2",
"zone.js": "^0.8.4"
},
"devDependencies": {
"@angular/cli": "^1.2.6",
"@angular/compiler-cli": "4.3.2",
"@angular/language-service": "^4.0.0",
"@types/jasmine": "2.5.45",
"@types/node": "~6.0.60",
"codelyzer": "~3.0.1",
"jasmine-core": "~2.6.2",
"jasmine-spec-reporter": "~4.1.0",
"karma": "~1.7.0",
"karma-chrome-launcher": "~2.1.1",
"karma-cli": "~1.0.1",
"karma-coverage-istanbul-reporter": "^1.2.1",
"karma-jasmine": "~1.1.0",
"karma-jasmine-html-reporter": "^0.2.2",
"protractor": "~5.1.2",
"ts-node": "~3.0.4",
"tslint": "~5.3.2",
"typescript": "~2.3.3"
}
}

Is there anything else we should know?

[willshowell]

Troubleshooting requests belong on Stack Overflow, Gitter, etc. The docs example shows it working fine

[mixtou]

Well i really can't see it working. I don't know if you can. I just see
Loading Material Docs example...
and nothing gets Loaded.

[willshowell]

Stupid material DataTable. Why does it have to be so difficult to use a data table.
Why can't it just support

[mixtou]

Never Mind I will just use jQuery DataTables...

[mixtou]

Either i am completely stupid, or this dataTable Implementation is just for the developer. Could you at least write some documentation with examples, and please can your library just read data from a source: Array<any> and not only from a stream/observable of data???

[benelliott]

@willshowell The Plunkr issue template is actually broken currently because of something to do with RxJS 5.4.3, pinning it to 5.4.2 seems to fix it

[mixtou]

Well i think angular is going to fail because of its complexity.
Just to write a HalloWorld application you only need to make a trip around Earth....
And to use a third party Library you need to be the cousin of Yuri Geller. (Famous Magician)

[mixtou]

I am working with angular a year now, but by the time this project finishes i am switching to react.
Angular is very difficult to learn an use. I can't get it. You had a great tool for single page apps, GWT.
What the heck happened to that. Why haven't you supported it. I had used if for a project in the past and i had found it great.
Why are you creating new Libraries that are very difficult to learn and use and you don't support your old projects by making them more complete and easier to use???

[mixtou]

Is it normal in order to use a dataTable to spend more than two days, and finally ending up in switching to a different library?? Well this is completely unacceptable for a library to have such a steep learning curve.

[SonicScrewdriver]

Honestly, I agree. Datatable is much too complicated. I've spent several days just trying to get something that can filter, sort, and paginate. It's almost getting to the point where it'd be easier to start from scratch.

[andrewseguin]

If you want a working example of the MdTable with filtering, sorting, pagination, and selection, check out this StackBlitz: https://stackblitz.com/edit/angular-material2-issue-sct3gm

If the majority of your trouble is based on getting a good data source to do these things, I'm submitting PR #6747 soon that will add an already-built data source that handles filtering, sorting, and pagination.

In addition, I'm currently working on the design of an md-simple-table which will be a more opinionated md-table that comes with sorting, pagination, etc. It'll be a much easier template API (though less configurable about what goes into cells).

[SonicScrewdriver]

You know, gosh darn it, I actually finally got it to work just an hour ago.

The problem was the MatSortModule import was confusing me in comparison with MdSort import.
I also had to force my data to come into the right order. It took 3 days, but finally I have a table that can filter, sort, and paginate 2500 medications from a database.

Thank you for the help! My final solution looks similar to yours, however for searchable solutions I had to pull together about 6 different sources until I got it working. The problem is that all of the names have changed and all of the imports had changed as well.

I look forward to using md-simple-table in the future. :)

[andrewseguin]

Ah I'm glad you got it up and working. Sorry for the complexity here in this table templating and datasource. We took the route of creating the complex foundation first so that we got it right in terms of performance, accessibility, and cell-templating architecture. However we knew that it'd be a bit of a struggle for early-users of the table since it uses pretty deep core Angular concepts (e.g. ng-template, let row, etc.)

My main priority now is to simplify and build on top of the foundation, starting with the MdTableDataSouce and then the simple table that comes pre-built with a lot of cool features. Hopefully once these pieces our out, reading out table docs won't feel like quite so much of a chore to get started.

[walhow]

@andrewseguin, your example on stackblitz got me a lot closer to what I'm trying to get (paging and sorting client side), but when I added a column for phone numbers, the sort doesn't work for me. Could you look at my blitz, and suggest a way to fix the phone number sorting? Also, is there any reference for implementing sort on Anglar DataSource? https://stackblitz.com/edit/angular-material2-table-zrqdbj?file=app%2Fapp.component.ts
Thanks!

[andrewseguin]

You should read up on how array sorting works using comparators (just in general) to implement a good sort algorithm for your unstructured phone numbers (I suspect you'll want to store a more structured number to make life easier on you)

Also, check out the MatTableDataSource which will also simplify a lot of your code. It natively handles the sort and pagination for you. Youll still want to override the sort function though

[walhow]

@andrewseguin, I've got a question on your sortData() algorithm in the sample you provided. Inside the object literal for (a,b) => {}, how can I convert the a and b variables to be strings? I'm running into error in the code sample below, specified in the comment. (I'm trying to come up to speed on the arrow syntax, sorry for newbie question).

`sortData(data: PhoneData[]): PhoneData[] {

// ...  
return data.sort((a,b) => {
    let propertyA: number|string = "";
    //...       
    switch(this._sort.active) {
        case 'firstName':

            /* I know 'firstName' below will be a string, so I want to lower case it:               
                ... but, I get an error on the propertyA assignment below:

                [ts] Type '() => string' is not assignable to type 'string | number'
                Type '() => string' is not assignable to type 'number'
            */
            [propertyA, propertyB] = [a.firstName.toLowerCase, b.firstName.toLowerCase];            
            break;
    }
});

} `

Sorry if this is more of a StackOverflow question, there doesn't seem to be much there yet on this subject.
Thanks!

[MichaelScottBurke]

It would be really great if you could put a working example of data table in the docs site that includes: filtering, paging and sorting which is the most likely scenario and apparently the most difficult to get working. Including a simple data set rather than one generated on the fly would also help people understand better, thanks!

[SonicScrewdriver]

I agree. We really need a full-featured example.

The current examples are incredibly difficult to manage, and I've run into the same issue regarding the datasource being undefined / fetched AFTER the data-table attempts to build the table.

I solved it before by forcing the table to pop up in a dialog (thus pushing the data source into the MDDATA that way), but that is no longer an option so I am back to square one.

[andrewseguin]

@micky68 @SonicScrewdriver The last example on the table docs now show a table with filtering, paging, and sorting https://material.angular.io/components/table/examples

https://stackblitz.com/edit/angular-fu7vce?file=main.ts

Hopefully a lot of the complexity with the data source is simplified by just using the library's MatTableDataSource

[walhow]

Thanks, the component code looks a lot simpler now than the Angular 4
version, I'll try it out again.

On Mon, Jan 22, 2018 at 5:16 PM, Andrew Seguin [e-mail]
wrote:

@micky68 https://github.com/micky68 @SonicScrewdriver
https://github.com/sonicscrewdriver The last example on the table docs
now show a table with filtering, paging, and sorting
https://material.angular.io/components/table/examples

https://stackblitz.com/edit/angular-fu7vce?file=main.ts

Hopefully a lot of the complexity with the data source is simplified by
just using the library's MatTableDataSource

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
https://github.com/angular/material2/issues/6493#issuecomment-359588485,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AFrq6lwxQyIN5jZ4sKuLJFRYlrgU5LYDks5tNQjFgaJpZM4O5DVN
.

[angular-automatic-lock-bot[bot]]

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.

<sub>_This action has been performed automatically by a bot._</sub>