The Table component seems not updating the AntSorterResult onClick on column for sort - during the onChange event parameters are not updating

[LuXDAmore]

• I have searched the issues of this repository and believe that this is not a duplicate.

Version

3.2.20

Environment

Chrome 113.0.5653.0, Vue 3.3.2

Reproduction link

Steps to reproduce

• Define a sortOrder: "descend" (or "ascend") in a column;
• Click on the table-head column-head to change the sorting value;
• Check the table onChange event, the AntSorterResult is not updating, so it's impossible to update external values related to this one.

What is expected?

It's expected that the AntSorterResult is updated with the new sorting values.

What is actually happening?

AntSorterResult order is not updating and the sorting column key/id is setted to undefined.

---

Check the console log in the reproduction example to see it.

[aibayanyu20]

I made some adjustments to the example you provided and you can refer to it for usage. Normally, components should not directly modify the data passed in from the outside, so you need to manually update the sorting state.

[LuXDAmore]

@aibayanyu20 in this case is a ref, but what if columns is a computed? How do you know that the event is triggered due to a sort event if the params for sorting is not updated?

In the example, the problem is that the sortingParameters is not updating from the onChange event, but every other parameter is working as expected (I've added the paginationParameters to check the value); You can see that antSorting.value is updated only once.

Try to click in the same table-column, also the UI is not updating correctly.

[aibayanyu20]

The problem is still the same as I mentioned before. The value of sortOrder property in the column object is not updated, resulting in no changes in the data itself. Appropriate assignment will not trigger an update.

As for the situation with computed properties, it's even more important not to update external values since the data binding should be a unidirectional data flow. Internal modifications of external values shouldn't be made, rather external changes should be the way to manage the values.

To determine whether a sorting is triggered, you can use the fourth parameter.

const onTableChange2 = (
      paginationParameters,
      __,
      sortingParameters,
      extra
    ) => {
      console.log(extra);
	 if(extra.action === 'sort'){
		// TODO
	}
};

[LuXDAmore]

@aibayanyu20

The problem is still the same as I mentioned before. The value of sortOrder property in the column object is not updated, resulting in no changes in the data itself. Appropriate assignment will not trigger an update.

Why with the other parameters is working? I'm not updating them from code/UI, is Ant doing it under the ground (ex. paginationParameters).

To determine whether a sorting is triggered, you can use the fourth parameter.

The fourth parameters is useful, but i think onTableChange has to trigger the new value as it is doing with the others parameters, otherwise is not working as expected.

I've updated the example with just one table to show you the issue HERE.

Also a tooltip on the column-head is appearing "Click to cancel sorting", but it's not working.

[LuXDAmore]

I need this because the sorting/pagination is made via BackEnd, and the extra parameters is not giving me any information, just the action and the currentDataSource, how can i know which kind of sorting the user did? Like the order or the column? The sortingParameters is supposed to be used for this, but it's not updating.

[aibayanyu20]

You can try using this solution to address your issue, as it might be the best solution currently available for your problem.
example

[LuXDAmore]

Ok, I'm gonna try with this.

I can close this issue.

[github-actions]

This issue has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.