Sort using ngx-datatable-column

[dougss10]

I'm submitting a ... (check one with "x")

[x] bug report => search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request => Please do not submit support request here, post on Stackoverflow or Gitter

Current behavior

I'm trying to make the table sort using ngx-datatable-column, i got this sample donwloaded it and changed the columns to use ngx-datatable-column, but it didn't works.

Expected behavior

In the example when the cursos is over the title of the column appears like it was a link and if it be clicked then the table must be sorted

Reproduction of the problem

import { Component } from '@angular/core'; import {ColumnMode, NgxDatatableModule} from 'projects/swimlane/ngx-datatable/src/public-api';

@Component({ selector: 'server-sorting-demo', template: `

Server-side Sorting Source

Company Name

` }) export class ServerSortingComponent { loading = false;

rows = [];

columns = [{ name: 'Company', sortable: true }, { name: 'Name', sortable: true }, { name: 'Gender', sortable: true }];

ColumnMode = ColumnMode;

constructor(teste: NgxDatatableModule) { this.fetch(data => { this.rows = data; }); }

fetch(cb) { const req = new XMLHttpRequest(); req.open('GET', assets/data/company.json);

req.onload = () => {
  const data = JSON.parse(req.response);
  cb(data.splice(0, 20));
};

req.send();

}

onSort(event) { // event was triggered, start sort sequence console.log('Sort Event', event); this.loading = true; // emulate a server request with a timeout setTimeout(() => { const rows = [...this.rows]; // this is only for demo purposes, normally // your server would return the result for // you and you would just set the rows prop const sort = event.sorts[0]; rows.sort((a, b) => { return a[sort.prop].localeCompare(b[sort.prop]) * (sort.dir === 'desc' ? -1 : 1); });

  this.rows = rows;
  this.loading = false;
}, 1000);

} }

What is the motivation / use case for changing the behavior?

I need use ngx-datatable-column so a i need a way to make sort using ngx-datatable-column attribute Please tell us about your environment:

Windows 10, InteliJ IDEA, npm 6.9.0 node v10.16.3

• Table version:

  @swimlane/ngx-datatable: ^16.0.2

• Angular version:

  angular/core: ^8.2.0

• Browser: [all | Chrome XX | Firefox XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView ]

  Chrome: v78.0.3904.108

• Language: [all | TypeScript X.X | ES6/7 | ES5] TypeScript: 3.5.3

[FritzHerbers]

Sort is not working correct when using ngx-datatable-column https://stackblitz.com/edit/ngxdatatable-sort-test-kqx3df?file=src%2Fapp%2Fapp.component.html

On initialisation it is not sorted on company. The gender column was set sortable=false, but still can be sorted.

[BePo65]

Updated ngx-datatable in FritzHerbers stackblitz to version 16.0.3 (https://stackblitz.com/edit/ngxdatatable-sort-test-q9tvv9?file=src%2Fstyles.css) and list is sorted on company on initialization.

[FritzHerbers]

@BePo65, thx for your comment, initial sorting is working correct with 16.0.3.

The gender column was set sortable=false, but still can be sorted. Didn't notice this problem with my initial SB and using older version, please forget this remark.