Column custom sort: pass row data to comparator

[PeS82]

I'm submitting a ... (check one with "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 When TableColumn.comparator is used, arguments passed to the comparator are values of that column.

Expected behavior It would be nice to have an option to receive row data to comparator.

Due to backward compatibility it would be nice to add another Input to TableColumn, e.g. rowComparator(row, row), not to break legacy code.

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

My specific case is I am displaying time (duration) in a column (e.g. "1d 20h 14m", "5h 20m"). In other column there is the same value, as number in seconds. Obviously, alphanumeric sorting is wrong in this case and I need to sort the column by seconds.

Since comparator feeds me with string value I must parse the duration back to seconds despite the fact that the value is already present in the table model.

I believe this would be handy in other cases when sortable value is already present however the displayed value is somehow "humanized".

• Table version: 9.3.0

• Angular version:

4.1.3 but that is not relevant I believe

[olaf89]

I have the exactly the same issue, any solutions?

[commitBlob]

same here

[Ecksters]

Latest version has this feature, both rows are passed as the 3rd and 4th parameters to the comparator function, although I don't think it's been pushed to NPM yet.

[chrisbmoore]

This should have been added in ngx-datatable 10.4.0. I've tried it and it works.

[ArfanMirza]

@chrisbmoore any demo script.. ?

[chrisbmoore]

The API has it here: https://swimlane.gitbooks.io/ngx-datatable/api/column/inputs.html#comparator

Custom sort comparator, used to apply custom sorting via client-side. Function receives five parameters, namely values and rows of items to be sorted as well as direction of the sort ('asc'|'desc'): (valueA, valueB, rowA, rowB, sortDirection) => -1|0|1

Using the demo, it looks like:

companyComparator(propA, propB, rowA, rowB) {
    console.log('Sorting Comparator', propA, propB, rowA, rowB);
    //do something with rowA and rowB objects.
    if (rowA.age < rowB.age) return -1;
    if (rowA.age > rowB.age) return 1;
  }

[Ryan-Haines]

For anyone else confused as to how to use a custom comparator in a template, you can pass the row data to the comparator by putting prop="" in the template, like this:

<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>

[arpansac]

@Ryan-Haines, thanks this worked perfectly. Any way to use multiple comparators across separate columns? I've used it but it always binds to the last comparator. Been stuck at it for some time now...

[alexandis]

propA, propB are always empty here. What is the point of having these arguments in comparator, if this function is triggered only if prop="", i.e. for custom templates? Instead, I would like to pass custom arg into this function, but have no idea how.

@Ryan-Haines, thanks this worked perfectly. Any way to use multiple comparators across separate columns? I've used it but it always binds to the last comparator. Been stuck at it for some time now...

Indeed, other option is to have one comparator with custom parameters... But I don't know how to use such here.