The way the sort works is in the following order:
ascending (asc) => descending (desc) => unsort (returns an empty array)
The onSortChange event catches the new sort that is being applied. In your example, since the initial sorting is done in descending order, the next click will not change the direction, rather it will unsort. This is why an empty array is returned. On the next click, the items will be sorted in ascending order.
There are two possible approaches here:
1. If you want to be able to change from ascending to descending order only, you can set the allowUnsort property to false, which will disable the unsorting. Keep in mind, that this means that this will make the column always be sorted in some direction and the sorting cannot be removed.
There is a demo on how to achieve this at the following page in our documentation:
2. If you want to keep the unsorting option, but change the order of the sorting, you can customize how the sort state is being updated based on the received array from event.sort.
For example, when an empty array is received from event.sort, the sort state is updated with a sort in ascending order and vice-versa. This will change the sorting order to desc => asc => unsort.
Hope one of these approaches is suitable for your application.