Ngx-datatable: Custom comparator + columns width

[bchampion]

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

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

Current behavior
It's possible to add a custom comparator for a column in the class like that :

columns = [
    { name: 'Company', comparator: this.companyComparator.bind(this) },
    { name: 'Name', sortable: false },
    { name: 'Gender', sortable: false }
  ];

It's also possible to fixe the columns width in the template like that :

<ngx-datatable
    [columnMode]="'force'"
    ...
    [rows]="rows">
    <ngx-datatable-column name="Name" [width]="100"></ngx-datatable-column>
     ...
</ngx-datatable>

But it seems impossible to set the column width in the class or to set the comparator in the template.

Expected behavior
To be able to set both the columns width and the comparator in the class like that :

columns = [
    { name: 'Company', width: '100', comparator: this.companyComparator.bind(this) },
    { name: 'Name', width: '300', sortable: false },
    { name: 'Gender', width: '300', sortable: false }
  ];

And to be able to set both the columns width and the comparator in the template like that :

<ngx-datatable
    [columnMode]="'force'"
    ...
    [rows]="rows">
    <ngx-datatable-column name="Name" [width]="100" comparator="customComparator()"></ngx-datatable-column>
     ...
</ngx-datatable>

Reproduction of the problem

What is the motivation / use case for changing the behavior?
I need to set width because some columns are just a short number, others are long string.
Furthermore, I also need to set a custom comparator because one of my columns contains date.

Please tell us about your environment:
Win 10

• Table version: 0.8.x
  9.1.0

• Angular version: 2.0.x
  4.0.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 ]
  all

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

[amcdnl]

Good catch!

Would you mind PRing the additional property to this file: https://github.com/swimlane/ngx-datatable/blob/master/src/components/columns/column.directive.ts#L9

[bchampion]

What do you mean by PRing the additional property ?

In the file you linked, I can see both properties : width and comparator. But I tried to set the comparator in the template and it didn't work.

I found a workaround :
declaring the columns in the class, adding a custom css class to both header and cell (headerClass and cellClass), then setting the width in css. It works but the column are not resizeable anymore (which is fine for me).

[sheiidan]

You can set custom comparator in this way:
In your component ts file:
customComparator = (a, b) => ....
And in your template file:
[comparator]="customComparator"

[bchampion]

Thank's sheiidan, it works perfectly!

[Ryan-Haines]

@sheiidan , can you show a full example with the sort in the template? The a/b values are null when the comparator runs, so the comparator won't work.

This is a snippet of my code:

Template: challengesTable.html

<ngx-datatable-column name="Reviewed" [comparator]="sortReviewed">
    <ng-template let-row="row" ngx-datatable-cell-template>
        <span>{{row.numReviewed}}/{{row.numEntries}}</span>
    </ng-template>
</ngx-datatable-column>

TS challengesTable.ts
sorts by percent, then by numerator

sortReviewed(a: Challenge, b: Challenge): number {
    console.log('sorting reviewed');
    console.log(a);
    console.log(b);
    if(a.pctReviewed === b.pctReviewed) {
        if(a.num > b.num){
            return 1;
        } else if(a.num < b.num){
            return -1;
        } else {
            return 0;
        }
    } else if (a.pctReviewed > b.pctReviewed) {
        return 1;
    } else if (a.pctReviewed < b.pctReviewed) {
        return -1;
    }
}

[sheiidan]

@Ryan-Haines , here is a simple comparator example:
https://stackblitz.com/edit/angular-lsjnep

[chrisbmoore]

@Ryan-Haines Make sure you're reading in the correct parameters into the sort function.

(valueA, valueB, rowA, rowB, sortDirection)

Is a Challenge object representing a row in the table or a property on the row object?

Edit: Also a better place to ask is Stack Overflow.

[Ryan-Haines]

Thanks to @sheiidan for the example. It helped to point me in the right direction.

by putting an empty prop i.e. prop="" in the template, the row data was passed to the comparator as expected

<ngx-datatable-column name="Reviewed" prop="" [comparator]="sortReviewedComparator">
    <ng-template let-row="row" ngx-datatable-cell-template>
        <span {{(row.numReviewed/row.numEntries)*100||0}}% Reviewed">{{row.numReviewed}}/{{row.numEntries}}</span>
    </ng-template>
</ngx-datatable-column>

[brady800526]

@Ryan-Haines , here is a simple comparator example:
https://stackblitz.com/edit/angular-lsjnep

Thank you sir, it works. But, I think you don't have to redeclare the comparator again in the class, just pass in "compareByUnitPrice" would be more concise.