Carbon: No possibility to reset sorting on custom sort

[shubh1608]

What package(s) are you using?

• [ 9.62.1 ] carbon-components
• [ 6.61.1 ] carbon-components-react

Summary

Relevant information

We are using custom sort function, the third click on header should result in unsort operation but I don't see any way to catch that event and update the table. As per my understanding custom sorting function will be called on first and second click on the header, but on the third click, it won't call the custom sort function. So how can we update the table to an unsorted state?

[emyarod]

can you create a reduced test case in Code Sandbox for easier testing and debugging?

[shubh1608]

@emyarod - Reproduced my scenario here - https://codesandbox.io/s/datatable-customsort-9tli5

Description of what's happening and what I am looking for.

• We have a scenario where we have used custom sort and later we noticed that we don't have any way to unsort the rows in the table.
• I checked and found out that customSort function will be called on 1st(ASC order sort) and 2nd(DESC order sort) Click but not on 3rd click which was meant to unsort the rows

Question - As we are sorting and updating the table in customsort function and if it is not getting called on 3rd click(unsort operation) then how do we unsort the rows?

I am not an expert and don't have much experience here, so please let me know if I am missing something or what we could do to unsort the table when we are using custom sorting.

[emyarod]

you're right that when no sort is applied, the sorting function will not be called. instead, the initial row order is returned and stored in the table's state.rowIds

[shubh1608]

@emyarod - I doubt state.rowIds will store initial row order, I checked and noticed they are getting updated too as per the sort order and they are also not getting back to the unsort state on 3rd click. I checked state.initialRowOrder and they are also getting updated on sort so they will also not preserve the initial row order.

So I am still stuck figuring out how to unsort the table on 3rd click when I am using the custom sort function.

I will appreciate if you guide me here with some code examples as well as I checked and didn't find any examples around custom sort and how to handle this scenario when we need to unsort the operation on 3rd click.

If you have covered this scenario of the custom sort in the documentation then please point me to it and let me know if I am missing something here.

[shubh1608]

This seems to be the limitations while using custom sort with data-table, I have to implement the desired behaviour in our product i.e unsort table on the third row click - I will appreciate if anyone can point me towards a solution for handling this scenario? better if I could get some code examples

[joshblack]

I believe that it should preserve the original order on the third click, here is a quick codesandbox that copies over the default sort behavior to demonstrate. Let me know if you instead would like to change the ordering from the default ordering passed to component and I can help out there, too. Hope this helps!

[shubh1608]

@joshblack - Thank you for taking out time to provide me with a code example, and you are right the data table will preserve the order on the third click and will unsort the rows.

So Finally now I know what I missed here - _custom sort functions should return -1, 0 or 1 as mentioned in documents_

What we wanted to achieve - Sort all the rows bounded to the data table, not just the rows displayed on the current page.(we have multiple pages)

What we did - We used a custom sort function using sortRow prop and we actually ended up misusing this custom sort function, instead of implementing it to return -1, 0, or 1, we actually sorted the whole list and updated the state which results in the rebinding of this list to the data table. As a result data table is not able to preserve the initial row order as it is changing on every header click due to our implementation.

Right now for solving this issue, I am using the onClick event on Headers and checking if the sort direction is "NONE" and if it is then I am again updating the state with the initial list which makes the table unsorted.

So, sorting in ASC and DESC order is done by custom sort function using sortRow prop and unsort operation of rows is handled by header onClick event.

I know this is not a good solution and I believe there must be a better way to achieve our scenario - "Sort all the rows not just the ones displayed on the current page in data table"

@joshblack - Can you point me towards the right solution for achieving the above scenario without misusing the custom sort function? I think we should have an option to tell the data table to sort all the rows not just the ones on the current page