[Feature Request]: Allow the table sortingComparator to distinguish sorting direction

[Ted-Barrett]

Description

Currently, sortingComparator takes in two items in a table and returns a number which is used to sort. E.g.:

const a = {
  min_contract_term_days: 200,
  max_contract_term_days: 850
}

const b = {
  min_contract_term_days: 700,
  max_contract_term_days: 750
}

const c = {
  min_contract_term_days: 50,
  max_contract_term_days: 80
}

function contractTermComparator(a, b) {
  return a.min_contract_term_days - b.min_contract_term_days
}

This works great when you're sorting data from a single property. However, I would like to display a range in a single column. E.g.:

service	Available Contract Term
a	200-850 days
b	700-750 days
c	50 - 80 days

I would like to be able to vary the comparator based on if the sort direction is ascending or descending.

E.g.:

function contractTermComparator(a: my_type, b: my_type, sortingState: SortingState<my_type>) {
  if (sortingState.isDescending) {
    return a.max_contract_term_days - b.max_contract_term_days
  }
  return a.min_contract_term_days - b.min_contract_term_days
}

service	Available Contract Term V
a	200-850 days
b	700-750 days
c	50 - 80 days

service	Available Contract Term ^
c	50 - 80 days
a	200-850 days
b	700-750 days

(notice that the order when descending is a,b,c and when ascending is c,a,b which are not the reverse of eachother)

So if I want to find the shortest available term, I can sort ascending, but if I want to find the longest, I can sort descending.

This is currently not really possible, as the sortingComparator only takes in 2 arguments, and you can't pass a different comparator in each render (you get warned by checkSortingState, and it fails to sort. I haven't managed to fully understand why it fails to sort yet).

I am also open to alternative suggestions about the best way to resolve this problem. I'm aware that breaking the range into two separate columns would work, but I don't think it's unreasonable to present a range in this way. There is no reference to such a decision in the usage guidelines.

This could be implemented in a few ways:

1. Add some sort of prop as above
2. Extend TableProps.ColumnDefinition to add optional sortingComparatorDesc or similar
3. remove the requirement to pass the same comparator in each render

Thanks!

Code of Conduct

• I agree to follow this project's Code of Conduct
• I checked the current issues for duplicate requests

[YueyingLu]

Hi @Ted-Barrett
thanks for the request.
If you sort the table by using the min value for ascending and max value for descending, it may lead to unexpected behaviour: when the user sorts the table in the reverse order, they may expect the entire sorting to simply flip. However, with this logic, the result might be confusing.
Breaking the range into 2 separate columns sounds a reasonable solution. You may provide these options with the range together, and use CollectionPreferences to let customer configure what they want to display and which value to sort.

[Ted-Barrett]

Thanks for the reply. The main incentive to keeping it as one column is for information density, as there are a few fields like this in the page I am building.

However I can understand how this may seem unintuitive, and therefore be unsuitable for integration into cloudscape.

Please feel to close this feature request if you would like.