Sorting Issue with CvDataTable in Carbon Design System + Vue 3

[hgwrtsdev]

Hi Carbon Design System team,

Description:
I am urgently reaching out regarding a critical issue with the CvDataTable component in the Carbon Design System + Vue 3. The sorting functionality, expected to be triggered when clicking on the column headers, is malfunctioning. Despite the sorting icons transitioning, the data remains unsorted.

Steps to Reproduce:

1. Visit the official documentation/demo for Carbon Design System + Vue 3: https://vue.carbondesignsystem.com/.
2. Navigate to the CvDataTable section.
3. Click on the column headers to trigger sorting.

Expected Behavior:
The data in the CvDataTable should be sorted based on the selected column.

Actual Behavior:
The sorting icons transition, but the data does not get sorted.

Environment:
Carbon Components version: ^10.58.10
@carbon/vue version: ^3.0.9
Vue version: ^3.2.13

Additional Context:
This sorting functionality is crucial for our project, and we rely heavily on the CvDataTable component. Unfortunately, downgrading to version 2+ is not a viable solution due to compatibility issues with other dependencies.

I appreciate your attention to this matter, and I understand the importance of ensuring a smooth experience with Carbon Design System components. Please let me know if any additional information is needed or if I can assist in any way.
Or if anyone has the same problem, how did you solve it?

[davidnixon]

@hgwrtsdev Just saw this today. So sorry for delay. Its true that the story does not sort the items in the table so I can see that is confusing. Clicking on the header does issue a sort event to which the user of the component (you) is expected to respond. See note here: https://vue.carbondesignsystem.com/?path=/docs/component-cvdatatable--default-story

Sorting, filtering and pagination are the responsibility of the component user. This component raises events to facilitate this.

I'm going to update the story a bit to make this clear.

Example event from clicking the "Name" header.

[davidnixon]

done.
https://vue.carbondesignsystem.com/?path=/story/component-cvdatatable--default-story